Get Started with WordPress Child Themes

Our last few videos have covered introductions to a few varieties of programming topics, but this one here involves no programming skills at all! If you’re looking to freshen up your blog, put your HTML and CSS skills to the test and build on an existing blog theme.

There would seem to be an infinite number of WordPress themes available online. Finding the perfect theme can be a daunting and time consuming task. Why not just choose a theme you like and make a few tweaks to it? WordPress Child Themes allow you to make changes to both the style and functionality of a chosen parent theme.

Tune in below as Harley walks us through how to get started with WP Child Themes. Super simple and effective! Perhaps too simple?

 

Jess: I’m here with Harley Alexander, who is a WordPress guru at SitePoint. Harley is going to tell us all about child themes today. Hello, Harley.

Harley: What’s up?

Jess: First things first. Can you tell us what a WordPress child theme is?

Harley: Officially, a WordPress child theme is the recommended way to modify, to make modifications to an existing theme. So, say there is a theme you quite like, you want to make some small changes, a child theme is the way to do that.

Jess: And why do they call it a child theme?

Harley: There are two types of themes. There is a child theme and a parent theme, clearly. The child theme basically inherits everything from a parent, just like children do from parents. So it’s a great place to start, and then build on top of.

Jess: That makes sense. So would you choose a child theme over a parent theme, then?

Harley: Well, it’s a great way to not actually have to touch any code from the theme that already exists, and to make really small modifications or even add to it, build on the functionality. There’s quite a lot you can do with child themes.

Jess: And who would be interested in using child themes, then?

Harley: Child themes are a great place to start if you don’t really know much about making WordPress themes. So if you don’t really want to start from the very beginning, you can have a great theme already there. For example, 2011, the default WordPress theme, is a great parent theme to start with. And you can just build on top of it really easily, and you don’t really need to learn many skills as well.

Jess: So, what kind of modifications can you make with a WordPress child theme, then?

Harley: There are probably two major modifications that you can do, or types of modification. There are visual changes, so changes to the style, font, color, sizing, that kind of thing. There are also functionality modifications, so you can change the way a specific function from the parent theme works, or add on top of it, and include different layout parts as well.

Jess: And what sort of background do you need to start working with these themes?

Harley: At its most basic, a child theme is just a stylesheet. So, if you only know CSS, then you are pretty well equipped to start making your first child theme.

Jess: Are there any other sort of skills that would be helpful, though, with using these?

Harley: Absolutely. On top of CSS, it is really good to have basic HTML knowledge, it’s a given. And a solid understanding of WordPress template tags, hooks, and filters, is also great. And PHP definitely comes in handy.

Jess: So where do I get started, if I want to learn more?

Harley: If you did a basic Google search online, for “how to get started with child themes”, you’d find a plethora of articles that you could learn from. SitePoint’s actually also got a book called “How to Build Your Own Wicked WordPress Theme.”

Jess: So do you want to give us a demo of how to create a child theme, then?

Harley: Absolutely. Let’s jump over to my screen.

Jess: Let’s do it!

Harley: Here I have a fresh install of WordPress that is using the default Twenty-Eleven theme, and Twnety-Eleven is actually going to be our parent theme for today. So, I’m going to jump over into our themes folder, and create a new folder and call it “child theme”. And then within that, I’m going to create a stylesheet, which is called “style.css”.

And as with anything, we need to insert the metadata for that, so I’m going to chuck that in, and we’ll call it “child theme”. None of that’s really important right now. But we do need to add one very important metatag, which is “template”. And in the template you need to specify the parent theme that you are going to be using. So, we’re going to be using “Twenty-Eleven”, just like that.

Cool, so, if we head back to here, and head to the themes page in WordPress admin, our new child theme will show up. Boom, there it is. Brilliant, so we’ll head back home, and you’ll notice that it actually looks pretty bad. And that’s because with any child theme, you need to import the parent theme’s stylesheet in order to inherit it all. So I’m going to go ahead and throw in an import
rule, and we’re going to go up a directory into “2011” and then “style.css”. Brilliant. So now, if we head back to our page and refresh, beautiful, it looks like Twenty-Eleven.

So, the next thing we really want to do is just change the background color of this header. I’m going to make it the same color as this border along the top, just for simplicity’s sake. So in our stylesheet we’ll add a new rule, for “branding”, which is this top area up here. And we’re just going to go, background color is triple B.

All right, so if we save that, and then refresh, our background color is triple B up here. So now you can see, we’ve pretty much just got a brand new theme. Not too different to 2011,
but it is different, simply through using “style.css”. You can do pretty much anything, including adding functionality with PHP, but I’m not going to get into that now. I’m just going to fix up this search box, here.

So I want to add a white background to “#s”. So I’m going to go back here, add in another rule, color, make it triple F, save it, and then refresh. It didn’t work. Why is that? Maybe, if we give it importance, save it, boom, there we go. So yeah, it’s really easy to get started making your first child theme. WordPress.org recommends that you use Twenty-Eleven as your first parent for your first child theme, just because it’s got everything you need. You can go as far as you want with them.

Jess: That seems pretty simple to me. Thank you so much for your time, Harley.

This has been Jess Genevieve Brown with Harley Alexander for Learnable.com.