Hi, welcome to this lesson on styles for WordPress themes.
With this lesson, you will explore the style hierarchy, modify theme styles using the site
editor, and export the changes, understand how WordPress uses the JSON syntax to generate
CSS in a browser, and configure presets via the settings property, then apply them in
the theme.json styles property.
So let's dive in.
Let's take a look at the 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.
Let's modify theme styles using the site editor and export the changes.
The CreateBlock 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 CreateBlock 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 CreateBlock 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.
Now let's take a look at how WordPress uses the JSON syntax to generate CSS in a browser.
We'll take a look at the default 2024 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.
Now 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.
Let's configure presets using theme.json with another example now.
So here we have a getting started theme and we want to start customizing it by adding
our palette.
So we go into settings and we can 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.
Let's now take a closer look at how presets are written within theme.json.
So here's an example from the 2024 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.
Now WordPress would generate 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