WordPress Child Themes – What, Why & How

WordPress has been as successful as it has because of a committed community of users providing free, open-source code, plugins and themes.

Sometimes though, you might find a theme that you really like, but there’s a few changes that you would like to make. The problem is that when you edit the theme files, if your theme ever gets updated, you lose all your changes. Also, as a beginner you can mess about with the child theme as much as you want, without endangering the parent theme. That’s where child themes come in.

What are child themes and why use them?

Child themes build upon an existing theme, without modifying the original theme, so that if the theme ever gets updated, your modifications to the theme are safe, because you’ve created a new theme and the update will only change the original files.

How to create a child theme

To create a child theme, you need to start by creating a new folder under your wp-content/themes folder. You can call it whatever you choose.

The way a child theme works is that WordPress will search the child theme folder for the suitable files to create the display, and if it doesn’t find them, it will look to the parent theme folder.

So if my child theme consists of just style.css and single.php, it will use both files to display single blog posts. However, to display a page, it will use the stylesheet in the child theme and page.php from the parent theme, since the child theme does not have its own page.php.

At a very minimum, all child themes have to include style.css and the first few lines of your style.css file must be correctly formatted, to let WordPress know that you’ve created a child theme and to let WordPress know what theme is the parent.

Defining a child theme

Use the following code to tell WordPress the required information about your child theme. Remember, these are the first lines of your style.css file in your child theme folder:

/*
Theme Name: Child Theme Name
Description: Description of your Child Theme
Author: Your name here
Template: folder
*/

Lines 2, 3 & 4 are all fairly arbitrary and you can complete them as you wish. However, the Template declaration (line 5) is very important – you must enter the folder name (under wp-content/themes) of your parent theme. Be aware that this is case sensitive. This is how WordPress knows where to look for the template files if they’re not found in the child theme folder.

Sorting out the stylesheet

If you want to rewrite the entire style.css file, then you’d continue past this point as if this were a normal CSS file. However, if you just want to change a few declarations in the stylesheet, you need to import the parent CSS file, so that all of the parent CSS rules are defined and then you can build on them with your own declaration. In order to do this, you need to use the @import rule. You have to make sure this is the first declaration after the lines we just created above, so for example your stylesheet would now look something like this:

/*
Theme Name: Child Theme Name
Description: Description of your Child Theme
Author: Your name here
Template: folder
*/

@import url("../parentthemefolder/style.css");

Just change ‘parentthemefolder’ to the folder name of your parent theme. Now you’re able to make changes by making declaration after the import rule. So for example, your stylesheet might start to look like:

/*
Theme Name: Child Theme Name
Description: Description of your Child Theme
Author: Your name here
Template: folder
*/

@import url("../parentthemefolder/style.css");

h1 a, a:hover, a:visited { color: #ff6600; }

What about functions.php?

functions.php, which allows you to add PHP functions to your theme works slightly differently than any other file when it comes to child themes. In this instance, the functions already declared in the parent theme’s functions.php will still be active and you can simply supplement them by creating your own functions in your child theme’s functions.php, so there’s no need to copy everything from the original functions.php – just write any additional rules in a new functions.php file in your child theme.

All the other theme files

You are free to add other theme files such as archive.php, index.php and attachment.php to your child theme at your will. Where one of these files exists in the child theme, the parent theme file will automatically be overridden.

You can also create more specific templates in your child theme. For example, if your parent theme includes archive.php, but you want a different template for the category with an ID of 4, you can create category-4.php in your child theme and the archives for category 4 will be displayed using this file. I make this distinction because WordPress will use this file, even though a file with the same name does not exist in the parent theme.

In short, WordPress will use its standard rules of hierarchy for finding template files within your child theme to correctly display the requested view and if it doesn’t find an appropriate file, it will use the same rules of hierarchy to find a suitable theme file in the parent theme.

Have you attempted to create your own child theme? Have you ever downloaded a child theme? How did you find the learning curve? Please share your experiences.