Modifying Theme Structure with Child Themes

The preceding section showed how to use a child theme to modify the stylesheet of an existing theme. This is tremendously powerful. A talented CSS developer can use this technique to create an amazing variety of layouts and designs.

However, this is just the beginning of the power of child themes. Although every child theme overrides the parent theme's style.css file, the child theme can override the parent theme's template files, too. However, child themes aren't limited to just overriding template files; when needed, child theme's can also supply their own template files.

Template files are PHP files that WordPress runs to render different views of the site. A site view is the type of content being looked at. Examples of different views are home, category archive, individual post, and page content.

Some examples of common template files are index.php, archive.php, single.php, page.php, attachment.php, and search.php. (You can read more about available template files, including how to use them, in Chapter 3 of this minibook.)

You might wonder what purpose modifying template files of a parent theme serves. Although modifying the stylesheet of a parent theme can allow for some very powerful control over the design, it can't add new content, modify the underlying site structure, or change how the theme functions. To get that level of control, you need to modify the template files.

Overriding parent template files

When both the child theme and parent theme supply the same template file, the child theme file is used. It is this process of replacing the original parent template file that is referred to as overriding.

Although overriding each of the theme's template files can defeat the purpose of using a child theme—because updates to those template files won't enhance the child theme—sometimes, producing a needed result makes doing so necessary.

The easiest way to customize a specific template file in a child theme is to copy the template file from the parent theme folder to the child theme folder. After the file is copied, it can be customized as needed, and the changes will reflect in the child theme.

A good example of a template file that can be overridden is the footer.php file. Customizing the footer allows for adding site-specific branding.

Adding new template files

A child theme can override existing parent template files, but it can supply template files that don't exist in the parent, too. Although you may never need your child themes to do this, this option can open possibilities for your designs.

For example, this technique proves most valuable with page templates. The Twenty Ten theme has a page template named One Column, No Sidebar. Although you might expect this page template to create a full-width layout for the content, it doesn't. Instead, it simply removes the sidebar and centers the content, as shown in Figure 5-9.

This isn't a design flaw. The layout was intentionally set up this way to improve readability. However, we like to have a full-width layout option so that we can embed a video, add a forum, or add other content that works well with full width. To add this feature to your child theme, simply add a new page template and the necessary styling to the style.css file.

Figure 5-9: The One Column, No Sidebar page template in Twenty Ten.

A good way to create a new theme page template is to copy an existing one and modify it as needed. In this case, copying the onecolumn-page.php file of the parent theme to a new file, called fullwidth-page.php, is a good start. After a few customizations, the fullwidget-page.php file looks like this:

<?php
/**
* Template Name: Full width, no sidebar
*/
get_header(); ?>
<div id="container" class="full-width">
<div id="content_50_chapter-05" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class();
?>>
<h1 class="entry-title"><?php the_title();
?></h1>
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div
class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' =>
'</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten'
), '<span class="edit-link">', '</span>" ); ?>

</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>

The key modification is changing the one-column class in the div with an id of container to the full-width class. This new class allows the page template to be styled without modifying other site styling.

The styling change to make this work is quick and easy. Simply add the following lines after the @import rule in the child theme's style.css file:

.full-width #content {
margin-right: 20px;
}

Switching to the new Full Width, No Sidebar page template produces the layout shown in Figure 5-10.

Figure 5-10: The new Full Width, No Sidebar page template.

Removing template files

You may be asking why you would want to remove a parent's template file. That's a good question. Unfortunately, the Twenty Ten theme doesn't provide a good example of why you would want to do this. Therefore, you must use your imagination a bit.

Imagine that you're creating a child theme built off a parent theme called Example Parent. Example Parent is well designed, and a great child theme was quickly built off it. The child theme looks and works exactly the way you want it to, but there's a problem.

The Example Parent theme has a home.php template file that provides a highly customized non-blog home page. This works very well, but it isn't what you want for the site. You want a standard blog home page. If the home.php file didn't exist in Example Parent, everything would work perfectly.

There isn't a way to remove the home.php file from Example Parent without modifying the theme, so you have to use a trick. Instead of removing the file, override the home.php file and have it emulate index.php.

You may think that simply copying and pasting the Example Parent index.php code into the child theme's home.php file is a good approach. Although this works, there is a better way: You can tell WordPress to run the index.php file so that changes to index.php are respected. This single line of code inside the child theme's home.php is all that is needed to replace home.php with index.php:

<?php locate_template( array( 'index.php' ), true ); ?>

The locate_template function does a bit of magic. If the child theme supplies an index.php file, then it is used. If not, then the parent index.php file is used.

This produces the same result that removing the parent theme's home.php file would have. The home.php code is ignored and the changes to index.php are respected.

Modifying the functions.php file

Like template files, child themes can provide a Theme Functions template, or functions.php file. Unlike template files, the functions.php of a child theme does not override the file of the parent theme.

When a parent theme and a child theme each have a functions.php file, both the parent and child functions.php files run. The child theme's functions.php file runs first and then the parent theme's functions.php file runs. This is intentional because it allows the child theme to replace functions defined in the parent theme. However, this only works if the functions are set up to allow this.

The Twenty Ten functions.php file defines a function called twentyten_setup. This function handles the configuration of many theme options and activates some additional features. Child themes can replace this function to change the default configuration and features of the theme, too.

The following lines of code summarize how the functions.php file allows this to happen:

if ( ! function_exists( 'twentyten_setup' ) ):
function twentyten_setup() {
// removed code
}
endif;

Wrapping the function declaration in the if statement protects the site from breaking in the event of a code conflict and allows a child theme to define its own version of the function.

In the TwentyTen Child theme, you can see how modifying this function affects the theme. Add a new twentyten_setup function that adds post thumbnails support to the TwentyTen Child theme's functions.php file.

<?php
function twentyten_setup() {
add_theme_support( 'post-thumbnails' );
}

The result of this change is the child theme no longer supports other special WordPress features, such as custom editor styling, automatic feed link generation, internationalization and location, and so on.

The take-away from this example is that a child theme can provide its own custom version of the function because the parent theme wraps the function declaration in an if block that checks for the function first.