Customize

Anything

https://slides.com/ericlewis-1/customize-anything

Eric "Andrew" Lewis

Web Developer @ NYT

Lens Homepage

User

User

Developer

GLOBAL

STATE

GLOBAL

STATE

<?php
add_action( 'wp_head', function() {
	?><style>
	<?php echo esc_html( get_theme_mod( 'custom_css' ) ) ?>
	</style><?php
});
add_action( 'customize_register', function( $manager ) {
	global $wp_customize;
	$wp_customize->add_section( 'custom_css', array(
		'title' => __( 'Custom CSS' ),
		'capability' => 'edit_theme_options',
	) );
	$wp_customize->add_setting( 'custom_css', array(
		'default' => '',
		'sanitize_callback' => 'wp_filter_nohtml_kses',
	) );
	$wp_customize->add_control( 'custom_css', array(
		'label' => __( 'Custom Theme CSS' ),
		'type' => 'textarea',
		'section' => 'custom_css',
	) );
}, 12, 1 );

https://gist.github.com/ericandrewlewis/5d51ba515cd96f4e089c

Custom CSS Per Post Plugin

https://github.com/ericandrewlewis/wp-custom-css-per-post

Know what features you can depend on

<?php
add_action( 'admin_enqueue_scripts', function($hook_suffix) {
    if ( in_array( $hook_suffix, array( 'post.php', 'post-new.php' ) ) ) {
        wp_enqueue_script( 'customize-loader' );
    }
} );

add_action( 'post_submitbox_misc_actions', function() {
    ?>
    <button class="load-customize" 
            href="<?php echo esc_url( wp_customize_url() ) ?>" 
            type="button">Custom button to open customizer</button>
    <?php
} );

Opens the Customizer anywhere

<?php
add_action( 'admin_enqueue_scripts', function($hook_suffix) {
    if ( in_array( $hook_suffix, array( 'post.php', 'post-new.php' ) ) ) {
        wp_enqueue_script( 'customize-loader' );
    }
} );

add_action( 'post_submitbox_misc_actions', function() {
    $customize_url = add_query_arg(
        array( 'url' => urlencode( home_url() . '/page-to-preview/' ) ),
        wp_customize_url()
    );
    ?><button class="load-customize" 
              href="<?php echo esc_url( $customize_url ) ?>" 
              type="button">Custom button to open customizer</button>
    <?php
} );

Set the URL of the live preview

<?php
add_action( 'admin_enqueue_scripts', function($hook_suffix) {
    if ( in_array( $hook_suffix, array( 'post.php', 'post-new.php' ) ) ) {
        wp_enqueue_script( 'customize-loader' );
    }
} );

add_action( 'post_submitbox_misc_actions', function() {
    $customize_url = add_query_arg(
        array( 'autofocus' => array( 'panel' => 'widgets' ) ),
        wp_customize_url()
    );
    ?>
    <button class="load-customize"
            href="<?php echo esc_url( $customize_url ) ?>"
            type="button">Custom button to open customizer</button>
    <?php
} );

Deeplink to a panel

Create Customizer Objects

• Setting. Manages data-related activities for custom CSS. Stored in postmeta. Fudges data during preview.
• Control. UI representation. Use the out-of-the-box textarea control.

A "Setting" can be any encapsulated data

• Need an overridable getter for fudging data during preview
• Postmeta - get_post_metadata filter
• Widget area content - option_sidebars_widgets filter
• Widget instance - option_{widget-name}_{instance-id}
• Nav Menus - wp_get_nav_menus filter

Further Reading

• Hang out with Weston at the bar
• Daryl Koopersmith's jQuery Conf talk about the Customizer https://www.youtube.com/watch?v=S-YKTJfZPcQ
• My Customizer docs
  https://gist.github.com/ericandrewlewis/2310fd6d7dabf0696965
• WP.org Customizer docs
  https://developer.wordpress.org/themes/advanced-topics/customizer-api/