Slide 1

Slide 1 text

Customizer Make it Live

Slide 2

Slide 2 text

Dominik Schilling WordPress Core Developer @ocean90

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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/

Slide 5

Slide 5 text

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/

Slide 6

Slide 6 text

Changelog

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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;

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

The Components

Slide 13

Slide 13 text

WP_Customize_Manager

Slide 14

Slide 14 text

WP_Customize_Panel

Slide 15

Slide 15 text

WP_Customize_Section

Slide 16

Slide 16 text

WP_Customize_Setting

Slide 17

Slide 17 text

WP_Customize_Control

Slide 18

Slide 18 text

wp.customize

Slide 19

Slide 19 text

Code? Code!

Slide 20

Slide 20 text

add_action( 'customize_register', 'wcbrn_customize_register' );

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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' ); }

Slide 27

Slide 27 text

Example

Slide 28

Slide 28 text

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' );

Slide 29

Slide 29 text

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' );

Slide 30

Slide 30 text

/** * 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; }

Slide 31

Slide 31 text

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' );

Slide 32

Slide 32 text

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' ); }

Slide 33

Slide 33 text

'; // 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" ); ?>

Slide 34

Slide 34 text

Demo

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

What about the JavaScript API?

Slide 37

Slide 37 text

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' );

Slide 38

Slide 38 text

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' );

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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