WordPress Meetup #12July 22, 2012

WordPress Nepalwpnepal.org

facebook.com/groups/wordpressnepal

WordPress 3.4Theme Customizer

Chandra Maharzannhuja.com

tweet @maharzan

Daryl KoopersmithWordPress Core Developer

Why use it?

• Live Preview - no rush

Quick Demo

First things !rst

• add_theme_support( 'custom-header' );

• add_theme_support( 'custom-background' );

• register_nav_menus ( );

Theme Options

• Theme Mod• set_theme_mod / get_theme_mod

• Individual Settings

• Serialized Settings• set_option / get_option

Structure

WP_Customize_Section

WP_Customize_Control

WP_Customize_Setting

Extensions

• WP_Customize_Upload_Control

• WP_Customize_Image_Control

• WP_Customize_Header_Image_Control

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( );

The LIVE FUN!

• 'transport' => 'postMessage'• $wp_customize->add_setting( 'cleanr_options[color]', array(

'default' => '', 'type' => 'option', 'capability' => 'edit_theme_options', 'transport' => 'postMessage') );

• 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 } ?>

Lets see some code!

Improvements

• Textarea Type

• CSS Plugin by Daryl Koop

• Clear Color HEX

• Refresh Time

References

• http://ottopress.com

• http://codex.wordpress.org

• http://graphpaperpress.com

Thank youQuestions?