Preparing a Parent Theme

WordPress has made it very 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 words stylesheet and template have been used numerous times in many different 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 meaning 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, then the active theme is both the stylesheet and the template.

Originally, child themes could only replace 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 the parent theme provided the template files. The capabilities of child themes expanded in subsequent versions of WordPress, making the use 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 blog 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 above 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 would be

<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 could work if every child theme copies the reset.css file of the Parent theme, but requiring child themes to add files in order to function isn't good design. The solution is simple, however. Instead of using the stylesheet_directory in the bloginfo call above, 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 will properly load the parent reset.css file.

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