Theme customization is a common practice for webmasters to develop a custom WordPress theme for a client website, or a theme that can be used by other developers. And, thanks to the WordPress Customizer (i.e. Theme Customization API), you get access to a set of tools that helps in making changes to the theme based on your preferences.
The WordPress Theme Customizer has been available since the release of WordPress 3.4 version – that adds the ability to preview changes made to theme options in real time – prior to saving those changes. In case you’ve been running a high traffic WordPress powered site, and choose to make styling changes to your live site, then all your users will be watching the tweaks you’ll make to your site. But, with theme customizer you can view all your changes in real-time while staying in the admin area, without impacting the live site.
The Customizer provides a simple and user-friendly WYSIWYG interface, helping to tweak various aspects of the theme, including colors, fonts, etc. But, merely talking about what WordPress Customizer is all about is not the agenda of this post. But, what we intend is: to bring to your attention some of the amendments that will help improve the “Customizer” functionality. The best way to do so requires creating custom controls that can be added onto your WordPress theme customizer.
WordPress Theme Customizer comes loaded with a few controls by default, such as:
and many more…
All of the Customizer controls (except for Plain Text Input) extend the “WP_Customize_Control” class – that is used in combination with the WordPress HTML5 Theme Customization API to add a custom control. However, in order to define any of the functions of such controls, you’ll have to override the WP_Customize_Control class functions. Doing so, helps in enhancing the WordPress Customizer functionality.
Note: This post is intended for WordPress users having proficiency in writing code.
Example: Demonstrating the Process of Creating Custom Control Here, in this tutorial, we’ll discuss about the steps involved in the process of creating a custom control to select the post that you will like to display in your homepage.
Here, we’ll be writing code for creating a drop-down control. The below code needs to be included in your theme’s functions.php file:
Let us now understand how the above code works line by line:
But remember that, for accessing the “Category dropdown” control,
it’s important for you to make use of the “wp_customize” object. We are using this object, in order to define a new section that will include our custom control.
Below is a code snippet that when added to the functions.php file will help create a section named “Home Page post Category” that will contain the “Category dropdown” custom control. After execution of this code snippet, you’ll get the ability to choose the post category, you would want to display on your site’s homepage:
Result: As you can see in the below screenshot, when “Blog” is selected from the post category, it displays the content of that post (as shown on the right side of the window):
Here is another screenshot that shows the content of the latest post when “News” is selected – from the post category:
Creating custom controls for WordPress Customizer helps extend its functionality – that enhances the UX (user experience) in the Customizer. Although, you may find creating custom controls a time-consuming process in the beginning, but remember that adding such controls will make the WordPress HTML5 Theme Customizer to work much better that ever before.
Here, in this post we’ve discussed about creating the dropdown custom control, which when added to the theme customizer will help deliver optimal user experience, by enabling them to choose the post category they want to see.