Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Dominik Schilling

September 09, 2017
Tweet

More Decks by Dominik Schilling

Other Decks in Programming

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