We build easy to manage, secure and Mobile friendly Websites.

WordPress Customizer – Theme Developer Guide


As a WordPress Theme developer, we have access to WordPress core functionalities and we can also build custom controls for anything into WordPress theme options using WordPress Theme Customization API.

WordPress Theme Customizer API is made up of WP_Customizer_Manager, Wp_Customizer_Setting , WP_Customizer_Section and WP_Customizer_Control

WP_Customizer_Manager is the main class that controls the WordPress Theme Customizer API.
$wp_customize is a global object variable through which you can access WP_Customie_Manager class.

There are two hooks required for you to be able to add your own options to WordPress Customizer.
customize_register – This hook will allow you to be able to define new customizer panel, sections, settings, and control.

wp_head – This hook will allow you to output your custom generated css and ensure that your changes show up on live website correcly.

function themename_customize_register( $wp_customize ) {
   //sections, settings, and controls are defined here
}
add_action( 'customize_register', 'themename_customize_register' );

There are four main types of Customizer objects that you will need when adding theme options
Panels – These are containers for sections and it allows multiple sections to be grouped together.
Sections – Defines where options appears in the customizer
Settings – Associate controls with settings that are saved in wordpress database.
Control – It is a Method of configuring a setting.

Add a customized panel to theme options
Parameters
$id – Customize Panel object, or pannel ID. This is requires and must be a string
$args – Array of properties for the new Panel object. Default value is array() and it is optional. Accepted arguments for this array are and its usage below:

$wp_customize->add_panel( 'themeslug_panel_id', 
    array(
'priority'=> 1,  //(int)Display order of pannel and section. Default 160
'capability' => 'edit_theme_options' //(string) required , default edit_theme_option
'title' => __( 'My Theme Options Panel ', 'themename' ), //(string) Title of panel in UI
'description'      => __( 'This is My theme Option Panel', 'themename' ), //(string)  Descriiption to show in UI
'theme_supports' = > '', //(string|string[]) Theme features required to support the panel.
'type' => '',//(string) Type of the panel.
'active_callback' => '' //(callable) Active callback.
) );

To add a customized sections to theme options
Parameters

$id – Customize Section object, or section ID. This is required and must be a string.
$args – Array of properties for the new Section object. This is optional.
Accepted arguments for this array aand its usage below:

$wp_customize->add_section( 'themeslug_section_id', 
array(
'priority' => 5, //(int) the display order of panels and sections. Default 160.
'panel' => '', //(string) The panel this section belongs to.
'capability' => 'edit_theme_options',//(string) Capability required for the section. Default 'edit_theme_options'
'theme_supports' => '',//(string|string[]) Theme features required to support the section.
'title' => 'My New Section',//(string) Title of the section to show in UI.
'description' = 'This is my new section',//(string) Description to show in the UI.
'type' => '', => ' ', //(string) Type of the section.
'active_callback' => ' ',//(callable) Active callback. callback that determines when this section will be visible (active) in the customizer. Its value can be something like is_front_page
'description_hidden' => ' ',//(bool) Hide the description behind a help icon, instead of inline above the first control. Default false.
));

Add Customize setting
Parameters

$id – A unique slug-like ID for the theme setting.This is required and must be a string
$args – (array)An associative array containing arguments for the setting. This is required.
Accepted arguments for this array and its usage below:

$wp_customize->add_setting('themeslug_setting_id, 
array(
'default' => '',//A default value for the setting. it could be string, int hexadecimal
'type' => '', //(Optional) Specifies the TYPE of setting this is. Options are 'option' or 'theme_mod' (defaults to 'theme_mod')
'capability' => 'edit_theme_options', //Optional. You can define a capability a user must have to modify this setting. Default if not specified: edit_theme_options
'theme_supports' => '', //Optional. This can be used to hide a setting if the theme lacks support for a specific feature (using add_theme_support).
'transport' => '', //Optional. This can be either 'refresh' (default) or 'postMessage'. Only set this to 'postMessage' if you are writing custom Javascript to control the Theme Customizer's live preview.
'sanitize_callback' => '', //Optional. A function name to call for sanitizing the input value for this setting. The function should be of the form of a standard filter function, where it accepts the input data and returns the sanitized data.
'sanitize_js_callback' => '', //Optional. A function name to call for sanitizing the value for this setting for the purposes of outputting to javascript code. 
The function should be of the form of a standard filter function, where it accepts the input data and returns the sanitized data. 
This is only necessary if the data to be sent to the customizer window has a special form.);

Add Customized control
Parameters

$id – (String) Customize Control object, or control ID. This is required
$args – (array) (Optional) Array of properties for the new Control object. Accepted arguments for this array and its usage below:

array(
'id' =>'themeslug_control_id', //(string) Control ID.
'settings' => ' ', //(array) All settings tied to the control. If undefined, $id will be used.
'setting' => '',//(string) The primary setting for the control (if there is one). Default 'default'.
'capability' => '',(string) Capability required to use this control. Normally this is empty and the capability is derived from $settings.
'priority' => '15'//(int) Order priority to load the control. Default 10.
'section'=> 'theme_slug_section', //(string) Section the control belongs to.
'label' => 'Themeslug Control Label'//(string) Label for the control.
'description' =>'This is the description for my customized control ',//(string) Description for the control.
'choices' => '',//(array) List of choices for 'radio' or 'select' type controls, where values are the keys, and labels are the values.
'input_attrs'=> '',//(array) List of custom input attributes for control output, where attribute names are the keys and values are the values. Not used for 'checkbox', 'radio', 'select', 'textarea', or 'dropdown-pages' control types.
'allow_addition'=>'',//(bool) Show UI for adding new content, currently only used for the dropdown-pages control. Default false.
'type'=>'',//(string) Control type. Core controls include 'text', 'checkbox', 'textarea', 'radio', 'select', and 'dropdown-pages'. Additional input types such as 'email', 'url', 'number', 'hidden', and 'date' are supported implicitly. Default 'text'.
'active_callback'=>''//(callable) Active callback.
));

In the next tutorial, I will show you how to add the following input types to WordPress Customizer Theme Options

Leave a Reply

Your email address will not be published.