Customizer – Make it Live

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.

B36a3a08aab5941a1c6c144be272e413?s=128

Dominik Schilling

September 09, 2017
Tweet

Transcript

  1. Customizer Make it Live

  2. Dominik Schilling WordPress Core Developer @ocean90

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

  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/
  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/
  6. Changelog

  7. WordPress 3.4 WordPress 3.5 WordPress 3.6 WordPress 3.7 WordPress 3.8

    Hello World! Admin Menu New Design ☕ ☕
  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
  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;
  10. None
  11. None
  12. The Components

  13. WP_Customize_Manager

  14. WP_Customize_Panel

  15. WP_Customize_Section

  16. WP_Customize_Setting

  17. WP_Customize_Control

  18. wp.customize

  19. Code? Code!

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

  21. function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { // Start customizing the

    customizer. } add_action( 'customize_register', 'wcbrn_customize_register' );
  22. function wcbrn_customize_register( WP_Customize_Manager $wp_customize ) { $wp_customize->get_setting( 'blogname' )->transport =

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

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

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

    'postMessage'; }
  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' ); }
  27. Example

  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' );
  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' );
  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; }
  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' );
  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' ); }
  33. <?php /** * 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 '<div class="frontpage-video-wrapper no-video"></div>'; // 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" ); ?> <div class="frontpage-video-wrapper"> <div class="wrap"> <div class="iframe-wrapper"> <iframe src="<?php echo esc_url( $youtube_video_url ); ?>"></iframe> </div> </div> </div>
  34. Demo

  35. None
  36. What about the JavaScript API?

  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' );
  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' );
  39. https://make.wordpress.org/core/components/customize/ https://developer.wordpress.org/themes/customize-api/

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