Adding Sectional Titles In The WordPress Theme Customizer
In the previous UI/UX post I covered how to re-skin the customizer by enqueuing your own stylesheet that will allow you to override the customizers base styling. In this post Im going to cover adding titles that essentially allow us to ‘group’ sections for better readability and organisation.
As a bit of an overview, here’s what we are going to be doing in this guide:
- Creating a custom class that extends WP_Customize_Section
- Registering new sectional titles using our custom class
- Enqueueing a stylesheet that styles our new sectional titles
- (Optional) Restyle all the sections for better readability
1. The Custom Class
Firstly, lets create our custom class by adding the following to our
We will use this inside the add_section() method. Now our custom class does a number of things, perhaps most importantly it bypasses the check to see if a section has any content (options). If we didn’t do this the title would never show up as only sections with options display.
2. Registering Our Sectional Titles
Lets add our titles using the
add_section() method in conjunction with our new customizer class. The only argument that can’t be passed with our current custom class is
'active_callback', besides that we can set all the arguments that a standard section can handle. Descriptions will be outputted under the title if you have any.
3. Custom Styling
The last thing left to do is to style our new sectional titles. Lets enqueue a stylesheet for the customizer that we can use to create / override customizer styles.
The content of our stylesheet will be as follows:
That’s it! We should now have something that looks like the following:
4. (Optional) Additional Styling
Now this next part is completely experimental, but if you want to go a bit crazy restyling the sections, replace the CSS in our above stylesheet with the following:
That should leave us with something a little more slicker` and easier to visually breakdown.