Modify WordPress Theme Structure with Child Themes - dummies

Modify WordPress Theme Structure with Child Themes

By Lisa Sabin-Wilson

Child themes are powerful elements in WordPress. Although every child theme overrides the parent theme’s style.css file, the child theme can override the parent theme’s template files, too. And child themes aren’t limited to just overriding template files; when needed, child themes 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 in your web browser. Examples of different views are:

  • Home: The home page of your website

  • Category archive: A page that displays the archives within a particular category

  • Individual post: A page that displays a single post from your blog

  • Page content: A page that displays the content of a static page from your site

Some examples of common template files are index.php, archive.php, single.php, page.php, attachment.php, and search.php.

You may 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. Overriding is the process of replacing the original parent template file.

Although overriding every single one of the theme’s template files can defeat the purpose of using a child theme — because if you’re going to rewrite every single template file to make it different from the parent theme, you may as well create an entirely new theme that does not depend on a parent theme — sometimes, producing a desired result makes tweaking one or two of the template files 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 you copy the file, you can customize it as needed, and the changes will reflect in the child theme.

A good example of a template file that can you can typically override is the footer.php file. Customizing the footer enables you to add site-specific branding.

How to add 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 Thirteen theme does not have a One Column, No Sidebar page template because with Twenty Thirteen, all you need to do is omit widgets from the Secondary Widget Area, and WordPress removes the right sidebar.

But what if you’re using the Secondary Widget Area throughout your site and you want to omit the sidebar on just one page to display it full width? In a child theme, you can create a new page template, which still uses the styles and functions from the parent, but introduces a new layout in the child theme, in this case, a page template that omits the sidebar.


This isn’t a design flaw. The layout was intentionally set up this way to make it easy for users to include, or not include, a right sidebar on their sites. To add this 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 theme to a new page-full.php file is a good start. After a few customizations, the page-full.php file looks like this:

 * Template Name: Full Width
 * The template for displaying full width.
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header →
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
</div><!-- .entry-content →
<footer class="entry-meta">
<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta →
</article><!-- #post →
<?php comments_template(); ?>
<?php endwhile; ?>
</div><!-- #content →
</div><!-- #primary →
<?php get_footer(); ?>

The key modification here is the removal of the get_sidebar(); code, so the template does not call the sidebar widgets when this page template is assigned to a page on the site.

You need to make a small styling change in the child theme stylesheet to ensure the content of the full-width page spans the width of the site. By looking in the parent stylesheet, you can see that the content area width is defined by these lines:

.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
 max-width: 1040px;
 padding: 0 376px 0 60px;

The padding in that style designates the right-side padding at 376px. You need to reduce the right side padding to allow for the content to extend farther to the right side of the browser window. Simply add the following lines after the @import rule in the child theme’s style.css file to reduce the right side padding to 60px:


.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
 max-width: 1040px;
 padding: 0 60px 0 60px;