Customizing the WordPress Customizer
Download as PPTX, PDF
0 likes202 views
A guide on developing your theme to use the WordPress Customizer. Files on Github: https://github.com/yingles/the-authority
Customizing the WordPress Customizer
- 1. CUSTOMIZING THE WORDPRESS CUSTOMIZER Jason Yingling | @jason_yingling | jasonyingling.me
- 3. Groups of options. Controls are added to sections. Sections
- 4. Where a customizer control stores its 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
- 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
- 17. Moving Controls to Different Sections
- 19. 19 - https://codex.wordpress.org/Theme_Cus tomization_API - Team Treehouse - @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 lets 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: Dont remove core features if you plan to submit the theme to WordPress.org