Download to read offline
Uploaded byJason Yingling
Customizing the WordPress Customizer
The document discusses customizing the WordPress Customizer, detailing components such as sections, panels, and controls for user settings. It explains various control types and their functionalities, including live updates through JavaScript and different methods for sanitizing data. Additionally, it provides links to further resources for theme customization.
More Related Content
Similar to Customizing the WordPress Customizer
Customizing the WordPress Customizer
- 1. CUSTOMIZING THE WORDPRESS CUSTOMIZER JasonYingling | @jason_yingling | jasonyingling.me
- 2.
- 3. Groups of options. Controlsare added to sections. Sections
- 4. Where a customizercontrol stores it’s data. Ex. The selected hex value of a color picker. Settings
- 5. An HTML formelement displayed in a customizer section allowing a setting to be updated. Control
- 6.
- 7.
- 8.
- 9.
- 10.
- 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.
- 13. Types of ControlsWP_Customize_Control() Createsa 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 withwp_head
- 15.
- 16.
- 17. Moving Controls toDifferent Sections
- 18.
- 19. 19 - https://codex.wordpress.org/Theme_Cus tomization_API - TeamTreehouse - @jason_yingling - jason.yingling@red8interactive.com Questions & Resources
Editor's Notes
- #8 Priority controls the placement of the panel among other panels theme_colors is the slug and will be used to add sections to this panel Title sets the title of the panel Description sets the description
- #9 panel let’s you add section to an existing panel
- #10 Slug will be used when we add a control Default allows setting the default setting option sanitize callback allows you to sanitize data entered by a control. required if you want to submit to .org. Good idea regardless. transport can be postMessage or refresh. Default is refresh and causes the page to reload when the option is changed. postMessage allows for updating with JS.
- #14 WP Customize Control can be used to make any types of form inputs. Selects, text fields, checkboxes, ranges, etc.
- #15 Could also use the custom_header function as done in _s You can also use get_theme_mod in theme files
- #19 Don’t remove core features if you plan to submit the theme to WordPress.org