word press

WordPress Theme Customization through API, allowing developers to customize the appearance → Customize the admin screen and add control. Theme customization screen (i.e. theme customizer) allows the site administrator to fold the settings of a theme, color scheme or widget and preview the changes in real-time.

We have so many options to customize the WordPress theme are as follows:-

We assume that you have already read themes development and writing a Plugins, so we assume that you already know about Themes Development and Plugins and an idea of how to develop custom themes and plugins for WordPress. This article also requires a functional understanding of object-oriented programming that is based on classes and object. So, a familiarity with the WordPress setting API should be very helpful as well.

Most important point is that you can only apply to WordPress Version 3.4 and higher.

Defining Settings, Controls, Etc.

First of all, defined a customize_register action to customize any new theme setting, sections, or controls. This action automatically loads the $wp_customize object, which is an instance of the WP_Custom_Manager class.

Now, we define the action as follows:

function mytheme_customize_register( $wp_customize )

{

// You can add sections, settings, and controls here

}

add_action( ‘customize_register’, ‘mytheme_customize_register’ );

Here, the $wp_customize object is passed automatically to the function, and it’s necessary to use $wp_customize object that Customization the page are performed by this.

Then, you need to define your settings, your sections, your controls (controls need a section and a setting to function).

Adding a New Setting

For add a new setting to your Theme Customizer first you ,necessary to call the $wp_customize->add_setting() method. For your theme, after defining this you only need to work to create, save, or fetch settings.

We can add in following way:-

$wp_customize->add_setting( ‘header_textcolor’ , array(

‘default’ => ‘#000000’,

‘transport’ => ‘refresh’,

) );

Adding a New Section

When you define new controls, they should be added to a section. There are groups of section options. Although you can add the control to existing default sections, we will cover briefly by adding a new section.

For adding a new section to your Theme Customizer, you must call the $ wp_customize-> add_section () method.

Adding a topic section may look like this:

$ wp_customize >> add_section (‘mytheme_new_section_name’, array ()

‘Title’ => __ (‘Name of the Visible Section’, ‘mytheme’),

‘Priority’ => 30,

));

If you are facing any problem you can take a look at our WordPress support services to get the immediate help.

Adding a New Control

A control is an HTML form element that is presented on the Theme Customizer page and allows the administrator to change the settings and preview those changes in real time. Controls are linked to single settings and single section.

For adding a new control to your theme customizer, you need to call the $ wp_customize-> add_control () method.

Adding a control to a theme section (‘Within Optimized- Graster Action’) may as follows:

$ wp_customize >>

add_control (new WP_Customize_Color_Control ($ wp_customize, ‘link_color’), array (

‘Label’ => __ (‘header color’, ‘mytheme’),

‘Section’ => ‘your_section_id’

‘Settings’ => ‘your_setting_id’

)));

Live CSS Generating

Finally, you just need to make sure that you are getting the settings and output any required CSS in your header. If you have defined your settings within the ‘custom_grister’ action, as mentioned above, getting your settings value is as simple as getting the value with the ‘wp_head’ action and output with get_theme_mod () do

For example, suppose you have a setting called ‘header_color’ and it looks like this:

$ wp_customize-> add_setting (‘header_color’, array)

‘Default’ => ‘# 000000’,

‘Transport’ => ‘Fresh’,

));

Coding for CSS

function mytheme_customize_css()

{

h1 { color: <?php echo get_theme_mod(‘header_color’, ‘#000000’); ?>; }

</style>

<?php

}

add_action( ‘wp_head’, ‘mytheme_customize_css’);

Configure Live Preview

This step is optional, but can dramatically improve the user experience. This technique uses a little custom javascript in combination with your settings, with faster, more interactive theme customizers. If it is not used, updates are re-submitted by reloading the full preview window.

To create this custom javascript handler, you have to do the following:

1 – Make sure your settings are configured for live preview (‘transport’ => ‘post message’)

2 – Create a new javascript file to handle live changes (like topic-optimized. Js)

3- Create a hook for ‘custom_preview_init’ which encrypts the js file.

Now its necessary to understand above points briefly:-

Step 1: Firstly you ensure that all of WordPress’s Theme Customizer settings use by default ‘transport’ >> ‘refresh’, so if you want to make the default, built-in Theme Customizer options just write the following function:-

$wp_customize->get_setting( ‘blogname’ ) ->transport = ‘postMessage’;
$wp_customize->get_setting( ‘blogdescription’ ) ->transport = ‘postMessage’;
$wp_customize->get_setting( ‘header_textcolor’ ) ->transport = ‘postMessage’;
$wp_customize->get_setting( ‘background_color’ ) ->transport = ‘postMessage’;

Step 2: JavaScript File Creation

Now, you need to create a new javascript file for all your custom handling. Generally, you call this theme- customizer.js and you can put it in the ‘js/folder’ of your theme, but you can call it as you wish or keep it wherever you want.

Coding for file creation is as follows: –

(Function ($) {

// Update site title in real time …

wp.customize (‘blogname’, function (value) {