How to Use WordPress Theme Customisation API
Posted By : Harsh Soni | 31-May-2018
Wordpress has ways amaze their users with the ease of editing and publishing blogs. WordPress has its Theme Customization API which allows developers to easily create a 'Customization page' for their themes. It was introduced from the Wordpress 3.4 release onwards and WordPress itself recommends the use os customization API rather than providing a setting page at backend
What is Theme Customization API ?
It allows you to create theme configurations options from which user can change the configuration and see the changes at the same time. A user can access its theme customizer from Appearance >> Customize page in the menu. It is an easy way for a beginner user to edit its theme. A user can modify theme's settings, color schemes, widget, titles, and logos.
Every theme now has some default customizer settings and controls to customize page such as Site Settings, Background Image, Background color, Widgets, Menus etc. These are created using Sections and controls of Customization API.
Creating a custom Configurations option
It basically contains a three parts
- Section: Sections are a group of settings. Each setting defined must have a section assigned to it.
- Settings: It is a customization option to display or control theme attributes.
- Controls: These are the pre-created functions to control the settings. It can be linked to only one setting and one section.
Now, Let's take a simple example to create a text box for an option in Customization page
We will create a Theme setting to change copyright text using $wp_customize object
<?php
function oodles_theme_customizer($wp_customize) { $wp_customize->add_section("cr_section", array( "title" => __("Copyright Section", "your-text-domain"), "priority" => 30, ));
$wp_customize->add_setting("cr_text", array( "default" => "", "transport" => "refresh", ));
$wp_customize->add_control(new WP_Customize_Control( $wp_customize, "cr_text", array( "label" => __("Copyright Text", "customizer_ads_code_label"), "section" => "cr_section", "settings" => "cr_text", "type" => "text", ) )); }
add_action("customize_register","oodles_theme_customizer");
?>
You can echo the value using this function
<?php echo get_theme_mod('cr_text'); ?>
In the add_section function "cr_section" is the ID of the section, similarly "cr_text" is the id of the setting which is passed to control to add a text box to section with ID "cr_section".
Similarly, you can provide all kinds of pre-made settings in the Customizer Page to provide ease to your users.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Harsh Soni
Harsh is an experienced Developer with multiple tech stack such as PHP, NodeJs, Javascript, Angular. He loves learning new technologies and experimenting on them.