Dynamic Page Templates in WordPress, Part 1

WordPress page templates are a great way to completely alter how particular web pages are displayed. You can use them to add a vast range of functionality to your site.

They do, however, have one limitation in that they are 'static' templates. You cannot customize them or affect their behavior in any way. You can only choose whether to enable a page template or not. By default, a page template will simply carry out a fixed function, e.g. display a sitemap, or remove the sidebar to display a full-width page.

In this tutorial series, I'll be looking at how you can extend page templates to be more flexible, improving their functionality greatly. I'll start by introducing how to create a standard page template via a child theme, before moving on to a more flexible approach where I'll create a general-purpose dynamic page template.

Finally, I'll show you three real-world examples of fully working dynamic page templates. I'll also cover advanced topics such as how to assign page templates to custom post types.

Want to Follow Along?

To follow along with this tutorial series, you'll need a WordPress site with admin access. By far the easiest way to do this is to use a local development environment. A dedicated text editor is also useful but not essential.

If you happen to be developing with WordPress via a remote server then you'll need to be able to edit theme files via the WordPress admin, or edit files locally and use FTP software to transfer them back to the server. For the sake of simplicity, I'll assume that you're working with WordPress locally throughout the rest of this tutorial.

To implement our page templates, I'll be using a child theme based on the Twenty Seventeen parent theme, which (at the time of writing) is the latest default WordPress theme. So if you are following along then it's a good idea to have this installed before moving on.

You can use a child theme based on another parent theme if you prefer, but you'll need to modify some of the code to make it work seamlessly with your particular theme. The basic method, though, is pretty much the same for any child theme.

WordPress Page Templates

Before learning how to make page templates more flexible, let's go over some basic details.

WordPress uses a template hierarchy to decide which template renders the current page. The template used in most scenarios for pages is page.php but can be different if you're viewing a page with a particular ID or slug. However, if you select a page template for a particular page, this will always be used in preference, which makes it very easy to customize any page using a page template.

Here are some typical examples of commonly used WordPress page templates:

• Contact Form


• Portfolios


• Frequently Asked Questions


• Custom 404 Page


• Custom Login Page


• Sitemap


• Full Width Page


• Blog Posts Page


• Widgetized Page


• And many more…

I could go on, but you get the idea. Page templates are cool! You can use them for almost anything.

If you've used WordPress for any length of time then it's highly likely you've already come across one or more of the examples above. Most themes include page templates to complement theme functionality, and you can easily add your own via a child theme. I'll be covering how to do this shortly.

Page templates are so useful because they give you complete control over the whole page. You can leave out the header, footer, and/or sidebars if you wish. This is one of the reasons why full-width page templates are so common because it's very easy to manipulate the sidebars via a page template.

To see all currently available page templates, go to the WordPress page editor and access the Template drop down via the Page Templates meta box. Simply select the page template you want and, once the page has been updated, it will be visible the next time the page is viewed.

Adding Page Templates via a Child Theme

As mentioned above, we'll be using a custom WordPress child theme to implement all page templates throughout this tutorial. I'll start off with a basic child theme and page template, and then add more complexity to it as we go along.

The whole process will be covered step by step, so don't worry if you're not familiar with child themes and/or page templates. You will be by the end of the tutorial!

The basic idea behind child themes is that they allow you to customize the look and feel of your current theme (called a parent theme) in a way that won't be affected when the parent theme is updated.

If code is added directly to the parent theme then all customizations will be overwritten and lost during a scheduled theme update. This is an important point as any well-maintained theme will be regularly updated. To find out more about child themes, I'd recommend taking a look at the official documentation. 

It's interesting to note that it's technically possible to use a WordPress plugin to add page templates, but it's much simpler to use a child theme. I don't want to complicate things unnecessarily with extraneous code, so I'll be sticking with child themes for our page template implementation.

Let's Get Started!

Ok, so enough theory—let's create our initial page template! It will be located in a custom Twenty Seventeen child theme which will act as our page template container, so we need to create the child theme first.

Open up your theme folder and create a new folder for your child theme. According to WordPress best practices, it's recommended that you name the child theme folder the same as the parent theme it's based on, amended with '-child'. As our parent theme folder is named twentyseventeen, name your child theme folder twentyseventeen-child. Inside this new folder, create a single file named style.css and add the following comment block at the top.

/*
 Theme Name:   Twenty Seventeen Child
 Description:  Twenty Seventeen Child Theme
 Author:       David Gwyer
 Template:     twentyseventeen
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-seventeen-child
*/

We now need to reference all the styles from the Twenty Seventeen parent theme. If you've ever worked with child themes before, then you might be used to adding a CSS @import statement directly underneath the comment block. This is no longer considered a WordPress best practice due to speed concerns. Instead, we'll enqueue the parent theme styles, which will be more efficient.

Inside the child theme root folder, create a functions.php file and add the following code to set up an empty class container. We'll use this class for all our setup code.

<?php

/**
 * Twenty Seventeen child theme class.
 *
 * DPT = D[ynamic] P[age] T[emplates].
 */
class DPT_Twenty_Seventeen_Child {

    /**
     * Register hooks.
     */
    public function init() {
        // ...
    }
}

$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();

Note: The closing PHP statement is not necessary, but you can add it if you prefer.

Now add a hook and callback to enqueue the Twenty Seventeen parent theme styles, rather than importing them directly inside the style.css file. Do this by adding two new class methods.

<?php

/**
 * Register hooks.
 */
public function init() {
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
}

/* Enqueue parent theme styles. */
public function enqueue_parent_theme_styles() {
wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
}

Save your changes and activate the child theme. You now have a fully functioning, albeit simple, Twenty Seventeen child theme. To test whether it's working properly, add a line of custom CSS to style.css.

* { color: red !important; }

If all is well then you should see all your site text now colored a nice garish red!

Don't forget to delete the test CSS before moving on. Now that the child theme is active, we can begin to implement our first page template.

Adding Our First Page Template

One thing is worth mentioning about where you store page templates inside your child theme. You can store the page templates either directly inside the root child theme folder or in a top-level folder. It doesn't matter which one you choose; either location is fine.

However, if you have multiple page templates, you may decide to store them in a folder for organizational purposes. The folder name is unimportant, but it must be located directly inside the root child theme folder, otherwise WordPress won't recognize your page templates. For this tutorial, I'll be using a folder called page-templates.

Let's now add a new page template to the child theme. The standard way to do this is to make a copy of the parent theme page.php theme template file and add it to your child theme. You can name the file anything you like, but I'd recommend including something that makes it recognizable as a page template. I'll go with test-page-template.php.

Once you've copied the page.php file (and renamed it) to the page-templates folder, your child theme structure should now look like this:

Open up test-page-template.php and replace the comment block at the top of the file with the following.

<?php

/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

This step is very important as the comment block tells WordPress to recognize the file as a page template and will add it to the list of available page templates on the page editor screen.

The full page template code should now look like this.

<?php
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

get_header(); ?>

<div class="wrap">
    <div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php
while ( have_posts() ) : the_post();

get_template_part( 'template-parts/page/content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

endwhile; // End of the loop.
?>

</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

Let's test our page template. Go to the WordPress admin and edit any existing page, or create a new one. On the page editor screen, select the Template drop-down from the Page Attributes meta box to assign our page template to the current page.

Because we simply copied the parent theme page.php template file, our custom page template is doing nothing more than outputting the current page, which is not very useful. Also, we won't be needing to output the editor content or comments, so remove these from the page template while loop, and add a custom message. Change the contents of the while loop to the following.

<?php
while ( have_posts() ) : the_post();
    echo "<p>This is our custom page template!</p>";
endwhile; // End of the loop.

Save this and view the page on the front end.

Note: If you can't see the custom message then make sure you have selected the custom page template on the page editor and saved it to update settings.

Let's now make our custom page template a little more useful. Replace the message we added above with the following code to output a sitemap of all published pages.

<?php
while ( have_posts() ) : the_post();
echo "<h2>Sitemap</h2>";
echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
endwhile; // End of the loop.

This will result in the following output.

It's easy to see just how useful page templates can be. But we can do even better!

Conclusion

So far, we've created a child theme and used it to implement our standard page template. In the next tutorial, I'll show you step by step how to extend this, demonstrating how page templates can be made more flexible.

Specifically, we'll create a general-purpose dynamic page template by adding custom controls to the page editor screen. Control logic will then be added to the page template to allow us to directly customize how the page template is rendered.

WordPress has an incredibly active economy. There are themes, plugins, libraries, and many other products that help you build out your site and project. The open source nature of the platform also makes it a great option from which you can better your programming skills. Whatever the case, you can see what we have available in the Envato Marketplace.

This is my first tutorial (be gentle!) so please feel free to leave any feedback you may have in the comments feed below. I'll do my best to answer every question.