A guide on developing your theme to use the WordPress Customizer. Files on Github: https://github.com/yingles/the-authority

1. CUSTOMIZING THE
WORDPRESS CUSTOMIZER
Jason Yingling | @jason_yingling | jasonyingling.me

2. Sliding container of
sections.
Panels

3. Groups of options.
Controls are added to
sections.
Sections

4. Where a customizer control stores it’s data.
Ex. The selected hex value of a color picker.
Settings

5. An HTML form element
displayed in a
customizer section
allowing a setting to be
updated.
Control

6. Define customize_register action

7. Adding a Panel

8. Adding a Section

9. Adding a Setting

10. Sanitizing Data
sanitize_text_field()
sanitize_hex_color()
sanitize_hex_color_nohash()
Plenty more:
https://codex.wordpress.org/Data_Validation

11. 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

12. Adding a Control

13. 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.

14. Outputting CSS with wp_head

15. Live Updating Settings

16. Changing Settings

17. Moving Controls to Different
Sections

18. Removing Sections

19. 19
- https://codex.wordpress.org/Theme_Cus
tomization_API
- Team Treehouse
- @jason_yingling
- jason.yingling@red8interactive.com
Questions &
Resources