Customizer-ing Theme Options: A Visual Playground
1 like4,756 views
The document discusses using the WordPress theme customizer API to create visual theme options. It covers adding sections, settings and controls to build a theme customizer interface. Custom controls can be created as custom PHP classes. Settings can be saved as options or theme modifications and refreshed on the page or via asynchronous postMessage updates. Resources for learning more about the theme customizer are provided.
![drewf.us/wcyvr13
More add_setting()
Settings Types
– ‘option’
– ‘theme_mod’ (default)
echo get_theme_mod( 'my_setting' );
$settings = get_option( ‘my_settings’ );
echo $settings[‘my_setting’];
Saturday, August 17, 13](https://image.slidesharecdn.com/wcyv13slides-130817120225-phpapp02/85/Customizer-ing-Theme-Options-A-Visual-Playground-12-320.jpg)
Customizer-ing Theme Options: A Visual Playground
- 1. drewf.us/wcyvr13 Customizer-ing Theme Options: AVisual Playground WordCampVancouver 2013 Saturday, August 17, 13
- 2. drewf.us/wcyvr13 About Me Drew Jaynes Web Engineer, 10up Core/Docs Contributor @DrewAPicture Saturday, August 17, 13
- 5. drewf.us/wcyvr13 Why does it matter? Visual options are visual ... or they should be Saturday, August 17, 13
- 6. drewf.us/wcyvr13 Customizer API Sections Settings Controls Saturday, August 17, 13
- 7. drewf.us/wcyvr13 customize_register function my_theme_customizer( $wp_customize ) { // do magic } add_action( 'customize_register', 'my_theme_customizer' ); Saturday, August 17, 13
- 8. drewf.us/wcyvr13 add_section() $wp_customize->add_section( 'my_general_settings', array( 'title' => __( 'General Settings', 'textdomain' ), 'priority' => 40 ) ); Saturday, August 17, 13
- 9. drewf.us/wcyvr13 add_setting() $wp_customize->add_setting( 'nubrick_site_width', array( 'default' => 860 ) ); Saturday, August 17, 13
- 10. drewf.us/wcyvr13 add_control() $wp_customize->add_control( 'my_site_width', array( 'label' => __( 'Site Width', 'textdomain' ), 'section' => 'my_site_settings' 'settings' => 'my_site_width' ) ); Saturday, August 17, 13
- 11. drewf.us/wcyvr13 One Setting $wp_customize->add_section( 'my_general_settings', array( 'title' => __( 'General Settings', 'textdomain' ), 'priority' => 40 ) ); $wp_customize->add_setting( 'my_site_width', array( 'default' => 860 ) ); $wp_customize->add_control( 'my_site_width', array( 'label' => __( 'Site Width', 'textdomain' ), 'section' => 'my_general_settings' 'settings' => 'my_site_width' ) ); Saturday, August 17, 13
- 12. drewf.us/wcyvr13 More add_setting() Settings Types – ‘option’ – ‘theme_mod’ (default) echo get_theme_mod( 'my_setting' ); $settings = get_option( ‘my_settings’ ); echo $settings[‘my_setting’]; Saturday, August 17, 13
- 13. drewf.us/wcyvr13 To Refresh or Not to Refresh Settings Transports – refresh (default) – postMessage Saturday, August 17, 13
- 14. drewf.us/wcyvr13 To Refresh or Not to Refresh postMessage Transport – Specified with the ‘transport’ argument in add_setting() $wp_customize->add_setting( 'nubrick_site_width', array( 'default' => 860, 'transport' => ‘postMessage’ ) ); $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; – Change built-in controls’ transports Saturday, August 17, 13
- 15. drewf.us/wcyvr13 To Refresh or Not to Refresh postMessage Transport – Asynchronous updates using JavaScript ( function( $ ) { // Site title and description. wp.customize( 'blogname', function( value ) { value.bind( function( to ) { $( '.site-title a' ).text( to ); } ); } ); } )( jQuery ); – Enqueue scripts on the ‘customize_preview_init’ hook Saturday, August 17, 13
- 18. drewf.us/wcyvr13 Custom Controls function my_theme_customizer( $wp_customize ) { class My_Customize_Control extends WP_Customize_Control { // do magic } $wp_customize->add_control( new My_Customize_Control( $wp_customize, 'my_setting', array( 'label' => __( 'My Setting', 'textdomain' ), 'section' => 'my_section', 'settings' => 'my_setting' ) ) ); } add_action( 'customize_register', 'my_theme_customizer' ); Saturday, August 17, 13
- 19. drewf.us/wcyvr13 Resources Ottopress.com (Otto42) – Customizer API series published last year WordPress Theme Customizer Controls (paulund) – https://github.com/paulund/Wordpress-Theme-Customizer-Custom-Controls WordPress Theme Customizer Boilerplate (slobodan) – https://github.com/slobodan/WordPress-Theme-Customizer-Boilerplate Saturday, August 17, 13
- 20. drewf.us/wcyvr13 Fun with the Customizer Saturday, August 17, 13
- 21. drewf.us/wcyvr13 Case Study:Twenty Twelve Child Theme Saturday, August 17, 13