Child Theme File Hierarchy

Child themes must include at least a style.css file. All other files are optional, even index.php. If a required file is not present in the child theme directory, WordPress will look for the file in the parent theme directory. In other words, you need to create files only when you want to override the parent theme's display. To demonstrate how child themes work, I'll go over my own theme, Cub Reporter, a child of the Journalist theme by Lucian E. Marin.

The child theme's comment block requires one additional line: the Template. This should be the name of the directory containing your parent theme, as shown in Listing 6-41.

Listing 6-41. Importing the parent theme styles /*

Theme Name: Cub Reporter Theme URI:

Description: A child theme for Journalist, by <a href="">Lucian E. Marin</a>

Author: Stephanie Leary Author URI: Template: journalist Version: 1.0 License: GPL

@import url(../journalist/style.css);

Child themes' stylesheets take advantage of the cascade feature of CSS. The first line of your child theme, after the required comment block, should import the parent theme's stylesheet. If the parent theme contains multiple stylesheets, you should include them all, unless you plan to replace them with your own.

The beauty of the cascade is that any duplicate style declarations occurring later in the stylesheet will override the original declaration. In a child theme, that means that once you've imported the parent styles, you can modify them easily by duplicating the selectors and replacing the style declarations. For Cub Reporter, I wanted to change just a few things about Journalist:

• Use the black bubble style for the comment count instead of the site description.

• Add a background image.

• Move the title outside the white area.

• Add unique IDs to the sidebar widgets.

• Add styles for tables and definition lists.

• Change the image caption display.

Figure 6-21 shows the original Journalist theme, and Figure 6-22 shows the Cub Reporter child theme. These changes took just a few lines of CSS.

Figure 6-21. The Journalist theme

1 »Eliig

1 1' J 1+ i^lmpv'twriprfiiy

LÛZJI C llQ- CùftqL"


Figure 6-22. The Cub Reporter theme, a child of Journalist

Aside from style.css, which is required, you may replace as many of the parent theme's template files as you like—or none at all, if your changes can be accomplished with CSS alone. Be careful with the theme functions file! If you include one in the child theme, both functions.php files will be executed, so be careful not to duplicate any functions from the parent theme, or you'll see fatal errors. If the functions in the parent theme have been wrapped in if (function_exists(...)) statements, you can safely replace them with your own, since your theme functions file will be called first. For example, Twenty Ten's header styles function can be overridden. Listing 6-42 shows the original function and a possible replacement, which uses a more accessible method of hiding the site title and description.

Listing 6-42. Replacing a parent theme's functions

// in Twenty Ten's functions.php if ( ! function_exists( 'twentyten_admin_header_style' ) ) :

function twentyten_admin_header_style() { ?>

<style type="text/css"> #headimg {

height: <?php echo HEADER_IMAGE_HEIGHT; ?>px; width: <?php echo HEADER_IMAGE_WIDTH; ?>px;

#headimg hi, #headimg #desc { display: none;


// in your child theme's functions.php function twentyten_admin_header_style() { ?>

<style type="text/css"> #headimg {

height: <?php echo HEADER_IMAGE_HEIGHT; ?>px; width: <?php echo HEADER_IMAGE_WIDTH; ?>px;

#headimg hi, #headimg #desc { text-indent: -99999px;

A typical child theme might contain three files: style.css, archive.php, and functions.php. The style and functions files from both themes are used. The archive file in the child theme replaces the parent theme's archive file. All the other files not present in the child theme are filled in using the files from the parent theme. In summary:

• The style.css files in both themes will be used.

• If the child theme contains a functions.php file, both it and the parent theme's functions file will be used.

• For all other templates, if the file exists in the child theme, it will be used. Otherwise, the corresponding file in the parent theme will be used instead.

The bloginfo() function has four possible arguments that will print URLs to the two theme directories. Listing 6-43 shows the four possibilities and their results.

Listing 6-43. Getting URLs for parent and child theme stylesheets and directories

Child themes are not, as of this writing, accepted into the listing on WordPress Extend. You can download Cub Reporter from my site,

If you accidentally introduce a syntax or fatal error in one of your template files, you'll probably see the dreaded white screen of death when you visit your home page. In some cases, even the admin screens will go blank. The best way to figure out what happened is to turn on debugging (as you saw back in Chapter 2) by adding define('WP_DEBUG', true); to your wp-config.php file. You can also check your PHP error log. Look for the last error shown and try to correct it.

If your theme has gone horribly wrong and you just want to switch back to another one, but you can't access the admin screens to change it, don't panic. Simply delete or rename your active theme's directory. When WordPress can't find it, it will revert to the default theme.

In this chapter, I've shown you the basic structure of a theme file, the Loop, and all the optional files that can make up a theme. I've gone over basic template tags, conditional tags, and the various tags used to include other files. You've learned how to enable widgets and navigation menus, and you've seen the older methods used to create menus from page and category lists. I've shown you how to create a child theme.

In the next chapter, I'll show you how to dissect and replicate the Loop to create even more complex themes. I'll also show you how to access post data outside the Loop, and I'll show you how to create theme option screens using the theme functions file.

<?php bloginfo(istylesheet_directory');



// Child theme directory // Child theme stylesheet // Parent theme directory // Parent theme stylesheet

Was this article helpful?

0 0

Post a comment