How to Use WordPress Theme Customisation API

Posted By : Harsh Soni | 31-May-2018
How to Use WordPress Theme Customisation API

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


  1. Section: Sections are a group of settings. Each setting defined must have a section assigned to it.
  2. Settings: It is a customization option to display or control theme attributes.
  3. 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




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", ) )); }




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.


About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..