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

Real-time editing with the Customize API

Luca Ricci
September 15, 2018

Real-time editing with the Customize API

The Customizer was introduced with WordPress 3.4, nonetheless it is a very underestimated feature.
In this talk we will discover what it is and which tools we have at our disposal and how to extend its functionalities with Customize API.
At the end of the speech you will have all the information needed to start integrating it in your themes and plugins.

Luca Ricci

September 15, 2018
Tweet

More Decks by Luca Ricci

Other Decks in Technology

Transcript

  1. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI Real-time editing with the Customize API Luca Ricci | Full stack developer | @theskinnyghost | @pragmaticweb | WordCamp Rome 2018 | #WCRM
  2. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI GOT A QUESTION? TWEET IT WITH #WCRM-CUSTOMIZEAPI
  3. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI ONCE UPON A TIME...
  4. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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
  5. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI INTRODUCING THE CUSTOMIZER
  6. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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/
  7. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI PRO • Live preview for settings changes • Draft, schedule, publish changes • Consistent UI/UX • Hide unnecessary options • Easy to implement
  8. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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
  9. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI Panels Sections Controls Settings
  10. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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
  11. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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' );
  12. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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
  13. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI widget_* sidebars_widgets[*] nav_menu[*] nav_menu_item[*] KEEP IN MIND
  14. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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
  15. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI HOW TO RETRIEVE DATA?
  16. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI Controls are the primary Customizer object for creating UI. Must be associated with a setting. class: WP_CUSTOMIZE_CONTROL CONTROLS
  17. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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*
  18. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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
  19. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI ADD CUSTOM CONTROL
  20. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI UI containers for controls class: WP_CUSTOMIZE_SECTION SECTIONS
  21. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI PANELS UI containers for multiple sections or different functionality class: WP_CUSTOMIZE_PANEL
  22. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI Advantages • Cleaner code base • Accurate preview update • Association between parts of the preview and associated settings and controls
  23. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI REGISTERING PARTIALS
  24. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI CONTEXTUAL CONTROLS, SECTIONS, AND PANELS
  25. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI VALIDATION • Settings validated before saving. • If invalid, save request rejected. • User has clear understanding of what is wrong.
  26. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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
  27. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    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
  28. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI Settings API vs Customize API
  29. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

    it at #WCRM-CUSTOMIZEAPI USE BOTH! If it does not affect the frontend go with Settings API. Otherwise, always use the customizer!
  30. Luca Ricci - @theskinnyghost - @pragmaticweb #WCRM - Questions? Tweet

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