The WordPress theme customizer is a great tool, but it has some drawbacks. For example, themes will often use CSS inline styles. Section of an article using the wp_add_inline_style() function. Inline styles cannot be cached, so they have to be downloaded each time a new page is loaded. The Customizer of most themes includes some basic customization options, such as color schemes, typography, and layouts. If there were a way to avoid that, it would be a big help.
A few weeks ago, I was creating the options for a theme when I realized there had to be a better method of using the customizer settings. By default, the Customizer saves user customizations in theme_mods. These can then be used to create a theme. The first thing that came into my mind was creating a dynamic stylesheet that included all of the Customizer CSS. It’s definitely better than using inline styles, but it would even be better if the stylesheet could be combined. This was impossible to do because variables are not available in plain CSS, and it can be messy to overwrite the stylesheet. It would be easy to do if browsers were able to read Sass.
The solution
After doing some research, I came across a plugin called WP-SCSS. It uses a PHP code that converts SCSS to CSS. It was the perfect solution for my needs because the theme had been built using Sass. I only needed to figure out how I could overwrite the Sass variable with theme_mods. It would also work with CSS; you need to rename style.css into style. scss. Then, you would need to go through your stylesheet and convert all the classes into SCSS variables, which is fairly straightforward. Thanks to the ConnectThink team, it was incredibly easy to accomplish this. The team has already given us a way to add SCSS variables to the site if they are not set. This code is pretty simple. We create an array that contains all the variables needed. Add the variable name as well as its value. We then make a filter that will be applied to the WPSCSS variables. In this function, we create a loop that loops through our variables to check if theme_mods are set for the variable name. The filter adds our variables into a new array named $variables. When the page is refreshed, the Sass files will be recompiled, and the main stylesheet will have the variables replaced by the new values we set.
Customize the settings
Here’s a simple way to add color options for our variables to the Customizer. The code below loops through our array of variables, creating Customizer settings and controls for each color. The variable name is updated to reflect the color selected, if any. When the browser is refreshed, the theme_mods will be picked up in place of the default colors, and the new styles will be applied.
Optimizing WP-SCSS functionality
For this to work, we must tell WPSCSS always to compile. It will only recompile if the Sass file is changed. This is done by setting the WP_SCSS_ALWAYS_RECOMPILE constant in our functions.php file to true. Now, obviously, we don’t want the CSS compiling every time a visitor loads a page, so to get around this, we do a simple check of is_customize_preview(), and if so, set WP-SCSS always to recompile. Otherwise, it will only recompile when changes are made to the CSS files. The code below checks to see if WP-SCSS is installed before running our code. It also manually updates the CSS/SCSS directory paths to match the theme.
