What is a WordPress child theme?

Excellent question Grasshopper, a child theme is used in conjunction with your main theme. At the most basic level, your WordPress child theme is a theme where you can make changes to the CSS or even PHP files in your theme without actually changing the files in your theme!

How does a child theme work?

A WordPress child theme is a secondary theme that is uploaded to be used in conjunction with your primary theme. Most premium WordPress themes, like those from ThemeForest.net come with child themes prebuilt for you in the folders you download. It’s as simple as uploading the two themes to you WordPress installation and then activating the child theme. The child theme basically succeeds the main theme, so any changes you make to the style.css file in the child theme are used instead of the rules in the parent theme. This works the same for PHP files, so if you upload a functions.php file to you child theme, you can rewrite or add functions to the theme.

Why should I use a child theme?

The benefits of using a child theme are two-fold. The major reason to use a child theme with WordPress is that it makes updating you theme much easier. Let’s say you’re using Super Awesome Theme version 1.0 and you’ve customized the css quite a bit in the style.css file to suit your needs. When the developers of Super Awesome Theme release version 1.5 and you upload it to WordPress it will overwrite all of your customized css and you will have to redo all of the work. Maybe you already know that, and the solution you are using is to copy your customized css to the new theme, this is still very time consuming! If you use a child theme, you don’t have to worry about loosing customizations because they are in a different directory then the main theme. Since the child theme will always import the parent theme files, you can update until you’re red in the face without losing any changes!

The second smaller reason to use a child theme is that it makes customizing the theme easier. You don’t have to search through thousands of lines of code to find the one setting to change. All you have to do is add the line of code to the child theme style.css file, and your changes will overwrite the parent theme.

My theme doesn't have a child theme, what should I do?

Worry not Grasshopper, child themes are incredibly easy to make. Let’s say you are using Super Awesome Theme again and it comes in a folder called super-awesome-theme. All you need to do is create a new folder called super-awesome-theme-child, in this folder we will have one file called style.css. You can create this file from scratch, or you can copy the style.css file from the parent theme. If you copy from the parent theme, make sure to remove all CSS entries. The only thing we need to do is tweak the header entry on the child theme CSS file. Open up the child theme style.css file and change the following parts:

[table id=10 /]

The final critical step in the child theme creation is to add the @import url() statement. This should point to you parent theme CSS file. For our Super Awesome Theme it will look like the following: @import url(“../super-awesome-theme/style.css”);

Overall, your child theme css file should look something like this:

The Ultimate Managed Hosting Platform
The Ultimate Managed Hosting Platform

Once you’ve got everything set up all you have to do is send the entire folder to you theme directory in WordPress via FTP or pack it up in a zip file and install it like any other theme, then activate. If you want to look at more documentation on child theme, view the WordPress child theme codex online. You can always give us a shout via the contact page, or call us at (203) 794-4045 for help with your child theme!