Block theme styles

Welcome to this lesson on styles for WordPress themes.

The WordPress style hierarchy

At the bottom, we have root elements, such as body text. The next level is individual elements, such as headings, for example, the H1 tag. And finally at the top, we have blocks, such as a button block. So anything that would be applied to the block level would take precedence over all of the other styling within your theme.

Modify theme styles

Let’s modify theme styles using the site editor and export the changes. The Create Block theme plugin is an invaluable tool for any theme developer. Do check out the introductory lesson within the Beginner’s Learning Pathway for developers.

One of the best features I’ve discovered using the Create Block theme plugin is the ability to save changes directly to my theme file. If I were to now make a change within global styles, such as adding a new color, for example, to the custom palette, so I can search for a color or I could enter the hex code and then I can name my color. I’ll name this one purple and then you would hit done. And then if I were to hit save, this change is saved to the database. We see the Create Block theme plugin sidebar and the save changes option. This removes the changes from the database and pushes them to the theme files.

And now let’s open the theme.json file so we can search for the new purple color. And you can see it there within settings as a new color available for the end user to use.

How WordPress uses the JSON syntax to generate CSS in a browser

We’ll take a look at the default Twenty Twenty-Four theme. This is a block theme and if we were to inspect the code and take a look at, say for example, the H1 tag, so we’ll inspect it here on the left and on the right we see the generated CSS.

WordPress takes the settings, color, contrast, and then applies it to the H1 heading here. We’re going to take a look at how this is done now in theme.json. So here you see how within settings we have the palette and the contrast color. And then if we were to scroll down to the styles property, we would see how the contrast color is being applied to text.

How presets are written within theme.json

Let’s configure presets using theme.json with another example now. Here we have a getting started theme and we want to start customizing it by adding our palette. Go into settings and set the default palette from WordPress to false and then add the property palette and start adding our colors. And note here that we’re using a generic naming convention as opposed to naming the color.

For instance here this is a dark green and instead of using green for the name and slug we just use contrast. This makes it much easier to do color changes going forward and then we see it being applied at the bottom here under styles.

Now, let’s take a closer look at an example from the Twenty Twenty-Four theme. We have the settings property with the color, name and slug. And then for styles to apply it we would use the format here with the feature being color and then the slug for example is accent-3.

WordPress generates the CSS by creating the class has-slug-feature. We can see this in action by applying the color to the text here and then if we inspect that paragraph we’ll see how WordPress takes up preset and creates the class has-accent-3-color.

Next steps

As always you can refer to the theme handbook available to you on WordPress.org and you can also take a look at the styles reference guide in order to find all of the available style properties that you can add to your theme.json file.