How to Modify Theme Structure with Child Themes in WordPress Twenty Fifteen - dummies

How to Modify Theme Structure with Child Themes in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

You can use a child theme to modify the stylesheet of an existing theme in WordPress. A talented CSS developer can use this technique to create a variety of layouts and designs.

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, 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.

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.

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.

The default page template in Twenty Fifteen.
The default page template in Twenty Fifteen.

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 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.

An easy way to create a new theme page template is to copy an existing one and modify it as needed.

Removing template files

You may be wondering why you’d want to remove a parent’s template file. Unfortunately, the Twenty Fifteen theme doesn’t provide a good example of why you’d want to do this. Therefore, for future reference, you must use your imagination a bit here to understand the mechanics of removing a file from the parent theme.

Imagine that you’re creating a child theme built off an Example Parent parent theme. Example Parent is well designed, and the child theme looks and works exactly the way you want it to, but you have a problem.

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

You can’t remove the home.php file from Example Parent without modifying the parent theme (which you never want to do), 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 would be a good approach. Although this would work, there’s 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 file is all you need 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, it is used. If not, the parent index.php file is used.

This produces the same result that removing the parent theme’s home.php file would have.

Modifying the theme functions file

Like template files, child themes can also provide a theme functions file, or a functions.php file. Unlike template files, the functions.php file 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, WordPress runs both the parent and child functions.php files simultaneously. The child theme’s functions.php file runs first, and the parent theme’s functions.php file runs second. This is intentional because the child theme can replace functions defined in the parent theme’s functions.php file.

However, this works only if the functions are set up to allow this. The Twenty Fifteen functions.php file defines a twentyfifteen_setup function. 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:

function twentyfifteen_setup()

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:

function twentyfifteen_setup() {
set_post_thumbnail_size( 100, 100, true );

The result of this change is that the child theme adds support for a new post thumbnail size of 100 x 100 pixels.