Customizing the WordPress Customizer
-
Upload
jason-yingling -
Category
Internet
-
view
83 -
download
0
Transcript of Customizing the WordPress Customizer
![Page 1: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/1.jpg)
CUSTOMIZING THEWORDPRESS CUSTOMIZERJason Yingling | @jason_yingling | jasonyingling.me
![Page 2: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/2.jpg)
Sliding container of
sections.
Panels
![Page 3: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/3.jpg)
Groups of options.
Controls are added to
sections.
Sections
![Page 4: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/4.jpg)
Where a customizer control stores it’s data.
Ex. The selected hex value of a color picker.
Settings
![Page 5: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/5.jpg)
An HTML form element
displayed in a
customizer section
allowing a setting to be
updated.
Control
![Page 6: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/6.jpg)
Define customize_register action
![Page 7: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/7.jpg)
Adding a Panel
![Page 8: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/8.jpg)
Adding a Section
![Page 9: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/9.jpg)
Adding a Setting
![Page 10: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/10.jpg)
Sanitizing Data
sanitize_text_field()
sanitize_hex_color()
sanitize_hex_color_nohash()
Plenty more:
https://codex.wordpress.org/Data_Validation
![Page 11: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/11.jpg)
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
![Page 12: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/12.jpg)
Adding a Control
![Page 13: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/13.jpg)
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.
![Page 14: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/14.jpg)
Outputting CSS with wp_head
![Page 15: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/15.jpg)
Live Updating Settings
![Page 16: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/16.jpg)
Changing Settings
![Page 17: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/17.jpg)
Moving Controls to Different Sections
![Page 18: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/18.jpg)
Removing Sections
![Page 19: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/19.jpg)
19
- https://codex.wordpress.org/Theme_Cus
tomization_API
- Team Treehouse
- @jason_yingling
Questions &
Resources
![Page 20: Customizing the WordPress Customizer](https://reader034.fdocuments.us/reader034/viewer/2022051503/5a64dd717f8b9a05418b4bfb/html5/thumbnails/20.jpg)