The WordPress theme customization API is a framework that has existed since the release of the 3.4 version of WordPress. It has been actively developed since then. Users are allowed to simulate a “customizer page” to their themes. This offers better real-time experience via customization of the theme.
More can be done apart from casting the change from the control and preview window.The framework aids in building control and setting options in the customization section. This section; or sections; is present in the Appearance menu in the WordPress dashboard.
Before the API was made available, developers would provide the users with a theme page option to make changes to their theme. This was not user-friendly since the page needed to be refreshed every time an alteration was made to see its effect.
Default Controls
All the themes available for the users in WordPress 3.4 are equipped with default settings and controls on the theme customizer page. This includes the site title, background colour, tagline, background image, widgets, and static front page. There is no requirement for additional code input to support them.
The Settings, Controls, and Sections
A setting is a customization option available in a theme. Sections refer to groups of such settings. When new controls and settings are made, they must be inputted in a particular section. New ones can be added to the default sections present too.
The HTML form element on the theme customizer page is called control. It permits the user to make changes to the settings on a real-time preview. They can be linked to a single setting and an available setting section.
Creating New Ones with Codes
Here, an example where ads need to be placed on the theme is used. Here is how the user can start out creating new settings, controls, and sections:
1. Sections
To make a new section, the “$customizer_object->add_section” method needs to be implemented. Here, “priority” defines the position of the section. The code to create a section named “ads” would be:
“function sitepoint-customize_register($wp_customize
{
$wp_customize->add_section(“ads”, array(
“title” => _(“Advertising”, “customizer_ads_sections”),
“priority” => 30,
));
}
Add-action(“customize_register”, “sitepoint_customize_register”);
2. Settings
The “$customizer_object->add_settings” method needs to be used again. In the code given, the “transport” argument supports values like “refresh” and “postMessage”.The first one shows that the changes would set in when the theme customizer page is saved after clicking the Save and Publish option, following which Refresh would be selected.
The second one lets the user know that the alterations would take place on a real-time basis. For this to happen, some JavaScript coding needs to be typed out. However, the visitors to the site will not see the changes unless the user clicks on the Save and Publish button.
Following the example, the coding needed for making a setting called “ads_code” would be:
“function sitepoint-customize_register($wp_customize)
{
$wp_customize->add_setting(“ads_code”, array(
“default” => “”,
“transport” => “postMessage”,
));
}
add-action(“customize_register”, “sitepoint_customize_register”);
3. Control
New controls are created utilizing the “$customizer_object ->add_control($controller_object)” method. Numerous controller objects are offered to users by the WordPress theme customization. Thus, it depends on what kind of control is required for the theme.
In this case, the “WP_Customize_Control’ is utilized. For example, the coding for displaying a control to display a text area is being done here to take the advertising code as the input:
“function sitepoint-customize_register($wp_customize)
{
$wp_customize->add_setting(new WP_Customize_Control(
$wp_customize,
“ads_code”,
array(
“label” => _(“Enter Ads Code”, “customizer_ads_code_label”),
“section” => “ads”,
“settings” => “ads_code”,
“type” => “textarea”,
)
));
}
add-action(“customize_register”, “sitepoint_customize_register”);
4. Output Values of Settings
In the “transport” argument of the “adds_settings” function, the way of placing put the setting’s value is defined. If the argument value is “refresh”, then the following coding should be done to echo the “ads_code” setting value in the theme used.
?>
<div id+”ads_bpx”>
<?php
echo get_theme_mod(“ads_code”);
?>
</div>
<?php
The user will need to use this coding if they have selected the “postMessage” option in the argument. For a live preview, some JavaScript has to be written down so that a new value is received when the user changes the value. In the theme’s directory, a JavaScript file should be created. The example used a “theme-customier.js” one:
(function($){
wp.customize(“ads_code”, function(value) {
value.bind(function(newval) { ]$(“#ads_code’).html(newval);
} );
});
})(jQuery);
Site visitors should not see the changes on the site while they are being laid down. Hence, the script mentioned below should enqueue the one written before:
function sitepoint_customizer_live_preview()
{
wp_enqueue_script(“asitepoint-themecustomizer”, get_template_directory_uri(). “/tehem-customizer.js”., array(jquery”, “customize-preview”), ‘’, true);
}
Add_action(“customize_preview_init”, “sitepoint_customizer_live_preview”);
Conclusion
All the new themes in WordPress should be implementing the theme customization API since it is well-developed. A lot of developers are already familiar with it. If a premium theme is being used, then the requirement of this API is a must. Users could approach WordPress experts to get some help while executing it.
