Customizer Make it Live 

Dominik Schilling WordPress Core Developer @ocean90 

https://core.trac.wordpress.org/ticket/19910 

The biggest change in 3.4 is the theme customizer which allows you to play around with various looks and settings for your current theme or one you’re thinking about switching to without publishing those changes to the whole world. https://wordpress.org/news/2012/06/green/ 

The biggest change in 3.4 is the theme customizer which allows you to play around with various looks and settings for your current theme or one you’re thinking about switching to without publishing those changes to the whole world. We have more planned for the customizer down the road. https://wordpress.org/news/2012/06/green/ 

Changelog 

WordPress 3.4 WordPress 3.5 WordPress 3.6 WordPress 3.7 WordPress 3.8 Hello World! Admin Menu New Design ☕ ☕ 

WordPress 4.0 WordPress 3.9 WordPress 4.2 WordPress 4.1 WordPress 4.4 WordPress 4.3 Live widget and header previews API: Contexts, panels, and a wider array of controls JS API: Conditionally showing panels and sections Theme Switcher Live preview for nav menus and items, Site Icons Performance Improvements 

WordPress 4.6 WordPress 4.5 WordPress 4.8 WordPress 4.7 Selective Refresh, Device Preview API: Settings Validation, Notifications Changesets, Custom CSS, Page Management Variable Sidebar Width WordPress 4.9 REST API endpoints, Draft Changes (?) WordPress 5.0 tbd; 

No content

No content

The Components 

WP_Customize_Manager 

WP_Customize_Panel 

WP_Customize_Section 

WP_Customize_Setting 

WP_Customize_Control 

wp.customize 

Code? Code! 

add_action( 'customize_register', 'wcbrn_customize_register' ); 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { // Start customizing the customizer. } add_action( 'customize_register', 'wcbrn_customize_register' ); 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; } 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport = 'refresh'; } 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; } 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; } 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; $wp_customize->selective_refresh->add_partial( 'blogname', [ 'selector' => '.site-title a', 'render_callback' => 'wcbrn_customize_partial_blogname', ] ); } function wcbrn_customize_partial_blogname() { bloginfo( 'name' ); } 

Example 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->add_section( 'wcbrn_theme_options', [ 'panel' => '', 'capability' => 'edit_theme_options', 'title' => __( 'Theme Options', 'wcbrn-theme' ), 'description => __( 'Customize your theme.', 'wcbrn-theme' ); 'priority' => 130, ] ); } add_action( 'customize_register', 'wcbrn_customize_register' ); 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->add_setting( 'frontpage_youtube_video_id', [ 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'default' => '', 'sanitize_callback' => 'sanitize_text_field', 'validate_callback' => 'wcbrn_validate_youtube_video_id', 'transport' => 'postMessage', ] ); } add_action( 'customize_register', 'wcbrn_customize_register' ); 

/** * Validates a YouTube video ID. * * @param WP_Error $validity WP_Error instance. * @param mixed $value Value of the setting. * @return WP_Error WP_Error instance. */ function wcbrn_validate_youtube_video_id( WP_Error $validity, $value ) { if ( $value && ! preg_match( '/^[A-Za-z0-9_-]{11}$/', $value ) ) { $validity->add( 'invalid_video_id', __( 'Please enter a valid YouTube ID.', 'wcbrn-theme' ) ); } return $validity; } 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->add_control( 'frontpage_youtube_video_id', [ 'type' => 'text', 'label' => __( 'Frontpage Video', 'wcbrn-theme' ), 'description' => __( 'Enter an ID of a YouTube video which is displayed on the frontpage.', 'wcbrn-theme' ), 'section' => 'wcbrn_theme_options', 'active_callback' => 'is_front_page', ] ); } add_action( 'customize_register', 'wcbrn_customize_register' ); 

function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->selective_refresh->add_partial( 'frontpage_youtube_video_id', [ 'selector' => '.frontpage-video-wrapper', 'container_inclusive' => true, 'render_callback' => 'wcbrn_customize_partial_frontpage_youtube_video', ] ); } add_action( 'customize_register', 'wcbrn_customize_register' ); function wcbrn_customize_partial_frontpage_youtube_video() { get_template_part( 'template-parts/front-page/video' ); } 

'; // Required for the customizer partial. return; } elseif ( ! $youtube_video_id ) { return; } $youtube_url_args = [ 'autoplay' => 0, ]; $youtube_video_url = add_query_arg( $youtube_url_args, "https://www.youtube.com/embed/$youtube_video_id" ); ?> 

Demo 

No content

What about the JavaScript API? 

Controls ( function() { wp.customize.bind( 'ready', function() { wp.customize.section( 'wcbrn_theme_options', function( section ) { section.expanded.bind( function( isExpanding ) { wp.customize.previewer.send( 'action', { expanded: isExpanding }); } ); } ); }); })( jQuery ); add_action( 'customize_controls_enqueue_scripts', 'wcbrn_customize_controls_js' ); 

Preview // script.js (function( $ ) { wp.customize( 'frontpage_youtube_video_id', function( value ) { value.bind( function( to ) { if ( '' === to ) { // Do something. } } ); } ); } )( jQuery ); // Enqueue script.js: add_action( 'customize_preview_init', 'wcbrn_customize_preview_js' ); 

https://make.wordpress.org/core/components/customize/ https://developer.wordpress.org/themes/customize-api/ 

Thanks! Dominik Schilling @ocean90 WordPress Core Developer WordPress Developer @wearerequired