customizing the wordpress customizer

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

- jason.yingling@red8interactive.com

Questions &

Resources