Adding Styling via the Customizer Without Adding CSS to the Page
Adding Styling via the Customizer Without Adding CSS to the Page
The WordPress Customizer is an incredibly powerful and useful tool.
By incorporating it into your themes and plugins, you give your users more flexibility and simplify design, layout and content customization.
However, it does have its drawbacks. One of these is the fact that any styling you add directly via the customizer will be output in the
head section of the page, and not via your theme stylesheet. This is particularly the case when adding styling via the color picker.
Adding CSS in this way isn’t very good practice – it’s much better to have all of your styling in the stylesheet, so you should aim to do this wherever possible.
In this post, I’m going to show you how you can use PHP combined with your theme’s stylesheet to avoid that problem and ensure that color styling added via the Customizer is stored in the stylesheet and not in the
head section of the page.
What You’ll Need
To follow along with this post, you’ll need the following:
- A development installation of WordPress
- Your own theme that you can edit and add Customizer functionality to. Alternatively, you could create a child theme of a third party theme – but don’t edit a third party theme directly.
- A code editor.
Note: this method works with a limited palette of colours, as you need to set up the CSS in your stylesheet for each of them. If you want to give your users the option to choose from any color they like, you’ll have to use the color picker and put up with that styling being in the
head section. Sorry!
Setting Up your Theme
The first thing to do is set up your theme to add Customizer functionality.
Add a folder called includes to your theme and within that, create a blank file called customizer.php.
Add this to your theme’s functions file:
Now you’re ready to add Customizer functionality to your theme.
Setting up the Customizer
Open your new customizer.php file. First you’ll need to create a function to hold your Customizer setup. Add this:
This function will contain all of the code to create sections and controls in the Customizer.
Adding a Customizer Section
You could add your Customizer controls to an existing Customizer section, but I prefer to create my own. It makes things clearer and avoids the risk of the section you’re using being removed in a future WordPress update.
Inside the function you already added to your customizer.php file, add this:
If you open the Customizer it won’t display anything yet, as a section is only shown if it has settings within it. So let’s add that.
Adding Settings to the Customizer
To add the setting for the color scheme, you need to create a setting and a control. The setting is what stores the option selected or text input, while the control is the interface used by the Customizer to allow users to make changes.
Still inside your function and below the code for the section, add this:
Let’s take a look at what this does in detail:
- First, it creates the
wpmu_nav_colorsetting to store any inputs or selections.
- Then it adds a control called
wpmu_nav_color, which it creates using an array of parameters.
- It adds a label, which is what the user will see.
- It identifies which section the control will appear in.
- It tells WordPress which setting will be used to store what’s added via the control – in other words, the setting you just created.
- It defines it using the
'radio'type, meaning radio buttons will be displayed. Other options include text boxes, checkboxes, select boxes, urls and more. See the Codex for a full list.
- It identifies the choices for the radio buttons – in my case, blue, red or green.
wpmu_customize_register() function complete. Save the file and open the Customizer. You’ll now see your new section and control displayed:
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
But if you select any of those radio buttons, it won’t change anything. That’s because you need to add some code to your theme. Specifically, you need to add a filter hook to your navigation menu in the header as well as some CSS in your stylesheet.
Calling the Setting Via a Filter Hook
Instead of adding styling in the
head section of the page, we’re going to pass it to the relevant element in our theme using a filter hook.
Adding the Filter Hook to Your Theme
Open your theme’s header.php file and find the line for your navigation menu.
In my theme it looks like this:
You need to add a filter inside the opening tag for the
nav element, like this:
Yours will look different from mine but you still need to add that filter hook where you’d normally type a CSS class.
This creates a filter hook with the default content of
'blue'. We’ll use this to add styling to that element.
Sending the Setting to the Filter Hook
But you still need to pass the setting to this filter, and you do that in your customizer.php file.
Back in your customizer.php file, add a new function, which will be hooked to your new filter hook:
This fetches the setting from the Customizer using
get_theme_mod() and then returns that, meaning it will be output in the header file where the filter hook is.
Save and close your customizer.php file.
Adding Styling to the Theme
The final stage is to add styling that will pick up the CSS class that you’ve added via the filter hook. This will be stored in your theme’s stylesheet, meaning there’s no styling in the
Open your theme’s stylesheet and add something like this (note that your styling may be different depending on your markup):
Tweak the colors depending on your color palette and preferences. You could add more if you like but remember that each one you add will have to be set up as a choice for the radio buttons in the Customizer.
Finally, save your stylesheet, open up your site and test it out.
By default my navigation menu is blue:
But now if I want to, I can pick another color:
Using the Customizer for Styling Doesn’t Have to Mean Adopting Bad Practices
Working with the WordPress Customizer can mean having to add styling to the
head section of the page. If you need to access the color picker, there’s no way around this.
But if you give your users a limited choice of colors to work with (maybe colors that work with your theme or are in line with your branding), you can use a filter hook to send what’s chosen to your theme as a CSS class that’s applied in the stylesheet.
You can even adapt this technique and use it for other purposes too, such as layout styling – for example, provide a radio button to select a left or right aligned sidebar and send the setting to a CSS class in the same way.
There are hundreds of ways to simplify styling with the customizer. With a little creativity, you can improve the experience for your users and clients.