Real-time editing with the Customize API

it at #WCRM-CUSTOMIZEAPI GOT A QUESTION? TWEET IT WITH #WCRM-CUSTOMIZEAPI

it at #WCRM-CUSTOMIZEAPI ONCE UPON A TIME...

it at #WCRM-CUSTOMIZEAPI

it at #WCRM-CUSTOMIZEAPI Disadvantages of theme options pages • Users get confused by different UIs • Settings are not updated in real-time • Some changes need a developer

it at #WCRM-CUSTOMIZEAPI INTRODUCING THE CUSTOMIZER

it at #WCRM-CUSTOMIZEAPI “The Customize API (Customizer) is a framework for live-previewing any change to WordPress. It provides a unified interface for users to customize various aspects of their theme and their site, from colors and layouts to widgets, menus, and more. Themes and plugins alike can add options to the Customizer. The Customizer is the canonical way to add options to your theme.” https://developer.wordpress.org/themes/customize-api/

it at #WCRM-CUSTOMIZEAPI PRO • Live preview for settings changes • Draft, schedule, publish changes • Consistent UI/UX • Hide unnecessary options • Easy to implement

it at #WCRM-CUSTOMIZEAPI “Themes are now required to utilize the Customizer API if the theme has custom theme settings. This means no custom settings screens” Justin Tadlock, theme review team

it at #WCRM-CUSTOMIZEAPI COMPONENTS

it at #WCRM-CUSTOMIZEAPI Panels Sections Controls Settings

it at #WCRM-CUSTOMIZEAPI Bootstraps the Customize experience on the server-side. Sets up the theme-switching process if a theme other than the active one is being previewed and customized. Serves as a factory for Customize Controls and Settings, and instantiates default Customize Controls and Settings. WP_CUSTOMIZE_MANAGER

it at #WCRM-CUSTOMIZEAPI WP_CUSTOMIZE_MANAGER function myprefix_customize_register( WP_Customize_Manager $wp_customize ) { // Do stuff with settings. // Do stuff with controls. $wp_customize->add_setting(); $wp_customize->add_control(); $wp_customize->get_setting(); $wp_customize->get_control(); $wp_customize->remove_setting(); $wp_customize->remove_control(); // Do stuff with sections. // Do stuff with panels. $wp_customize->add_section(); $wp_customize->add_panel(); $wp_customize->get_section(); $wp_customize->get_panel(); $wp_customize->remove_section(); $wp_customize->remove_panel(); } add_action( 'customize_register', 'myprefix_customize_register' );

it at #WCRM-CUSTOMIZEAPI Settings handle live-previewing, saving, and sanitization of your customizer objects. Each setting is managed by a control object. class: WP_CUSTOMIZE_SETTING SETTINGS

it at #WCRM-CUSTOMIZEAPI ADD SETTING

it at #WCRM-CUSTOMIZEAPI widget_* sidebars_widgets[*] nav_menu[*] nav_menu_item[*] KEEP IN MIND

it at #WCRM-CUSTOMIZEAPI SETTING TYPES option • Options API • Use with any themes and plugins • Saved into unique options theme_mod • Theme Modification API • Specific to theme • Saved into single option • Serialized array Custom settings types customize_preview_$setting->type customize_update_$setting->type

it at #WCRM-CUSTOMIZEAPI HOW TO RETRIEVE DATA?

it at #WCRM-CUSTOMIZEAPI Controls are the primary Customizer object for creating UI. Must be associated with a setting. class: WP_CUSTOMIZE_CONTROL CONTROLS

it at #WCRM-CUSTOMIZEAPI ADD CONTROL

it at #WCRM-CUSTOMIZEAPI url datetime week tel checkbox text email textarea hidden search radio TYPES number time select range date * use the "allow_addition" argument to allow users to add new pages from the control dropdown-pages*

it at #WCRM-CUSTOMIZEAPI WP_Customize_Background_Image_Control WP_Customize_Color_Control WP_Customize_Cropped_Image_Control WP_Customize_Date_Time_Control WP_Customize_Image_Control WP_Customize_Media_Control There are more... https://goo.gl/SBbTu3 CORE CUSTOM CONTROLS

it at #WCRM-CUSTOMIZEAPI ADD CUSTOM CONTROL

it at #WCRM-CUSTOMIZEAPI UI containers for controls class: WP_CUSTOMIZE_SECTION SECTIONS

it at #WCRM-CUSTOMIZEAPI ADD SECTION

it at #WCRM-CUSTOMIZEAPI PANELS UI containers for multiple sections or different functionality class: WP_CUSTOMIZE_PANEL

it at #WCRM-CUSTOMIZEAPI ADD PANEL

it at #WCRM-CUSTOMIZEAPI TRANSPORT METHODS

it at #WCRM-CUSTOMIZEAPI REFRESH

it at #WCRM-CUSTOMIZEAPI postMessage

it at #WCRM-CUSTOMIZEAPI PHP

it at #WCRM-CUSTOMIZEAPI JS

it at #WCRM-CUSTOMIZEAPI PHP

it at #WCRM-CUSTOMIZEAPI SELECTIVE REFRESH

it at #WCRM-CUSTOMIZEAPI Advantages • Cleaner code base • Accurate preview update • Association between parts of the preview and associated settings and controls

it at #WCRM-CUSTOMIZEAPI REGISTERING PARTIALS

it at #WCRM-CUSTOMIZEAPI WIDGETS

it at #WCRM-CUSTOMIZEAPI CUSTOM WIDGETS?

it at #WCRM-CUSTOMIZEAPI CONTEXTUAL CONTROLS, SECTIONS, AND PANELS

it at #WCRM-CUSTOMIZEAPI Tip

it at #WCRM-CUSTOMIZEAPI VALIDATION

it at #WCRM-CUSTOMIZEAPI VALIDATION • Settings validated before saving. • If invalid, save request rejected. • User has clear understanding of what is wrong.

it at #WCRM-CUSTOMIZEAPI The customizer also has a robust JavaScript API https://developer.wordpress.org/themes/customize-api/the-customizer-javascript-api/ https://github.com/WordPress/WordPress/tree/4.6.1/wp-admin/js/ https://wordpress.tv/2017/12/10/weston-ruter-building-with-javascript-in-the-customizer/ JavaScript API

it at #WCRM-CUSTOMIZEAPI CUSTOMIZER

it at #WCRM-CUSTOMIZEAPI Resources Theme Handbook - The Customize API XWP Customizer blog archive XWP GitHub Make WordPress - Dev notes Make WordPress - Customize Component Kirki - Framework for Customizer Customize Posts Customizer Browser History Collection of custom controls by Anthony Hortin WordPresent by Csaba Varszegi Rich Tabor blog archive

it at #WCRM-CUSTOMIZEAPI Settings API vs Customize API

it at #WCRM-CUSTOMIZEAPI USE BOTH! If it does not affect the frontend go with Settings API. Otherwise, always use the customizer!

it at #WCRM-CUSTOMIZEAPI Luca Ricci | @theskinnyghost | @pragmaticweb

Real-time editing with the Customize API

Real-time editing with the Customize API

More Decks by Luca Ricci

Other Decks in Technology

Featured

Transcript