More Related Content Similar to WordPress 3.4 Theme Customizer (20) WordPress 3.4 Theme Customizer1. WordPress Meetup #12
July 22, 2012
WordPress Nepal
wpnepal.org
facebook.com/groups/wordpressnepal
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 } ?>
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n