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 software developer with a specialization in the MEAN stack. He is skilled in a wide range of web technologies, including Angular, Node.js, PHP, AWS, and Docker.Throughout his career, Harsh has demonstrated a strong commitment to delivering high-quality software solutions that meet the unique needs of his clients and organizations. His proficiency in Angular and Node.js has allowed him to build dynamic and interactive user interfaces, leveraging the power of modern front-end frameworks. Harsh's expertise also extends to cloud computing and infrastructure management using AWS, enabling him to design and deploy scalable applications with ease. Additionally, his knowledge of Docker has enabled him to streamline the development and deployment process, enhancing efficiency and reducing time-to-market. He excels at analyzing complex technical challenges and devising efficient strategies to overcome them, ensuring the successful completion of projects within deadlines.