What is a child theme?
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
Why use a child theme?
There are a few reasons why you would want to use a child theme:
- If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
- Using a child theme can speed up development time.
- Using a child theme is a great way to learn about WordPress theme development.
How do I make one?
Step 1: Create a new folder
The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required, especially if you're creating a theme for public use) that the name of your child theme directory is appended with '-child'. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors.
In the screenshot above we have called our child theme 'twentysixteen-child', indicating that the parent theme is the Twenty Sixteen theme.
Step 2: Create your child theme's stylesheet
The next step is to create your child theme's stylesheet (style.css) inside of the
twentysixteen-child folder. At the top of your stylesheet, you must include the following comments (the stylesheet header):
/* Theme Name: Twenty Sixteen Child Template: twentysixteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twenty-sixteen-child */
A couple things to note:
- The Template line (second line) corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Sixteen theme, so the Template will be
twentysixteen. You may be working with a different theme, so adjust accordingly.
- The only required child theme file is style.css.
Step 3: Import the parent stylesheet
After the stylesheet header, add an import statement to import the parent theme's stylesheet:
/* ... Text Domain: twenty-sixteen-child */ @import url('../twentysixteen/style.css');
Once you have done, this, you may override all of the styles on the lines below the import statement.
Step 4: Activate your child theme
When you're done, browse to the Themes section of your WordPress admin panel, and activate the child theme.
What else can I do with a child theme?
You can modify more than the stylesheet using child themes. You can also create custom templates, and override the way the existing templates look. To override any template, you can simply:
- copy it from the parent theme directory,
- paste it into the child theme directory,
- and edit the child version of the PHP file to add / remove content
A list of the common templates and what they do can be found in the templates section of this eBook.