WordPress 3.4 Theme Customizer
0 likes807 views
This document summarizes a WordPress meetup about the WordPress Theme Customizer. It includes: - An introduction to the WordPress Theme Customizer by Chandra Maharzan and a demo by Daryl Koopersmith, a WordPress core developer. - How to add support for the customizer, create sections and settings, and live preview changes using JavaScript. - Examples of customizer controls like uploading images and color pickers. - Suggested improvements to the customizer like textarea controls and refreshing previews. The meetup provided an overview of the Theme Customizer in WordPress 3.4 and how to integrate it into themes through code examples and a
![The LIVE FUN!
• 'transport' => 'postMessage'
• $wp_customize->add_setting( 'cleanr_options[color]', array(
'default' => '',
'type' => 'option',
'capability' => 'edit_theme_options',
'transport' => 'postMessage'
) );](https://image.slidesharecdn.com/presentation12-120722090315-phpapp02/85/WordPress-3-4-Theme-Customizer-11-320.jpg)
WordPress 3.4 Theme Customizer
- 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?
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n