WordPress 3.4 Theme Customizer

1,072 views

Published on

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

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,072
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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
  • WordPress 3.4 Theme Customizer

    1. 1. WordPress Meetup #12 July 22, 2012 WordPress Nepal wpnepal.orgfacebook.com/groups/wordpressnepal
    2. 2. WordPress 3.4Theme Customizer Chandra Maharzan nhuja.com tweet @maharzan
    3. 3. Daryl Koopersmith WordPress Core Developer
    4. 4. Why use it?• Live Preview - no rush
    5. 5. Quick Demo
    6. 6. First things first• add_theme_support( custom-header );• add_theme_support( custom-background );• register_nav_menus ( );
    7. 7. Theme Options• Theme Mod • set_theme_mod / get_theme_mod• Individual Settings• Serialized Settings • set_option / get_option
    8. 8. Structure WP_Customize_Section WP_Customize_Control WP_Customize_Setting
    9. 9. Extensions• WP_Customize_Upload_Control• WP_Customize_Image_Control• WP_Customize_Header_Image_Control
    10. 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. 11. The LIVE FUN!• transport => postMessage• $wp_customize->add_setting( cleanr_options[color], array( default => , type => option, capability => edit_theme_options, transport => postMessage ) );
    12. 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. 13. Lets see some code!
    14. 14. Improvements • Textarea Type • CSS Plugin by Daryl Koop • Clear Color HEX • Refresh Time
    15. 15. References • http://ottopress.com • http://codex.wordpress.org • http://graphpaperpress.com
    16. 16. Thank you Questions?

    ×