0
drewf.us/wcyvr13
Customizer-ing Theme Options:
AVisual Playground
WordCampVancouver 2013
Saturday, August 17, 13
drewf.us/wcyvr13
About Me
Drew Jaynes
Web Engineer, 10up
Core/Docs Contributor
@DrewAPicture
Saturday, August 17, 13
drewf.us/wcyvr13
The Customizer?
Saturday, August 17, 13
drewf.us/wcyvr13
.org Customizer-ers
Customizer
Theme Options
Saturday, August 17, 13
drewf.us/wcyvr13
Why does it matter?
Visual options are visual ... or they should be
Saturday, August 17, 13
drewf.us/wcyvr13
Customizer API
Sections Settings Controls
Saturday, August 17, 13
drewf.us/wcyvr13
customize_register
function my_theme_customizer( $wp_customize ) {
// do magic
}
add_action( 'customize_r...
drewf.us/wcyvr13
add_section()
$wp_customize->add_section( 'my_general_settings', array(
'title' => __( 'General Settings'...
drewf.us/wcyvr13
add_setting()
$wp_customize->add_setting( 'nubrick_site_width', array(
'default' => 860
) );
Saturday, Au...
drewf.us/wcyvr13
add_control()
$wp_customize->add_control( 'my_site_width', array(
'label' => __( 'Site Width', 'textdomai...
drewf.us/wcyvr13
One Setting
$wp_customize->add_section( 'my_general_settings', array(
'title' => __( 'General Settings', ...
drewf.us/wcyvr13
More add_setting()
Settings Types
– ‘option’
– ‘theme_mod’ (default)
echo get_theme_mod( 'my_setting' );
...
drewf.us/wcyvr13
To Refresh or Not to Refresh
Settings Transports
– refresh (default)
– postMessage
Saturday, August 17, 13
drewf.us/wcyvr13
To Refresh or Not to Refresh
postMessage Transport
– Specified with the ‘transport’ argument in add_settin...
drewf.us/wcyvr13
To Refresh or Not to Refresh
postMessage Transport
– Asynchronous updates using JavaScript
( function( $ ...
drewf.us/wcyvr13
Built-in Controls
Text
Dropdown Pages
Images
Colors
Saturday, August 17, 13
drewf.us/wcyvr13
Custom Controls
Saturday, August 17, 13
drewf.us/wcyvr13
Custom Controls
function my_theme_customizer( $wp_customize ) {
class My_Customize_Control extends WP_Cus...
drewf.us/wcyvr13
Resources
Ottopress.com (Otto42)
– Customizer API series published last year
WordPress Theme Customizer C...
drewf.us/wcyvr13
Fun with the Customizer
Saturday, August 17, 13
drewf.us/wcyvr13
Case Study:Twenty Twelve Child Theme
Saturday, August 17, 13
drewf.us/wcyvr13
Thanks. Questions?
Drew Jaynes
@DrewAPicture
10up.com
Saturday, August 17, 13
Upcoming SlideShare
Loading in...5
×

Customizer-ing Theme Options: A Visual Playground

3,833

Published on

Presented at WordCamp Vancouver, August 17, 2013.

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,833
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×