Amendments That Can Heighten The WordPress Customizer Experience!

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.

Understanding the Purpose of Using WordPress Theme Customizer

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:

  • Color Picker
  • Layout Picker
  • Date Picker
  • Menu dropdown

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.

Step1: Creating a Simple Drop-Down Control

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:

  • We are defining a class named “WP_Customize_homeCategory” that will extend the “WP_Customize_Control” class. However, you need to ensure that the WP_Customize_Control class exists.

  • Our new class (i.e. WP_Customize_homeCategory) inherits from WP_Customize_Control class and will be having the access to override its methods, so as to perform the action you want. For the Category dropdown control, we’ll only need to change the method: render_content(). And, we’ll get the categories of the this method using the default WordPress function get_categories().

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.

Step 2: Creating a Section For 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:


Wrapping Up!

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.

You may also like

Read More Articles about

Tips for Designs and Templates