Explaining what Theme Customizer is and how to use it in your own themes.

1. WordPress Meetup #12
July 22, 2012
WordPress Nepal
wpnepal.org
facebook.com/groups/wordpressnepal

2. WordPress 3.4
Theme Customizer
Chandra Maharzan
nhuja.com
tweet @maharzan

3. Daryl Koopersmith
WordPress Core Developer

4. Why use it?
• Live Preview - no rush

5. Quick Demo

6. First things first
• add_theme_support( 'custom-header' );
• add_theme_support( 'custom-background' );
• register_nav_menus ( );

7. Theme Options
• Theme Mod
• set_theme_mod / get_theme_mod
• Individual Settings
• Serialized Settings
• set_option / get_option

8. Structure
WP_Customize_Section
WP_Customize_Control
WP_Customize_Setting

9. Extensions
• WP_Customize_Upload_Control
• WP_Customize_Image_Control
• WP_Customize_Header_Image_Control

10. So, How do we do it?
• add_action( 'customize_register', 'my_function' );
• function my_function ( $wp_customize ) {
• $wp_customize->add_section( );
• $wp_customize->add_setting( );
• $wp_customize->add_control( );

11. The LIVE FUN!
• 'transport' => 'postMessage'
• $wp_customize->add_setting( 'cleanr_options[color]', array(
'default' => '',
'type' => 'option',
'capability' => 'edit_theme_options',
'transport' => 'postMessage'
) );

12. • if ( $wp_customize->is_preview() && !
is_admin() )
add_action( 'wp_footer', 'my_custom_preview',
21);
• <?php function my_custom_preview() { ?>
<script type="text/javascript">
( function( $ ){
wp.customize( 'setting_name', function( value ) {
value.bind( function( to ) {
$( '.posttitle' ).css( 'color', to ? '#' + to : '' );
});
});
} )( jQuery );
</script>
<?php } ?>

13. Lets see some code!

14. Improvements
• Textarea Type
• CSS Plugin by Daryl Koop
• Clear Color HEX
• Refresh Time

15. References
• http://ottopress.com
• http://codex.wordpress.org
• http://graphpaperpress.com

16. Thank you
Questions?