While I’m a huge fan of the WordPress theme customizer, one of the drawbacks is that themes often dump the CSS as an inline style in the <head> section of a theme with the wp_add_inline_style() function. The problem with inline styles is that they cannot be cached so they must be downloaded every time a page is loaded. Most themes add some sort of basic customization options such as colors, typography and site layouts to the customizer so if there was a way to avoid this it would solve a pretty big problem.
A few weeks ago I was building out the customizer options for a new theme and I realized that there must be a better way to use the customizer settings. The customizer stores the user’s customizations as theme_mods by default which can be used in a theme. The first thing that came to mind was to dynamically create a stylesheet which contained all the Customizer CSS. This approach is definitely better than inline styles but it would be even better if it could be combined with the main stylesheet. I couldn’t figure out a way to achieve this because variables don’t exist in plain CSS yet and overwriting the stylesheet can get messy. If browsers could read Sass, it would just be a matter of overwriting the Sass variables with the theme_mods.
The solution
I started doing some research and came across an amazing plugin called WP-SCSS. It uses a PHP script that compiles SCSS into CSS. This was perfect for what I needed because the theme was built with Sass, so all I needed to do was figure out how to overwrite the Sass variables with the theme_mods. This solution would work with plain CSS as well, it’s just a matter of renaming style.css to style.scss, because CSS is valid Sass. You would have to then go through the stylesheet and convert any of the styles into SCSS variables which is pretty straight forward. It actually turned out to be extremely easy to achieve this, thanks to the team behind the WP-SCSS plugin ConnectThink. They have already provided us with a way to set SCSS variables if none are set (it won’t overwrite existing variables so be sure to remove them or comment them out). The code for this is fairly simple. First we create an array containing all the variables we need. Make sure to add the variable name and it’s value. Then we create a function that is applied to the variables filter provided by the WP-SCSS plugin. Inside of this function we create a foreach loop which loops through all of our variables and checks if theme_mods with the variable name are set. It adds all of our variables to a new array called $variables which is picked up by the filter. Now when the page is refreshed, the Sass files are recompiled into to main stylesheet but the variable values are intersected and replaced with the new variables we have set.
// Create array of variables default colors.$default_colors = array( 'color-text' => '#333333', 'color-button' => '#333333', 'color-link' => '#dddddd', 'color-white' => '#ffffff', 'color-outline' => '#eeeeee',); add_filter( 'wp_scss_variables', 'prefix_set_variables' );/** * Update SCSS variables * * @since 1.0.0 * * @return array */function prefix_set_variables() { // Get the default colors. global $default_colors; // Create an array of variables. $variables = array(); // Loop through each variable and get theme_mod. foreach ( $default_colors as $key => $value ) { $variables[ $key ] = get_theme_mod( $key, $value ); } return $variables; }
Add settings to the Customizer
Here is a clean way to add our variables as color options to the Customizer. The following code uses our previous array of variables and loops through each one, creating a Customizer setting and control for each color. The setting ID matches the variable name which is then updated with the selected color value if one is set. Then when the browser is refreshed, the theme_mods are picked up instead of the default colors and the new styles are applied.
add_action( 'customize_register', 'prefix_customizer_register' );/** * Register settings and controls with the Customizer. * * @since 1.0.0 * * @return void */function prefix_customizer_register() { global $wp_customize; global $default_colors; // Loop through each variable in the array. foreach ( $default_colors as $key => $value ) { // Add setting for each variable. $wp_customize->add_setting( $key, array( 'default' => $value, 'sanitize_callback' => 'sanitize_hex_color', ) ); // Add control for each variable. $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $key, array( 'label' => ucwords( str_replace( 'color-', '', $key ) ) . ' Color', 'section' => 'colors', 'settings' => $key, ) ) ); }}
Optimizing WP-SCSS functionality
To get this to work we need to tell WP-SCSS to always recompile. By default it will only recompile when changes are made to the Sass files. This simply 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 get around this we do a simple check of is_customize_preview() and if so set WP-SCSS to always recompile, otherwise it will only recompile when changes are made to the CSS files. The code below also checks if the WP-SCSS plugin is active before running any of our code and also updates the CSS/SCSS directory paths options manually to match the theme we’re using.
// Check if WP-SCSS plugin is active.if ( ! is_plugin_active( 'wp-scss/wp-scss.php' ) ) { return; }// Always recompile in the customizer.if ( is_customize_preview() && ! defined( 'WP_SCSS_ALWAYS_RECOMPILE' ) ) { define( 'WP_SCSS_ALWAYS_RECOMPILE', true ); }// Update the default paths to match theme.$wpscss_options = get_option( 'wpscss_options' ); if ( $wpscss_options['scss_dir'] !== '/sass/' || $wpscss_options['css_dir'] !== '/' ) { // Alter the options array appropriately. $wpscss_options['scss_dir'] = '/sass/'; $wpscss_options['css_dir'] = '/'; // Update entire array update_option( 'wpscss_options', $wpscss_options ); }
Putting it all together
The complete code should be placed in a separate file and included in your functions.php file. Please note that the WP-SCSS plugin needs to be installed and activated for this to work. You will also need to make sure that there is a /sass/ directory in your theme containing the Sass you would like to overwrite. Be careful and make sure you have a backup of the original style.css file incase you need to undo the changes.
/** * Customizer Sass * * Requires the WP-SCSS plugin to be installed and activated. * * @package C
