css variables and theme customizations feature woman typing on laptop with various scrum and design tools on white desk

How to add CSS variables to customize WordPress child themes

Abbey Fitzgerald's Layout avatar

CSS variables, also referred to as CSS custom properties, allow for easy reuse in your CSS stylesheets. If you’ve done work with WordPress child themes, you probably find yourself doing a lot of styling and overriding on things like color, padding, etc. If you’re new to web design, it’s worth mentioning that there’s nothing wrong with using plain CSS. CSS variables are optional and as you get more advanced, you’ll begin to see how variables will benefit you.

These are not intended to replace CSS preprocessors, the most popular being SASS. I specifically use SASS for larger projects, and along with CSS variables as a core piece, it offers any advanced options. If you’ve worked with preprocessors before, however, you know that they need to be compiled to output the CSS. For that reason, this tutorial will focus on CSS Variables, and won’t dive go into details about preprocessors.

CSS variables are a happy medium. Fortunately, there’s strong browser support. Before committing to using them in production, be sure to check Can I Use to make sure they have the support you need. They’re more efficient than working with plain CSS but don’t require an advanced setup like SASS. The browser does the “compiling,” and you’re not dependent on setting up and environment that outputs the compiled CSS.

css variables and theme customizations feature woman typing on laptop with various scrum and design tools on white desk

This approach is a good project fit for things like styling simple WordPress child themes. In projects like this, there tends to be a need to make styling updates to create a branded theme. I like the fact that I have a manageable list of styling overrides and don’t feel the need to set up an environment compiling the SASS to CSS.

How to use CSS variables

When using specific colors to stay on brand, one common requirement is having a brand color palette that can be used over and over again. It gets redundant to type the same color value each time. Plus, what if you want to make a change to one of the color values in the set? For example, maybe a blue needs to be slightly darker. This happens all the time. Yes, of course, there’s the trusty find and replace. Adjusting the value in one place, however, is more efficient when making this global change and as variables are reused.

Here’s what a CSS variable looks like:

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

As I’m streamlining the workflow for styling a WordPress child theme, I’ve added the variables to my styles.css file. This is just the “short list” and as more are added, efficiently naming each variable becomes important.

:root {
--white: #ffffff;
--black: #232525;
--mid-gray: #eeeeee;
--brand-red: #e50000;
}

css variables and theme customizations feature woman typing on laptop with various scrum and design tools on white desk

The var() function

How are variables actually used? It’s pretty simple. First, the variable is declared and then it’s used in the needed CSS rule-set. Scope is an important thing to be aware of. Variables need to be declared within a CSS selector that’s within its intended scope. In many cases, you’ll need variables to be available in the global scope, that way they’re accessible to everything. You can use either the :root or the body selector for the global scope. There may be instances where you need to limit the scope, however, and want to work with a locally scoped variable.

It’s easy to spot variables; they have two dashes before them. The two dashes (–) need to be included.

The syntax of the var() is pretty straightforward:
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

Instead of adjusting the color in multiple places, the variable value is adjusted in once place.

The web inspector (Chrome in this case) allows you to inspect and see which variables are being used.

css variables theme customization chrome inspector css

The following example first defines global custom properties named --light-gray and --text-black.  The var() function is called, which inserts the value of the custom properties later in the stylesheet:

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

It’s worth mentioning that variables can be very useful when working with CSS breakpoints. By using globally scoped variables in different breakpoints, things like padding and other useful styling can be customized for various sizes.

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

Here’s an example of variables that can be found in the local scope. We’ve only touched on the global scope so far, so you’ll notice that things are not in the root. These are styles for a warning message. There’s a warning text color declared here that is only useful for this class. Also, it’s worth noting that calc can be utilized also.

.warning {
--warning-text: #ff0000;
--gap: 20;
color: var(--warning-text);
margin-top: calc(var(--gap) * 1px);
}

css variables theme customizations warning text

The examples above cover the basics of CSS variables. These concepts can be applied to custom WordPress themes or any other custom CSS that you write. Variables have advantages over just plain CSS and will help you work more efficiently when making site-wide changes. They allow for better-organized stylesheets without the need for a preprocessor.

Love this article? Try one of these:

Comments ( 1 )

  1. Ger

    September 8, 2018

    Hi Abbey,

    Thanks for this great tutorial! I have question: you are saving to styles.css; should that be style.css?

    Thanks,
    Ger

Join the discussion