Creating a Child Theme

Hey there and welcome back!

Let’s face it. We’ve all wanted to change a theme that we downloaded for our website. Using a pre-built WordPress theme is great because it saves us time from building it. But we all want to customize it to meet our needs and our branding. You know, we want to change the color of the text, or the background or the header. And we want to alter how the template looks so that we can display the information that we think is the most important.

Now, we could do this by editing the files directly. But that is a terrible idea. If we ever update the theme — and trust me we will update the theme at some point — we’re going to lose all of those changes.

Fortunately, WordPress has functionality built in so we can avoid just that. It’s called child themes. Child themes are themes that inherit everything from their parent theme. But we can alter the styles and the template files in that child theme to display whatever we want it to.

And those changes aren’t erased when we update the parent theme. And the best part is that it’s not that hard to build a child theme, even if you’re not a developer. Here I’ll show you how.

Okay so before we begin, I do want to mention that the code for this or the starter code for this child theme will be up in a GitHub repository that I’ll link to in the description below so that you can get started.

Now I’ll be working in VS Code, but you’ll likely be using FTP or the file manager that’s included in your web hosting, and we’ll talk about that at a later time.

Anyway, we’ll come into the wp-content directory, then themes directory and now we’re going to create our new theme. And we do that by first creating a directory. And I’m going to be creating one off of the basic Twentytwenty theme. I’m just going to call it twentytwenty-child. You can theoretically call it anything you want. There’s no worry about naming initially because we’ll hook it in in a different way.

So now that we have the directory created, we want to create a new style dot CSS file. Now when it comes to themes, for parent themes if you’re just creating a theme on your own you need at least three things: a style dot CSS file, a functions dot PHP file and an index dot PHP file. When you’re creating a child theme, all you need to start is a style dot CSS file and a functions dot PHP file. So let’s also create that functions dot PHP file.

Okay so now going back to our style dot CSS file, we’re going to start off with this header. Now this does two things. First off this tells WordPress that this is a theme that can be used. And this line tells WordPress what the theme name is and you can put the description and your name if you want. And then this line tells us what the parent theme is and what WordPress needs to grab for the rest of the styling.

So I’m just going to call it. And again you can call this whatever you want it to. And then my name. And then this is where it’s important that you match what you see here. And then hit save. Now our style dot CSS file is ready to go.

And we should see it here. Yep. Right here. You can also put a screenshot in if you want — screenshot dot PNG — to see something here but you don’t have to.

And then next for our functions.php file, we’ll want to load in our child theme styles. We’re going to load in both the parent theme styling and our own child theme styling. So just do that. And then hit save. And we should be able to come over here and visit our site and there we go. Now we have the parent styling.

So what happens when we want to change a color? So let’s say I want to change — this should be an H2 tag. I want to change the H2 tag to a different color. I’m going to come in here and get this CSS selector. I’m going to come into style dot CSS. H2. I want a color. It’s not proper CSS if you’re a designer or developer out there, but this works for our needs.

I’m going to come back over here. And I reload the page. Tada. It’s a different color. And you can do that for different theme files. So with the Twentytwenty theme, you have different template parts, so if you want to change the content … so I would come into my child theme and create a new folder. And then new file content dot PHP. Paste that code in there. And you know just for the heck of it.

Let’s just add in something like that. Now let’s go to a different page. And there we go. There is our change that we just made. And when we update Twentytwenty, we’re going to be perfectly fine.

There you go. If you’ve followed this video step-by-step, you now have a child theme where you can make all of your changes and you don’t have to worry about a theme update erasing all of them. You can make all of the color, style and template changes to your theme to make sure that your website is just right.

If you have any questions, be sure to leave them down in the comments below. And if you want more WordPress tips and tricks, be sure to subscribe.

And until next time, happy WordPressing!