How to Prepare a Parent Theme in WordPress

By Lisa Sabin-Wilson

WordPress makes it easy for theme developers to make parent themes. WordPress does most of the hard work; however, a theme developer must follow some rules for a parent theme to function properly.

The terms stylesheet and template have been used numerous times in many contexts. Typically, stylesheet refers to a CSS file in a theme, and template refers to a template file in the theme. However, these words also have specific meanings when working with parent and child themes. You must understand the difference between a stylesheet and a template when working with parent and child themes.

In WordPress, the active theme is the stylesheet, and the active theme’s parent is the template. If the theme doesn’t have a parent, the active theme is both the stylesheet and the template.

Originally, child themes could replace only the style.css file of a theme. The parent provided all the template files and functions.php code. Thus, the child theme provided style and design, whereas the parent theme provided the template files. The capabilities of child themes expanded in future versions of WordPress, making the usage of these terms for parent and child themes somewhat confusing.

Imagine two themes: parent and child. The following code is in the parent theme’s header.php file and loads an additional stylesheet provided by the theme:

<link type="text/css" rel="stylesheet" media="all" href="<?php
bloginfo('stylesheet_directory') ?>/reset.css" />

The bloginfo() function prints information about the site configuration or settings. This example uses the function to print the URL location of the stylesheet directory. The site is hosted at http://example.com, and the parent is the active theme. The preceding code produces the following output:

<link type="text/css" rel="stylesheet" media="all"
href="http://example.com/wp-content/themes/Parent/reset.css" />

If the child theme is activated, the output is

<link type="text/css" rel="stylesheet" media="all"
href="http://example.com/wp-content/themes/Child/reset.css" />

The location now refers to the reset.css file in the child theme. This can work if every child theme copies the reset.css file of the parent theme, but requiring child themes to add files to function isn’t good design. The solution is simple: Rather than using the stylesheet_directory() in the bloginfo() call earlier, use template_directory(). The code looks like this:

<link type="text/css" rel="stylesheet" media="all" href="<?php
bloginfo('template_directory') ?>/reset.css" />

Now, all child themes properly load the parent reset.css file.

When developing, use template_directory in stand-alone parent themes and use stylesheet_directory in child themes.