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:”
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.