Customizer-ing Theme Options: A Visual Playground

4,506 views

Published on

Presented at WordCamp Vancouver, August 17, 2013.

Published in: Design, Technology, Business
  • Be the first to comment

Customizer-ing Theme Options: A Visual Playground

  1. 1. drewf.us/wcyvr13 Customizer-ing Theme Options: AVisual Playground WordCampVancouver 2013 Saturday, August 17, 13
  2. 2. drewf.us/wcyvr13 About Me Drew Jaynes Web Engineer, 10up Core/Docs Contributor @DrewAPicture Saturday, August 17, 13
  3. 3. drewf.us/wcyvr13 The Customizer? Saturday, August 17, 13
  4. 4. drewf.us/wcyvr13 .org Customizer-ers Customizer Theme Options Saturday, August 17, 13
  5. 5. drewf.us/wcyvr13 Why does it matter? Visual options are visual ... or they should be Saturday, August 17, 13
  6. 6. drewf.us/wcyvr13 Customizer API Sections Settings Controls Saturday, August 17, 13
  7. 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. 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. 9. drewf.us/wcyvr13 add_setting() $wp_customize->add_setting( 'nubrick_site_width', array( 'default' => 860 ) ); Saturday, August 17, 13
  10. 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. 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. 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. 13. drewf.us/wcyvr13 To Refresh or Not to Refresh Settings Transports – refresh (default) – postMessage Saturday, August 17, 13
  14. 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. 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
  16. 16. drewf.us/wcyvr13 Built-in Controls Text Dropdown Pages Images Colors Saturday, August 17, 13
  17. 17. drewf.us/wcyvr13 Custom Controls Saturday, August 17, 13
  18. 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. 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. 20. drewf.us/wcyvr13 Fun with the Customizer Saturday, August 17, 13
  21. 21. drewf.us/wcyvr13 Case Study:Twenty Twelve Child Theme Saturday, August 17, 13
  22. 22. drewf.us/wcyvr13 Thanks. Questions? Drew Jaynes @DrewAPicture 10up.com Saturday, August 17, 13

×