WordPress Customizer is a great tool for users to preview how settings would change their site layout and design. When developing Themes, you should always use the WordPress Customizer. In this tutorial you will learn how to develop a WordPress Customizer custom control for creating flexible lists.
WordPress core has several customizer controls defined which you can use when defining the Customizer settings. If you develop your own themes or even plugins that will use the WordPress Customizer, I am sure that you will get into a situation where you will need to create a custom control.
Our Flexible List will be able to:
- Add new items
- Remove existing items
- Confirm the items
When we confirm our items, the change will trigger the Customizer and we will be able to save it.
For this tutorial, I will assume that we will use this control in a theme. But you can easily implement the code inside your plugin by changing the path to the assets.
Customizer Custom Control Assets
In this fictional theme, I have a folder
css where I will have the CSS files and also a folder
Create them and let them be empty. Now let’s enqueue them. Put this inside the theme’s
Using the hook
customize_controls_enqueue_scripts we are enqueueing the scripts and styles that will be only usable inside the WordPress Customizer.
Our CSS is really simple. It will only have one rule and that rule will define the remove button on each of our items.
serialize from Locutus because we will serialize our data which will be saved.
.list-control-add will get the ID of our control that is set as an attribute
data-id. We are then appending a new list item to our control element. By doing it like this, we are ensuring that the code will work on more than one Customizer Custom Control Flexible List.
.list-control-confirm will also get the ID of our control and then get the values from all the inputs of that setting. Once that is done, the
array is serialized and set in our
hidden input. When that input value’s has been changed, the WordPress Customizer will be triggered so that our option can be saved.
The last element
.list-control-remove will remove the current item we want to remove.
Customizer Custom Control Class
We now have all our assets set and we can create the actual class for our Customizer Custom Control Flexible List. You can add that code inside your theme’s
This is really simple right? We are just extending the class
WP_Customize_Control. The only thing we just need to set is the method
In this method we are iterating through values and displaying all the values as items. Notice also that we are first unserializing the data to get an actual array. Once we are done with that, we are serializing it again and setting it in our
hidden input that is connected to the WordPress Customizer.
Now you can use the custom control when creating new Customizer settings. You can read about using custom controls in the Theme’s handbook.
WordPress Customizer is really awesome. By defining your own Customizer settings, you can deliver your users a great experience when managing the theme or plugin.
Are you using the WordPress Customizer inside your theme? Have you ever created a custom control on your own?