How to Create a Child Theme in WordPress

By Lisa Sabin-Wilson

As do regular WordPress themes, a child theme needs to reside in a directory inside the /wp-content/themes directory. The first step to creating a child theme is to add the directory that will hold it. For this example, create a new directory called twentyfourteen-child inside the /wp-content/themes directory.

To register the twentyfourteen-child directory as a theme and to make it a child of the Twenty Fourteen theme, create a style.css file and add the appropriate theme headers. To do so, type the following code into your favorite code or plain-text editor, such as Notepad for the PC or TextMate for the Mac, and save the file as style.css:

/*
Theme Name: TwentyFourteen Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyfourteen
*/

Typically, you’ll find the following headers in the stylesheet (style.css) of a WordPress theme:

  • Theme Name: The theme user sees this name on the WordPress Dashboard.

  • Description: This header provides the user with any additional information about the theme. Currently, it appears only on the Themes page.

  • Author: This header lists one or more theme authors. Currently, it is shown only in the Themes page.

  • Version: The version number is very useful for keeping track of outdated versions of the theme. It is always a good idea to update the version number when modifying a theme.

  • Template: This header changes a theme into a child theme. The value of this header tells WordPress the directory name of the parent theme. Because our child theme uses Twenty Fourteen as the parent, our style.css needs to have a Template header with a value of twentyfourteen (the directory name of the Twenty Fourteen theme).

All of the information provided in the stylesheet headers gets pulled into the Themes page in your Dashboard — you can see them by clicking the Theme Details button when you hover over the theme screenshot. Now activate the new TwentyFourteen Child theme as your active theme.

You should see a site layout that looks something like this.

image0.jpg

The new theme doesn’t look quite right. The problem is that the new child theme replaced the style.css file of the parent theme, yet the new child theme’s style.css file is empty. You could just copy and paste the contents of the parent theme’s style.css file, but that method would waste some of the potential of child themes.