How to Add New Template Files to a WordPress Child Theme

By Lisa Sabin-Wilson

A WordPress child theme can override existing parent template files, but it can also supply template files that don’t exist in the parent. 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 Eleven theme has a default page template named page.php. This page template removes the sidebar and centers the content on the page.

image0.jpg

Having the content centered like that isn’t a design flaw. The layout was intentionally set up this way to improve readability.

However, some people like to have a full-width layout option that spans the entire width of the body of the site so that they can embed a video, add a forum, or add other content that works well with full width. To add the full-width layout feature to your child theme, simply add a new page template and the necessary styling to the style.css file.

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 page.php file of the parent Twenty Eleven theme to a new file, called fullwidth-page.php, is a good start. After a few customizations, the fullwidth-page.php file looks like this:

<?php
/**
* Template Name: Full width, no sidebar
*/
get_header(); ?>
<div id="primary">
<div id="content" class=”full-width” role="main">
<?php the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
</div><!-- #content →
</div><!-- #primary →
<?php get_footer(); ?>

The key modification is adding class=”full-width” after the <div id=”content” markup. This new, full-width class allows you to style the page template without modifying other site styling in the parent theme.

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:

#content.full-width {
margin: 0;
width: 100%;
}
#content.full-width .entry-header,
#content.full-width .entry-content,
#content.full-width .footer.entry-meta,
#content.full-width #comments-title {
margin: 0 auto;
width: 95%;
}

Switching to the new full-width page template produces this layout.

image1.jpg