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