Cancel

Sarah Gooding

Save Time Building WordPress Customizer Controls

customizer-controls

Adding controls to WordPress’ theme customizer can be somewhat tedious and there are many tutorials dedicated to creating your own controls. WordPress Theme Customizer Custom Controls is a project on Github that provides a collection of ready-made controls that you can drop right into your theme. This set of extra controls was created by WordPress developer Paul Underwood.

The collection includes:

  • Category Dropdown – Creates a dropdown of all the categories on your WordPress theme
  • Date Picker – Adds a date picker control to the theme customizer
  • Layout Picker – Adds 3 images of layouts to the page for you to select a new style
  • Menu Dropdown – Creates a dropdown of all the menus on your WordPress site
  • Post Dropdown – Creates a dropdown of all the posts on your WordPress site
  • Tags Dropdown – Creates a dropdown of all tags on your WordPress site
  • Text Editor – Creates a textbox with the TinyMCE textarea
  • Textarea – Creates a textarea input field
  • Taxonomy Dropdown – Creates a dropdown of taxonomies ( Usage: see Gist 4538951 )
  • User List Dropdown – Creates a dropdown of users for a role ( Usage: see Gist 4564337 )
  • Google Fonts Dropdown – Create a dropdown to show you the 30 most popular fonts on Google web fonts

How to Use the WordPress Theme Customizer Custom Controls

If you want to use all of the custom controls in your theme, including them is very simple. Download the project from Github, unpack it and then drop the /wordpress-theme-customizer-custom-controls/ directory wherever you want within your theme’s structure, making sure to adjust the path below if you change it. Add this to your theme’s functions.php file:

[php light=”true”]require_once ‘/inc/wordpress-theme-customizer-custom-controls/theme-customizer-demo.php’;[/php]

This will put all of the custom controls into the customizer under a “Custom Controls Demo” item and will include WordPress’ default controls under “Default Demo Controls:”

controls

Ideally, you would adjust the controls to better suit your theme and add only the ones that work with the design. It provides a great starting place and an easy way to learn more about how the controls are created, should you want to add more of your own.

The Taxonomy and User List dropdowns both require a bit of extra setup and the usage is demonstrated in the example gists for each. The Google Fonts Dropdown has built-in caching, which creates a cache file on the user’s machine so that you don’t have to call the API so many times.

Adding custom controls to the customizer is a great way to allow for more personalization in a theme created for a client or for public distribution. The user can easily change styles and preview them live, without having to make requests for design changes. Hopefully, the Custom WordPress Customizer Controls can save you a little time in building out your next theme. For more information, check out the project’s Github page and Paul Underwood’s post detailing each control.

Category:
Tags:
8

8 responses to “Save Time Building WordPress Customizer Controls”

  2. The customizer needs better organization if it’s going to be the go-to place for anything more than basic configuration. It will become quite easy to just shove dozens of settings and then the side panel will become very cluttered with no standard hierarchy. Right now with the Widget customizer baked in, there are a lot of setting panels if you have a lot of widget areas. I have seen quite a nice idea for a solution by the team that worked on the widgets that would solve it though.

    Create forum topic from comment

  3. The Google Fonts Dropdown has built-in caching, which creates a cache file on the user’s machine so that you don’t have to call the API so many times.

    There are three things that can be improved with this approach.

    First is the direct use of the file system for caching, which will not work in any non-single-server environment. Caching the list using the Transients API is a much better and more efficient way.

    Second is the use of fopen() and fwrite() to write to the file system, which should probably not work in a secure hosting environment for anything outside of wp-content/uploads. A good alternative is the proper use of the Filesystem API.

    Third is the direct use of cURL, which means it will by-pass any logging or debugging scripts, proxy settings, timeouts, and will also fail if cURL happens to not be installed on the server. Using the WordPress HTTP API is the preferred way for remote requests.

    Create forum topic from comment

  4. I was wondering when something like this would be created. Sort of like a starting ground for adding things to the customizer. Last I hear, it wasn’t the easiest thing in the world to do. However, as Peter mentioned, some sort of standard or organizational concepts will need to be hammered out before everyone starts putting everything and the kitchen sink into the customizer, ruining its purpose.

    Nice work Paul.

    Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.