Modifying Theme Structure with Child Themes in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

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 themes can also supply their own template files. Template files are PHP files that WordPress runs to render different views of your site.

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. This process of replacing the original parent template file 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 child theme reflects the changes.

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. This option can open up possibilities for your designs.

For example, this technique proves most valuable with page templates. The Twenty Fifteen theme has a default page template: page.php. As you might expect, this page template creates a single-page layout for the content and has a sidebar on the left with the content on the right.

Page template in Twenty Fifteen.

Page template in Twenty Fifteen.

The layout was intentionally set up this way to create a page template that looks just like the rest of the site, with the sidebar on the left and the content on the right. If you want to customize that template and override what the Twenty Fifteen theme currently has available, simply create a new page template with the same file name as the one you are replacing (in this case, page.php) and add the modifications styling to that file, and to the style.css file.

WordPress will use the page.php template file in your child theme by default, completely ignoring the one that exists in the Twenty Fifteen parent theme folder.

Removing template files

You may be asking why you would want to remove a parent’s template file. That’s a good question. 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.

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 works only if the functions are set up to allow this.

The Twenty Fifteen functions.php file defines a function called twentyfifteen_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( ‘twentyfifteen_setup’ ) ):
function twentyfifteen_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 Twenty Fifteen Child theme, you can see how modifying this function affects the theme. Add a new twentyfifteen_setup function that adds post thumbnails support to the Twenty Fifteen Child theme’s functions.php file:

&lt;?php
function twentyfifteen_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, and internationalization and location.