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 Developer with multiple tech stack such as PHP, NodeJs, Javascript, Angular. He loves learning new technologies and experimenting on them.

Request for Proposal

Name is required

Comment is required

Sending message..