Theme Customizer!

Presented at WordPress Bangkok Meetup

MAY 26, 2015

Transcript

1. Theme Customizer
2. WordPress Theme Customization API The Theme Customization API allows developers to build controls and settings options in the Customize section found in the Appearance menu in the WordPress Dashboard.
3. Built-in Every WordPress Theme which is installed in WordPress 3.4 and above is provided with some default settings and controls on the Theme Customizer Page. You don't need to declare them with add_section(). ▪ title_tagline - Site Title & Tagline ▪ colors - Colors ▪ header_image - Header Image ▪ background_image - Background Image ▪ nav - Navigation ▪ static_front_page - Static Front Page
4. • Section - represent a group of settings • Setting - represents a customization option of a Theme. • Control - is a HTML form element on the Theme Customizer page and it allows admins to change a setting on real time preview. Controls are linked to a single setting, and a single section. Control Control Control Control Section Section Section Definition Setting Setting
5. Latest update Panels - they were added in WordPress 4.0. Group the various sections up into Panels. Section Panels • Panels group Sections together • Sections contain Controls • Controls are what the user changes • Settings define what the Controls change
6. Panel, Section, Setting and Control Panel Section Setting Control Usage $wp_customize. >add_panel($id,6$args); $wp_customize. >add_section($id,6$args); $wp_customize. >add_setting($id,6$args); $wp_customize. >add_control($id,6$args); Parameters $id - (string) (required) A unique slug-like string to use as an id. $args - (array) (required) An associative array containing arguments for the panel. $id - (string) (required) A unique slug-like string to use as an id. $args - (array) (required) An associative array containing arguments for the control. $id - (string) (required) A unique slug-like ID for the theme setting. $args - (array) (required) An associative array containing arguments for the setting. $id - (mixed) (required) A string or a specific customization controller object. $args - (array) (required) Not used if $id is a control object, otherwise an instance of WP_Customize_Control() (plain text) is created using the specified arguments. Arguments title (Translation ready) priority description (Translation ready) title (Translation ready) priority description (Translation ready) panel default type capability theme_supports transport sanitize_callback sanitize_js_callback label (Translation ready) section settings type choices
7. WP Customize class WP_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.
8. WP Customize control Input Types With this class you can create the following input types: ▪ text (default) ▪ checkbox ▪ radio (requires choices array in $args) ▪ select (requires choices array in $args) ▪ dropdown-pages ▪ textarea (since WordPress 4.0)
9. Theme customize flow Developer Admin Create theme customizer Setting Theme customizer Value Theme Call value Do stuff Website Update
10. Note If you would like to upload your theme on WordPress.org, here are somethings that you must follow to meet their requirements. • Sanitize URL • Translation ready
11. Reference • https://codex.wordpress.org/Theme_Customization_API • https://developer.wordpress.org/themes/advanced-topics/ customizer-api/ • http://ottopress.com/tag/customizer/ • http://www.sitepoint.com/getting-started-with-the-wordpress- theme-customization-api/ • http://www.smashingmagazine.com/2013/03/05/the-wordpress- theme-customizer-a-developers-guide/ • http://kirki.org
12. Thank you