customizing the wordpress customizer
TRANSCRIPT
CUSTOMIZING THEWORDPRESS CUSTOMIZERJason Yingling | @jason_yingling | jasonyingling.me
Sliding container of
sections.
Panels
Groups of options.
Controls are added to
sections.
Sections
Where a customizer control stores it’s data.
Ex. The selected hex value of a color picker.
Settings
An HTML form element
displayed in a
customizer section
allowing a setting to be
updated.
Control
Define customize_register action
Adding a Panel
Adding a Section
Adding a Setting
Sanitizing Data
sanitize_text_field()
sanitize_hex_color()
sanitize_hex_color_nohash()
Plenty more:
https://codex.wordpress.org/Data_Validation
Transport: refresh vs postMessage
refresh - causes the page to ajax reload when control
is updated
postMessage - Allows for live updating through JavaScript
when control is updated
Adding a Control
Types of ControlsWP_Customize_Control()
Creates a control that allows users to enter plain text. This is also the parent class for the classes that follow.
WP_Customize_Color_Control()
Creates a control that allows users to select a color from a color wheel.
WP_Customize_Upload_Control()
Creates a control that allows users to upload media.
WP_Customize_Image_Control()
Creates a control that allows users to select or upload an image.
WP_Customize_Background_Image_Control()
Creates a control that allows users to select a new background image.
WP_Customize_Header_Image_Control()
Creates a control that allows users to select a new header image.
Outputting CSS with wp_head
Live Updating Settings
Changing Settings
Moving Controls to Different Sections
Removing Sections
19
- https://codex.wordpress.org/Theme_Cus
tomization_API
- Team Treehouse
- @jason_yingling
Questions &
Resources