Customizer-ing Theme Options: A Visual Playground
Upcoming SlideShare
Loading in...5
×
 

Customizer-ing Theme Options: A Visual Playground

on

  • 3,828 views

Presented at WordCamp Vancouver, August 17, 2013.

Presented at WordCamp Vancouver, August 17, 2013.

Statistics

Views

Total Views
3,828
Views on SlideShare
1,146
Embed Views
2,682

Actions

Likes
1
Downloads
3
Comments
0

6 Embeds 2,682

http://werdswords.com 2418
https://twitter.com 248
http://eventifier.com 8
http://eventifier.co 6
http://cloud.feedly.com 1
http://www.newsblur.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Customizer-ing Theme Options: A Visual Playground Customizer-ing Theme Options: A Visual Playground Presentation Transcript

  • 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_register', 'my_theme_customizer' ); Saturday, August 17, 13
  • drewf.us/wcyvr13 add_section() $wp_customize->add_section( 'my_general_settings', array( 'title' => __( 'General Settings', 'textdomain' ), 'priority' => 40 ) ); Saturday, August 17, 13
  • drewf.us/wcyvr13 add_setting() $wp_customize->add_setting( 'nubrick_site_width', array( 'default' => 860 ) ); Saturday, August 17, 13
  • 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
  • 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
  • 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
  • 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_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
  • 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
  • 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_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
  • 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
  • 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