Hey there and welcome back!
So we’re almost done creating this full site editing theme and uploading it to the theme directory. Before we do that, I want to create a few theme style variations so that users can quickly change out colors with the theme. And as you’ll see this is so much easier than what we’ve had before with theme development.
But before we get started if you want to see the rest of the videos in this series, as well as more videos on WordPress development and website development in general, be sure to hit the subscribe button and to ring the bell for notifications.
Now let’s get started.
Okay so before we get started with creating our theme style variations, I first want to point out something here in the theme dot json file. And you’ll notice obviously that we have our named colors here – black, off black, the off white, white, red, whatever – but right here I have primary, secondary and tertiary.
And this is key because whenever we define colors for anything – so like here we’re defining the color for links, the color for text, the color for background – we’re using primary, secondary and for buttons it’s tertiary. And that makes it so that we can switch out these theme colors very easily and not have to write a bunch of code.
So that’s very key. You can define as many colors as you want and have names for them, but I would have something like background/foreground. I’ve really found that primary, secondary, tertiary, whatever – that scheme works the best for me.
But have something like that because it makes what we’re going to do next very easy.
And so to create our theme style variations, we simply create a directory called styles. It’s already over here. And you can see I already have a number created for this theme.
So we’re just going to dive into the red. Basically what these json files are are mini theme dot json files, and you are just changing the different styles that you want to change.
Here I’m just using color as an example, but you could also do fonts. I’ve seen that with a few different themes, and that’s really cool. And it just really makes it so that a person can change the style and the look of their theme with one click as you’ll see here in a second.
So we’re going to create another style variation. Let’s see. We’re just going to call it test. And we’ll give it a name. And primary…
Okay I’ve done some colors. As you’ll see here in a minute, these probably aren’t the best colors that you can pick. I’m just throwing some things in here to test so that you can see what this does. But we’re basically taking the primary, secondary and tertiary colors from the theme dot json file and put them here and redefine what colors they are.
So we’ll hit save here and go over to our theme.
So in our theme we’re going to go to Appearance and site editor. And now that our site editor has loaded, we’ll go over here to browse styles. And you will see all of the different style variations that I’ve created for the theme including our test one. You can see the name here.
And we’ll hit that.
And now all of the colors have changed. So the primary is this darker red. The secondary is this lighter green. And the buttons are the red color again.
This is just really simple. And again you can do more than just colors. You can do fonts. Any of the other styles that are defined in the theme dot json file can be styled in the style variation json files.
So there’s really a lot that you can do and the user can change things out very quickly. So really just go around and play around with it and see what you can do with these variations because this is a very, very powerful tool that will help theme developers and users alike.
So what questions do you have about theme style variations and full site editing? Or do you have any questions about full site editing in general? Be sure to leave them down in the comments section below, and I will do my best to answer all of them.
Next time though we are going to bundle this theme and we are going to upload it to the WordPress theme directory and be done with it.
To see that video and more videos on WordPress development and website development in general, be sure to hit the subscribe button and to ring the bell for notifications.
But that is it for today. Thank you so much for watching. And I will see you next time!
