How To Add Customizer To WordPress Theme Properly?
October 7th, 2016 | by Ravi Chahar || Leave a comment |
In every WordPress theme, there is a customizer which allows the users to change a few things of the theme. If you’re developing a new theme for yourself or for others then you can add new options.
Do you know how to add customizer to WordPress theme? Do you want to add a few more options to handle your theme properly?
A theme developer always takes care of the users. If you want to develop a premium theme, you have to add many options in the customizer so that theme users can alter the design.
Adding customizer to WordPress theme isn’t so hard as it seems. You just have to understand the concept and use the WordPress customization APIs.
Add Customizer To WordPress Theme To Improve It.
If you have ever noticed, there is an option to add custom header, favicon, change colors in most of the WordPress themes. You can even add background color and image upload option.
To add more options in the customizer, there are three things to know about.
1. Controls.
It’s the area from where you choose your options. Suppose you change the color of your theme then the button you choose and the options you choose is the section area.
2. Sections.
A Section is the customizer area having all the options. You can check it by visiting the WordPress customizer from appearance>>customize. You have to create a section in which the controls would be added.
3. Settings.
After creating the section and the controls, the value of the date should be stored in the database. It can be done by creating the settings to handle the output.
Let Me Guide You How To Add Customizer To WordPress Theme.
You should know that main WordPress function we are going to use is “$wp_customize“.
A Step By Step Guide Is Here.
Step 1:- First of all, you have to register the settings by using the functions.php file. Create a new function and pass the customization hook.
$wp_customize->add_setting(‘bl_link_color’, array(
‘default’ => ‘#b21f25’,
‘transport’ => ‘refresh’,
));
As you can see, the function isn’t completed yet. This code will help you add the settings to handle the link color. I have used “bl_link_color” in the above code. Remember it, we are going to use it later.
Step 2:- Now, you have to create a new section for the above setting. The section would be the area in which the setting will be showing. Here “Standard Colors” will be an option in your customizer.
‘title’ => __(‘Standards Colors’, ‘YourTheme’),
‘priority’ => 30,
));
Step 3:- Add the controls using “bl_link_color” and “bl_standard_colors“. You have to call both the items properly. And make sure that in place of “YourTheme“, you have to add the same thing in both the codes.
‘label’ => __(‘Link Color’, ‘YourTheme’),
‘section’ => ‘bl_standard_colors’,
‘settings’ => ‘bl_link_color’,
)));
There is one line of the code which is required to call the function. If you know about WordPress functions then “add_action” is needed.
After closing the function with all the codes shown above, you have to add the code below it.
You have just added an option to change the link color of your website in the theme. But the work isn’t completed yet.
You have to create a new function which would control the output of the settings. This code includes the HTML and the inline CSS. Yu have to target the HTML element for which you want to show the output.
Here, the link colors are targetted. So just use the link tag and insert the ID written above. i.e “bl_link_color“.
Add a new code below.
<style type=”text/css”>
a:link,
a:visited {
color: <?php echo get_theme_mod(‘bl_link_color’); ?>;
}
You can see that I have ended and started the PHP before the use of the HTML. You must remember that whenever you use the PHP, you can’t use HTML into PHP. It’s because PHP is used in HTML.
The final code would be.
$wp_customize->add_setting(‘bl_link_color’, array(
‘default’ => ‘#b21f25’,
‘transport’ => ‘refresh’,
))
‘title’ => __(‘Standards Colors’, ‘YourTheme’),
‘priority’ => 30,
))
‘label’ => __(‘Link Color’, ‘YourTheme’),
‘section’ => ‘bl_standard_colors’,
‘settings’ => ‘bl_link_color’,
)));
<style type=”text/css”>
a:link,
a:visited {
color: <?php echo get_theme_mod(‘bl_link_color’); ?>;
} </style>
}
In this code, if you get the syntax error then you have to fix it by looking on the PHP starting and ending tags. Every developer has the different style of coding and it is possible that the functions.php file of your theme may consist other parameters.
I hope you can do that.
Using the three steps and the function to control the output, you can add customizer to WordPress theme and as many options as you want.
I hope Now You Can Add Customizer To WordPress Theme With New Options.
Most of the developer face a problem with the WordPress theme customizer. It seems quite complicated. But if you try to understand the concept of settings, controls, sections then it would be so easy.
Adding customizer to WordPress theme would be fun. You can add many options. You just have to change the <style> of the element you want to add control for.
Check the style.css file and find the element to target. You can directly check an element from the browser. I hope this works for you.
If you still need anything to know, don’t hesitate to ask.
