Overwrite WordPress template files in the child theme

Child themes offer different options with which you can customize your parent theme according to your needs. In this tutorial I show how you can overwrite and modify WordPress template files in the child theme.

Customize WordPress Theme with Child Theme

My very first post here on the blog was a step by step guide to creating a child theme . In addition to many tutorials like mine, there are also some plugins that can be used to create a child theme very easily.

But actually creating the child theme is just the beginning. Much more interesting, however, is what options there are to modify the parent theme. Spontaneously I think of overwriting templates and pluggable functions, adding my own functions and using action and filter hooks.

For this reason I would like to start a small series on child themes based on my first tutorial. To start with, let's look at how we can overwrite template files with a child theme.

What are template files?

Template files control how your website is displayed in the frontend. The templates consist of HTML code or generate HTML code using appropriate template functions or the WordPress loop .

A theme usually has several different template files . Each template has a specific task. Some files, such as the templates for header and footer, are used on every page, others are only used under certain conditions.

Important template files are:

  • header.php (represents the header of the theme)
  • footer.php (represents the footer of the theme)
  • home.php (shows the blog index with the last posts)
  • single.php (shows a single blog post)
  • page.php (displays a static page)
  • sidebar.php (representation of the sidebar widgets)

Some templates are called up directly by WordPress using the URL. For example, if the permalink refers to a blog post, archive or static page, the single.php , archive.php and page.php are called for this.

Other template files are loaded from within other templates. The header.php and footer.php are not called by the WordPress core, but are integrated into the other files using get_header () and get_footer () .

You can find a detailed overview of all available template files and an explanation of the template hierarchy in another post by me:

The different template files in a WordPress theme

Why you should only change template files with a child theme

Overwriting template files is always useful if you want to adapt the HTML code for a specific area in your theme. By replacing the template file with your own template in the child theme, you can make modifications without changing the template file in the parent theme.

This has the advantage that your changes will not be lost with theme updates.

During an update, WordPress deletes all theme files, then unpacks the .zip file of the update and virtually reinstalls the theme. All files of the theme are completely replaced; any change to the template is lost.

Your child theme, however, is not affected by the update of the parent theme.

Overwrite WordPress template files in the child theme

All template files can be overwritten with a child theme, regardless of the type.

To overwrite a template file of the parent theme, a file with the same name must be created in the child theme. This means that you can simply copy the original template file from the parent theme and paste it into the child theme.

Example:

You want to make a change for static pages. You therefore copy the page.php from the parent theme and paste it into the child theme so that you get the following file structure:

  • / wp-content
    • / themes
      • / parent-theme
        • page.php
      • / child-theme
        • page.php

The child theme's page.php is then loaded automatically.

This is because WordPress with the child theme activated always checks first whether it can load the requested template from the child theme. Only if the template file is not available there, WordPress loads the template from the parent theme.

If the template file is in a subfolder, you must also create a folder with the same name in your child theme. It is important that the complete path to the template file in the child theme is exactly the same.

Example:

The content-single.php of TwentySixteen is to be adapted in a child theme.

  • / themes
    • / twenty-sixteen
      • / template-parts
        • content-single.php
    • / my-twenty-sixteen-child
      • / template-parts
        • content-single.php

Difference between template and function files

Not all PHP files in the WordPress theme are templates.

In addition to template files, there are also function files. Basically, a WordPress theme with functions.php actually only has a single file for functions. Since it would be very confusing but to grab the functionality of a file, load many themes from the functions.php from another PHP files for functions.

 /* Custom template tags for this theme */ require get_parent_theme_file_path( '/inc/template-tags.php' ); /* Additional features to allow styling of the templates */ require get_parent_theme_file_path( '/inc/template-functions.php' ); /* Customizer additions */ require get_parent_theme_file_path( '/inc/customizer.php' );

Like many other themes, TwentySeventeen has its own / inc folder for additional function files. There you can find, for example, a customizer.php for theme options or template-tags.php for template functions.

In contrast to template files, these functional files are not directly responsible for displaying a specific area in the theme, but only contain a number of functions and classes. Some functions can also output HTML, but the entire file is not a template.

Important to know:
These functional PHP files CANNOT be overwritten in the child theme.

All articles in the series on child themes