If you’re new to WordPress or the WordPress ecosystem — whether it be by being friends with someone who uses it or by attending your first WordPress meetup or WordCamp — there’s a term that will come up that will in all likelihood confuse you.
That term is ‘child theme.’
I’ve taught numerous classes and workshops on WordPress, and as soon as we get to the section on Themes, someone always raises their hand and asks what a child theme is. For someone familiar with WordPress, a child theme makes sense, but for someone new to the wonderful world of WordPress, it is often confusing and frustrating.
This article, my friends, is for those of you not familiar with a child theme — what it does, and when and how to use one.
So What Is a Child Theme Anyway?
A child theme is a theme that inherits the functionality of another theme, called the parent theme. This then allows you to modify or add to the functionality of the parent theme in a safe manner.
We’ll talk more about the safety aspect in the next section on why to use a child theme.
Why You Should Be Using a Child Theme
The easiest explanation for why you should use a child theme is because it allows you to safely update the parent theme (there’s that safety thing I mentioned in the last paragraph).
I know that doesn’t make sense yet, but trust me faithful reader, it will all come together in a glorious light bulb over the head moment before you get to the end of this article.
Another good reason to use a child theme is because it speeds up your development time to make changes (to the parent theme), as there’s no reason to rewrite every line of code. It’s also a very good way to get started if you are just getting your feet wet with WordPress development.
Creating a Child Theme
Whether you take the plugin route or decide it’s time to roll up those sleeves and get good ol’ fashioned code dirty, creating a child theme is easy to do. For those of you wanting to take the plugin route, One-Click Child Theme does the trick, but we are going to be bold and adventurous and do this via code today.
The first thing we want to do is determine which theme we want to modify. I’ve always gone with a rule of thumb that if you want to make more than a half dozen changes to a theme, chances are you are starting out with the wrong theme.
So if you want to make wholesale changes to your theme, you might want to keep looking, if for no other reason than to save yourself time down the road.
For our exercise I am going to make a child theme for the twentytwelve theme that comes with every WordPress installation. It’s a nice, clean theme that plays well for this sort of exercise. So the first thing you need to know is you don’t have to have your theme of choice active, however it must be in your wp-content/themes directory for your child theme to work.
The first thing we need to do is create a folder in the same directory as the rest of your themes. It needs to be at the same level as the rest of your themes, I called mine torque but you can name it whatever you like.
Now inside this folder we needs to create a file called style.css. This is in fact the only file we need to create a child theme but it’s a little different from your normal style sheet.
Creating the Stylesheet for Your Child Theme
Once the folder is created we need the stylesheet file to be added to it. It’s important that it is called style.css and nothing else because WordPress won’t recognize things like ‘myawesomestylesheest.css.’ Now if this was a normal stylesheet you could start adding your different styles and be on your way to CSS nirvana (if such a thing exists), but we have to do a few things first before we get there.
At the very top of our child theme’s stylesheet we need to add the following:
/*
Theme Name: Torque
Theme URI: http://wordpress.org/themes/twentytwelve
Description: Twenty Twelve Child Theme
Author: Your name goes here
Author URI: your web address goes here
Template: twentytwelve
Version: 1.0.0
*/
@import url("../twentytwelve/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
Ok so let’s explain what we have going on here.
Every child theme needs a variation of this at the very top of the style.css file so that WordPress can determine that it is in fact a child theme and establish what the parent theme is.
Let’s go line by line through this section:
Theme Name: This is what you are calling your child theme. It can be anything you like.
Theme URI: This is where the theme files are located.
Description: This is where you can give your child theme a description.
Author: This is where you get to give yourself a pat on the back.
Author URI: This is where you put your website address.
Template: This is very important — it’s where you declare the parent theme.
Version: If it’s ready for prime time, give it the big 1.0 designation.
And then there is the very important last line:
@import url("../twentytwelve/style.css");
This tells WordPress what stylesheet to use as a base for your child theme. This way you don’t have to copy and paste or rewrite the entire stylesheet, you can just make changes to the section you want.
Testing Our Handiwork
Let’s see if we’ve done everything correctly to this point. First, we should go to Appearance > Themes in the dashboard, and we should see the child theme ready for us. IF it’s not there, here are a couple of things to check:
- that you’ve saved the style.css file
- that the parent theme is present in the themes directory (It doesn’t need t be the active theme, it just needs to be present in the directory.)
If we have everything there and the child theme shows on the themes page, we should then activate that theme and check out the magic. Ok there is no magic, cause right now it looks exactly like the parent theme. So let’s make a couple of quick changes to show exactly how it works.
Adding the new CSS
So right below the commented section that says “Theme customization starts here,” let’s add the following line and then save the file:
p {color: orange;}
If you go back and refresh your browser page you’ll see that the text color has in fact changed to orange. We will make one more change to our child theme and that is to change the color of the widget titles in the side bar. Simply add this piece of code, .widget h3{ color:pink;}, to change those boring old widget titles to a lovely shade of pink.
There’s no limit to what you can change as far as the sites CSS is concerned. If for some reason your CSS change isn’t taking effect, it sometimes helps to add !important to the end of the declaration.
If the change we made to the color of the text didn’t work, we would add the important tag like this:
p {color: orange !important;}
This tells the browser this is the declaration that it should be using, forgoing all others. Use this sparingly because you should always remember that with great power comes great responsibility.
Changing a php File
The last thing to show you is what to do when you want to make a change to a php file.
Let’s say, for example we wanted to add a line of text to the header.php file. Instead of making the change in the original file in the parent theme, simply make a copy of the complete file in your child theme then apply your changes. WordPress will automatically use the file in the child theme before the file in the parent theme, and all of your changes will show.
Only do this for files you actually make changes to, so that when it comes time for an update, all the parent files will get the update safely and not affect your child theme. However, if you make copies of all the parent theme files, they won’t get the update applied to theme.
So now you know why, when, and how to create child themes. Congratulations, you can now call yourself a WordPress Developer!
Any questions? Share your questions and thoughts in the comments below!
When not at his day job in the hosting industry, Al teaches WordPress at a Toronto, Ontario college and also does corporate WordPress training. As a freelance web developer, he is always busy building sites on the WordPress platform. All this leaves him very little time to ride his Harley and watch NFL football.
1 Comment