the customizer
DESCRIPTION
TRANSCRIPT
![Page 1: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/1.jpg)
The CustomizerKonstantin Obenland
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 2: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/2.jpg)
Konstantin ObenlandTheme Wrangler at Automattic
@obenland
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 3: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/3.jpg)
What’s The Customizer?
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 4: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/4.jpg)
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 5: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/5.jpg)
Customizer Anatomy
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 6: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/6.jpg)
Customizer Anatomy
Section Title
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 7: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/7.jpg)
Customizer Anatomy
Section Description
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 8: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/8.jpg)
Customizer Anatomy
Control
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 9: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/9.jpg)
Relationships within the Customizer
Control
Control
Control
Control
Section
Setting
Setting
Setting
Setting
Database Section
Section
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 10: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/10.jpg)
Theme Mods & OptionsDigression
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 11: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/11.jpg)
Options
“The Options API is a simple and standardized way of storing data in the database.” — WordPress Codex
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 12: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/12.jpg)
Theme Modifications
• Options API for themes.
• Introduced in 2.1 (!)
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 13: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/13.jpg)
Theme Mods API
set_theme_mod( $name, $value );get_theme_mod( $name, $default = false );remove_theme_mod( $name );
get_theme_mods();remove_theme_mods();
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 14: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/14.jpg)
Theme Mods API
// Function simplified for brevity and clarity.function get_theme_mod( $name, $default = false ) { $mods = get_option( 'theme_mods_' . get_option( 'stylesheet' ) );
if ( isset( $mods[ $name ] ) ) return $mods[ $name ];
return $default;}
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 15: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/15.jpg)
The Customizer API
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 16: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/16.jpg)
Get Started
/** * Registers the theme setting controls with the Customizer. * * @param WP_Customize_Manager $wp_customize */function prefix_customize_register( $wp_customize ) {
// Code
}add_action( 'customize_register', 'prefix_customize_register' );
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 17: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/17.jpg)
Adding a Section
$wp_customize->add_section( 'unique_section_id', array( 'title' => __( 'Title', 'textdomain' ), 'priority' => 10, 'description' => __( 'Description', 'textdomain' ), 'theme_supports' => '', 'capability' => 'edit_theme_options',) );
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 18: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/18.jpg)
Adding a Setting
$wp_customize->add_setting( 'settings_name', array( 'type' => 'theme_mod', // 'option' 'capability' => 'edit_theme_options', 'theme_supports' => '', 'default' => '', 'transport' => 'refresh', // 'postMessage' 'sanitize_callback' => '', 'sanitize_js_callback' => '',) );
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 19: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/19.jpg)
Adding a Control
$wp_customize->add_control( 'unique_control_id', array( 'label' => __( 'Label', 'textdomain' ), 'section' => 'unique_section_id', 'priority' => 10, 'settings' => 'unique_settings_id', 'type' => 'radio', // 'text','checkbox','select','dropdown-pages' 'choices' => array( 'value' => __( 'Choice', 'textdomain' ), ),) );
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 20: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/20.jpg)
Customizer Anatomy
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 21: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/21.jpg)
$this->add_section( 'title_tagline', array( 'title' => __( 'Site Title & Tagline' ), 'priority' => 20,) );
$this->add_setting( 'blogname', array( 'default' => get_option( 'blogname' ), 'type' => 'option', 'capability' => 'manage_options',) );
$this->add_control( , array( 'label' => __( 'Site Title' ), 'section' => ,) );
A Complete Setting'title_tagline'
'blogname'
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 22: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/22.jpg)
$this->add_section( 'title_tagline', array( 'title' => __( 'Site Title & Tagline' ), 'priority' => 20,) );
$this->add_setting( 'blogname', array( 'default' => get_option( 'blogname' ), 'type' => 'option', 'capability' => 'manage_options',) );
$this->add_control( , array( 'label' => __( 'Site Title' ), 'section' => ,) );
A Complete Setting
'title_tagline'
'blogname'
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 23: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/23.jpg)
$this->add_section( 'title_tagline', array( 'title' => __( 'Site Title & Tagline' ), 'priority' => 20,) );
$this->add_setting( 'blogname', array( 'default' => get_option( 'blogname' ), 'type' => 'option', 'capability' => 'manage_options',) );
$this->add_control( , array( 'label' => __( 'Site Title' ), 'section' => ,) );
A Complete Setting
'title_tagline'
'blogname'
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 24: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/24.jpg)
Validation & Sanitization
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 25: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/25.jpg)
function prefix_customize_register( $wp_customize ) { $wp_customize->add_setting( 'prefix_layout', array( 'default' => 'content-sidebar', 'sanitize_callback' => 'prefix_sanitize_layout', // 'is_email', 'esc_url_raw' ) );
$wp_customize->add_control( 'prefix_layout', $args );}add_action( 'customize_register', 'prefix_customize_register' );
function prefix_sanitize_layout( $value ) { if ( ! in_array( $value, array( 'content-sidebar', 'sidebar-content' ) ) ) $value = 'content-sidebar';
return $value;}
Validation & Sanitization The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 26: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/26.jpg)
function prefix_customize_register( $wp_customize ) { $wp_customize->add_setting( 'prefix_theme_options[layout]', array( 'default' => 'content-sidebar', 'type' => 'option', ) );
$wp_customize->add_control( 'prefix_theme_options[layout]', $args );}add_action( 'customize_register', 'prefix_customize_register' );
function prefix_sanitize_customizer( $option ) { if ( ! isset( $option['prefix_layout'] ) || ! in_array( $option['prefix_layout'], array( 'content-sidebar', 'sidebar-content' ) ) ) $option['prefix_layout'] = 'content-sidebar'; return $option;}register_setting( 'prefix_theme_options', 'prefix_theme_options', 'prefix_sanitize_customizer' );
Validation & Sanitization The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 27: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/27.jpg)
Transport Methods
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 28: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/28.jpg)
$wp_customize->add_setting( 'unique_settings_id', array( 'default' => '', 'transport' => 'postMessage', // 'refresh') );
Transport Methods The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 29: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/29.jpg)
Saturday, September 21, 13
![Page 30: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/30.jpg)
/** * Add postMessage support for site title and description for the Customizer. * * @since Twenty Thirteen 1.0 * * @param WP_Customize_Manager $wp_customize Customizer object. * @return void */function twentythirteen_customize_register( $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';}add_action( 'customize_register', 'twentythirteen_customize_register' );
In Twenty Thirteen The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 31: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/31.jpg)
/** * Binds JavaScript handlers to make Customizer preview reload changes * asynchronously. * * @since Twenty Thirteen 1.0 */function twentythirteen_customize_preview_js() { wp_enqueue_script( 'twentythirteen-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20130226', true );}add_action( 'customize_preview_init', 'twentythirteen_customize_preview_js' );
In Twenty Thirteen The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 32: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/32.jpg)
/** * Theme Customizer enhancements for a better user experience. * Contains handlers to make Theme Customizer preview reload changes asynchronously. */( function( $ ) { // Site title and description. wp.customize( 'blogname', function( value ) { value.bind( function( to ) { $( '.site-title' ).text( to ); } ); } ); wp.customize( 'blogdescription', function( value ) { value.bind( function( to ) { $( '.site-description' ).text( to ); } ); } );} )( jQuery );
In Twenty Thirteen The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 33: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/33.jpg)
wp.customize( 'header_textcolor', function( value ) { value.bind( function( to ) { if ( 'blank' == to ) { if ( 'remove-header' == _wpCustomizeSettings.values.header_image ) $( '.home-link' ).css( 'min-height', '0' ); $( '.site-title, .site-description' ).css( { 'clip': 'rect(1px, 1px, 1px, 1px)', 'position': 'absolute' } ); } else { $( '.home-link' ).css( 'min-height', '230px' ); $( '.site-title, .site-description' ).css( { 'clip': 'auto', 'color': to, 'position': 'relative' } ); } } );} );
In Twenty Thirteen The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 34: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/34.jpg)
Custom Controls
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 35: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/35.jpg)
Built-in Controls The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 36: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/36.jpg)
class Prefix_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea';
public function render_content() { ?> <label> <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span> <textarea rows="5" <?php $this->link(); ?>> <?php echo esc_textarea( $this->value() ); ?> </textarea> </label> <?php }}
Custom Controls The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 37: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/37.jpg)
Built-in Custom Controls
WP_Customize_Color_Control
WP_Customize_Upload_Control
WP_Customize_Image_Control
WP_Customize_Background_Image_Control
WP_Customize_Header_Image_Control
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 38: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/38.jpg)
WP_Customize_Image_Control
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 39: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/39.jpg)
WP_Customize_Color_Control
The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 40: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/40.jpg)
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'accent_color', array( 'label' => __( 'Accent Color', 'twentyfourteen' ), 'section' => 'colors', 'settings' => 'accent_color',) ) );
Custom Controls The Customizer Konstantin Obenland
Saturday, September 21, 13
![Page 41: The Customizer](https://reader034.vdocuments.mx/reader034/viewer/2022042521/54c7ccd64a795908508b4587/html5/thumbnails/41.jpg)
Thanks!Questions?
The Customizer Konstantin Obenland
Saturday, September 21, 13