How To Create A Child Theme

Creating a child theme is very easy. If you like, you can skip below and start out by copying my code.

To create a child theme for the particular theme your are working with, you will need to do the following steps:

  1. Create a theme directory in your WordPress install
  2. Create a stylesheet with information about your child theme
  3. Pull in the styles of your parent theme

Once these steps are completed you can activate your child theme and your website will look exactly the same as before, but it will be using your child theme.

So let’s go through the above steps in detail.

For this example, I will be creating a child theme for the Twenty Seventeen default theme.

1. First, go to your theme directory and create a folder for your new theme. You may name it anything you’d like. For clarity’s sake, I will name my theme twentyseveteen-child.

2. The next step is to create a stylesheet file. This must be named style.css. Copy and paste the following code into the file you’ve just created:

 

 

The two necessary items in the code above are the lines starting with “Theme Name” and “Template.” The theme name tells WordPress what the name of your theme is, and this is displayed in the theme selector. The template tells WordPress which theme it should consider as the parent theme. Most of the others are self-explanatory, with the exception of the text domain and the tags. The text domain is used for translating strings. The text domain should be unique for your theme and should be used whenever you use translation functions. The tags section is a list of tags that are used by the WordPress Theme Repository. For this example I looked at the style.css file of the parent theme and simply copy-pasted the tags from there.

3. At this point your child theme works just fine. If you activate it and reload the page all your content will be there but, it will have no styling information. I mentioned before that WordPress first looks for functionality in the child theme and if it isn’t present it falls back on the parent theme.

In our case we do have a stylesheet, so WordPress figures it shouldn’t load the parent file’s. To make sure we load the parent file’s stylesheet we will need to enqueue it. This can be done in the theme’s functions.php file, so go ahead and create that file now. In this file, copy-paste the following code:

 

 

If you have no idea about PHP and you just want to change some styles, don’t worry about why this works. Feel free to go into your stylesheet file now and start making your changes. If you would like to learn more about enqueueing, WPMU DEV has written an excellent post on Adding Scripts and Styles to WordPress the Right Way With Enqueueing.

Child Theme Mechanics

So how does a child theme actually work? Child themes work on a file-level. When a file is used during the process of loading a theme it checks if it is present in the child theme. If it is, the content of that file is used. If it isn’t, the same file in the parent theme is used.

There is one exception to this rule, the theme’s functions file. The functions.php file in both the parent and the child theme is loaded. If the child theme’s functions replaced the parents you would either have a malfunctioning site, or you would need to copy-paste the entire contents of the parent theme’s function file into the child theme’s which would sort of defeat the purpose of extending a theme.

The workflow when modifying functionality is the following. If you want to make changes to the header, copy-paste the parent theme’s header.php file into your child theme. Edit the file to your heart’s content, save it and enjoy the fruits of your labour.

Download Twenty Seventeen Theme