Adding a New Page Template to your Child Theme
One of the great things about setting up a child theme is that you can create your own custom page templates that are resilient to parent theme updates.
In this tutorial, I'm going to show you the steps to create a new page template in your child theme. We're going to take a Performag page template called "Landing Page", change the name and make some adjustments.
The same principles shown in this tutorial applies to all our themes.
Step 1 - Copy a Page Template from the Parent Theme into your Child Theme
There are two ways of going about this. The first way is to build a page template from scratch and the second way is to simply copy and existing page that closely matches what you are trying to achieve and modifying it.
Given that we are going to modify an existing template, the first step is to locate the template and copy it into the child theme folder.
All page templates are located directly inside the parent theme folder. For example the following is a page template:-
You can tell when a file is a page template because it will contain the following at the top of the file:-
Template Name: Landing Page
Obviously, the name of the template changes depending on the template in question.
We are going to modify the "Landing Page" template, which is called "landing-page.php" and is located
I'm simply going to copy this file directly from the parent theme folder into the child theme folder.
My child theme folder now contains the page template that I've copied:-
Step 2 - Modify the Page Template Filename and Name
In your child theme you now have a replica of the page template from the parent theme. Given that we don't want to overwrite the parent theme page template, we need to give our new page template a unique file name and name.
You can change the file name to whatever you like. I'm going to rename it as minimal-landing-page.php
The next step is to rename the template - this is the name that will appear in the WordPress admin area. To do this, I open the file up, and change the header:-
Template Name: Minimal Landing Page
We now have a completely new page template that is ready to be modified.
Step 3 - Modify your Page Template
You can now modify your new page template as you see fit. In this tutorial, I'm going to show you how I would convert the page template from the left (the original) to the right (the modified version):
The after version is simply a minimal version of the original page template. I will now make the modifications to the template to remove the header and footer.
In the child theme template file, I'm going to remove get_header(); and replace with wp_head();
Remove the following line:-
<?php get_header('landing'); ?>
<?php wp_head(); ?>
This will remove the header template file but keep the wp_head(); hook so that plugins and themes can still hook in and load necessary files.
I'm going to do something similar with the footer and replace the get_footer(); with wp_footer();
Remove the following line:-
<?php get_footer(); ?>
<?php wp_footer(); ?>
Again, this will remove the footer but keep the wp_footer(); hook to ensure plugins and themes can hook in as need be.
That is all there is to it.
You now have a completely new minimal page template.
How to Load the Page Template
You can load the template by simply going to your WordPress dashboard -> Pages and either adding a new page or editing an existing one.
On the right hand side you will see a page template drop down box with your new template listed as an option:-
You can then view your new modified template in all its glory:-
Obviously, this is a very simple example to illustrate how this works, however you can make as many modifications as you like - there are no limits to your creativity.
For more information about how to create page templates, check out the WordPress Codex:-