customizer-ing theme options: a visual playground
DESCRIPTION
Presented at WordCamp Vancouver, August 17, 2013.TRANSCRIPT
drewf.us/wcyvr13
Customizer-ing Theme Options:A Visual Playground
WordCamp Vancouver 2013
Saturday, August 17, 13
drewf.us/wcyvr13
About Me
Drew JaynesWeb Engineer, 10up
Core/Docs Contributor
@DrewAPicture
Saturday, August 17, 13
drewf.us/wcyvr13
The Customizer?
Saturday, August 17, 13
drewf.us/wcyvr13
.org Customizer-ers
Customizer
Theme Options
Saturday, August 17, 13
drewf.us/wcyvr13
Why does it matter?
Visual options are visual ... or they should be
Saturday, August 17, 13
drewf.us/wcyvr13
Customizer API
Sections Settings Controls
Saturday, August 17, 13
drewf.us/wcyvr13
customize_registerfunction my_theme_customizer( $wp_customize ) { // do magic}add_action( 'customize_register', 'my_theme_customizer' );
Saturday, August 17, 13
drewf.us/wcyvr13
add_section()$wp_customize->add_section( 'my_general_settings', array( 'title' => __( 'General Settings', 'textdomain' ), 'priority' => 40) );
Saturday, August 17, 13
drewf.us/wcyvr13
add_setting()
$wp_customize->add_setting( 'nubrick_site_width', array( 'default' => 860) );
Saturday, August 17, 13
drewf.us/wcyvr13
add_control()$wp_customize->add_control( 'my_site_width', array( 'label' => __( 'Site Width', 'textdomain' ), 'section' => 'my_site_settings' 'settings' => 'my_site_width' ) );
Saturday, August 17, 13
drewf.us/wcyvr13
One Setting$wp_customize->add_section( 'my_general_settings', array( 'title' => __( 'General Settings', 'textdomain' ), 'priority' => 40) );$wp_customize->add_setting( 'my_site_width', array( 'default' => 860) );$wp_customize->add_control( 'my_site_width', array( 'label' => __( 'Site Width', 'textdomain' ), 'section' => 'my_general_settings' 'settings' => 'my_site_width') );
Saturday, August 17, 13
drewf.us/wcyvr13
More add_setting()
Settings Types
– ‘option’– ‘theme_mod’ (default)
echo get_theme_mod( 'my_setting' );
$settings = get_option( ‘my_settings’ );echo $settings[‘my_setting’];
Saturday, August 17, 13
drewf.us/wcyvr13
To Refresh or Not to RefreshSettings Transports– refresh (default)– postMessage
Saturday, August 17, 13
drewf.us/wcyvr13
To Refresh or Not to RefreshpostMessage Transport– Specified with the ‘transport’ argument in add_setting()
$wp_customize->add_setting( 'nubrick_site_width', array( 'default' => 860, 'transport' => ‘postMessage’) );
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
– Change built-in controls’ transports
Saturday, August 17, 13
drewf.us/wcyvr13
To Refresh or Not to RefreshpostMessage Transport
– Asynchronous updates using JavaScript
( function( $ ) { // Site title and description. wp.customize( 'blogname', function( value ) { value.bind( function( to ) { $( '.site-title a' ).text( to ); } ); } );} )( jQuery );
– Enqueue scripts on the ‘customize_preview_init’ hook
Saturday, August 17, 13
drewf.us/wcyvr13
Built-in ControlsText
Dropdown Pages
Images
Colors
Saturday, August 17, 13
drewf.us/wcyvr13
Custom Controls
Saturday, August 17, 13
drewf.us/wcyvr13
Custom Controlsfunction my_theme_customizer( $wp_customize ) { class My_Customize_Control extends WP_Customize_Control { // do magic } $wp_customize->add_control( new My_Customize_Control( $wp_customize, 'my_setting', array( 'label' => __( 'My Setting', 'textdomain' ), 'section' => 'my_section', 'settings' => 'my_setting' ) ) );}add_action( 'customize_register', 'my_theme_customizer' );
Saturday, August 17, 13
drewf.us/wcyvr13
ResourcesOttopress.com (Otto42)
– Customizer API series published last year
WordPress Theme Customizer Controls (paulund)– https://github.com/paulund/Wordpress-Theme-Customizer-Custom-Controls
WordPress Theme Customizer Boilerplate (slobodan)– https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate
Saturday, August 17, 13
drewf.us/wcyvr13
Fun with the Customizer
Saturday, August 17, 13
drewf.us/wcyvr13
Case Study: Twenty Twelve Child Theme
Saturday, August 17, 13
drewf.us/wcyvr13
Thanks. Questions?
Drew Jaynes@DrewAPicture 10up.com
Saturday, August 17, 13