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