Theme Customizer
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.
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
Definition Section - represent a group of settings
Section
•
Setting - represents a customization option of a Theme.
Section
•
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.
•
Section
Setting Control Control Setting Control Control
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
Panel, Section, Setting and Control Usage
Parameters
Arguments
Panel
Section
Setting
Control
$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);
$id - (string) (required) A
$id - (string) (required) A
$id - (string) (required) A
title (Translation ready)
title (Translation ready)
default
label (Translation ready)
priority
priority
type
section
description (Translation ready)
description (Translation ready)
capability
settings
theme_supports
type
transport
choices
$id - (mixed) (required) A unique slug-like string to use as unique slug-like string to use as unique slug-like ID for the theme string or a specific an id. an id. setting. customization controller object. $args - (array) (required) An $args - (array) (required) An $args - (array) (required) An associative array containing associative array containing associative array containing $args - (array) (required) arguments for the panel. arguments for the control. arguments for the setting. Not used if $id is a control object, otherwise an instance of WP_Customize_Control() (plain text) is created using the specified arguments.
panel
sanitize_callback sanitize_js_callback
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.
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)
Theme customize flow Developer
Create theme customizer
Call value
Theme
Theme customizer
Value
Admin
Setting
Website
Do stuff
Update
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
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-wordpresstheme-customization-api/
•
http://www.smashingmagazine.com/2013/03/05/the-wordpresstheme-customizer-a-developers-guide/
•
http://kirki.org
Thank you