The document discusses using the WordPress theme customizer API to create visual theme options. It covers adding sections, settings and controls to build a theme customizer interface. Custom controls can be created as custom PHP classes. Settings can be saved as options or theme modifications and refreshed on the page or via asynchronous postMessage updates. Resources for learning more about the theme customizer are provided.

1. drewf.us/wcyvr13
Customizer-ing Theme Options:
AVisual Playground
WordCampVancouver 2013
Saturday, August 17, 13

2. drewf.us/wcyvr13
About Me
Drew Jaynes
Web Engineer, 10up
Core/Docs Contributor
@DrewAPicture
Saturday, August 17, 13

3. drewf.us/wcyvr13
The Customizer?
Saturday, August 17, 13

4. drewf.us/wcyvr13
.org Customizer-ers
Customizer
Theme Options
Saturday, August 17, 13

5. drewf.us/wcyvr13
Why does it matter?
Visual options are visual ... or they should be
Saturday, August 17, 13

6. drewf.us/wcyvr13
Customizer API
Sections Settings Controls
Saturday, August 17, 13

7. drewf.us/wcyvr13
customize_register
function my_theme_customizer( $wp_customize ) {
// do magic
}
add_action( 'customize_register', 'my_theme_customizer' );
Saturday, August 17, 13

8. drewf.us/wcyvr13
add_section()
$wp_customize->add_section( 'my_general_settings', array(
'title' => __( 'General Settings', 'textdomain' ),
'priority' => 40
) );
Saturday, August 17, 13

9. drewf.us/wcyvr13
add_setting()
$wp_customize->add_setting( 'nubrick_site_width', array(
'default' => 860
) );
Saturday, August 17, 13

10. 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

11. 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

12. 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

13. drewf.us/wcyvr13
To Refresh or Not to Refresh
Settings Transports
– refresh (default)
– postMessage
Saturday, August 17, 13

14. drewf.us/wcyvr13
To Refresh or Not to Refresh
postMessage 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

15. drewf.us/wcyvr13
To Refresh or Not to Refresh
postMessage 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

16. drewf.us/wcyvr13
Built-in Controls
Text
Dropdown Pages
Images
Colors
Saturday, August 17, 13

17. drewf.us/wcyvr13
Custom Controls
Saturday, August 17, 13

18. drewf.us/wcyvr13
Custom Controls
function 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

19. drewf.us/wcyvr13
Resources
Ottopress.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

20. drewf.us/wcyvr13
Fun with the Customizer
Saturday, August 17, 13

21. drewf.us/wcyvr13
Case Study:Twenty Twelve Child Theme
Saturday, August 17, 13

22. drewf.us/wcyvr13
Thanks. Questions?
Drew Jaynes
@DrewAPicture
10up.com
Saturday, August 17, 13