Customizer – Make it Live

The customizer is all about site management with a powerful live preview, so gone should be the days where clients have to save something without knowing what they actually have changed. In this talk I start with the fundamentals of the customizer and quickly jump into demonstrating how easy it is to add live preview to anything.

Transcript

1. Customizer
   Make it Live
   

   View Slide

2. Dominik Schilling
   WordPress Core Developer
   @ocean90
   

   View Slide

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

   View Slide

4. 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/
   

   View Slide

5. 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/
   

   View Slide

6. Changelog
   

   View Slide

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

   View Slide

8. 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
   

   View Slide

9. 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;
   

   View Slide

10. View Slide

11. View Slide

12. The Components
    

    View Slide

13. WP_Customize_Manager
    

    View Slide

14. WP_Customize_Panel
    

    View Slide

15. WP_Customize_Section
    

    View Slide

16. WP_Customize_Setting
    

    View Slide

17. WP_Customize_Control
    

    View Slide

18. wp.customize
    

    View Slide

19. Code? Code!
    

    View Slide

20. add_action( 'customize_register', 'wcbrn_customize_register' );
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. Example
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. /**
    * Template part: Displays a YouTube video.
    *
    * @package WcbrnTheme
    */
    $youtube_video_id = get_theme_mod( 'frontpage_youtube_video_id', false );
    if ( ! $youtube_video_id && is_customize_preview() ) {
    echo ''; // 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" );
    ?>
    
    
    
    
    
    
    
    

    View Slide

34. Demo
    

    View Slide

35. View Slide

36. What about the JavaScript API?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide