Dynamic Page Templates in WordPress, Part 3

In the first two parts of this tutorial series, we covered what dynamic page templates were and why they were needed. We also looked at the code required to implement them. 

In this third and final tutorial in the series, I’ll be creating two examples of fully working dynamic page templates you can use in your own projects. These were specifically chosen to be easily extendable to suit your own needs, and are intended as inspiration for any other type of dynamic page templates you can think of.

The two dynamic page templates we’ll be taking a look at shortly are:

  • Simple Contact Form
  • Blog Post Archive

As well as implementing our page templates, I’ll also show you how to add extra polish, via custom CSS and JavaScript, to make interaction much more intuitive to end users.

Plus, we’ll take a look at how you can use page templates for any post type. Since WordPress 4.7, you can specify the post type a page template is associated with. We’ll see how you can modify an existing dynamic page template to take advantage of this new feature so it works with any post type.

We’ve a lot to cover in this tutorial, so let’s get started!

Theme Setup

We’ll be using a WordPress Twenty Seventeen child theme again, just as we did in part 2 of this tutorial series, to add our dynamic page template code. Let’s begin with a blank child theme.

Create a child theme folder called twentyseventeen-child and add the following files:

  • functions.php
  • style.css

Inside style.css, add:

And inside functions.php, add:

Add the child theme to your WordPress theme directory as we did before. If you’re not sure about how to do this, please refer back to part 2 in this tutorial series.

We now have a working (blank) child theme ready for us to add our dynamic page template code to.

Dynamic Form Page Template

Our first real implementation of a dynamic page template is a simple contact form. We’ll be adding the following fields:

  • Heading
  • Name
  • Subject
  • Email
  • Phone number

These are text input fields, apart from the heading, which is a standard HTML heading tag.

Before we implement the actual page template, though, we need to add custom controls to the page editor that will allow us to modify page template output. Then, when we create the page template, it will be rendered according to the page editor control settings.

In part 2 of this tutorial series, I mentioned that there’s no easy way to add custom controls directly to the ‘Page Attributes’ meta box, where the page template drop-down is located.

Page Attributes

This means that we have to add our dynamic page template controls elsewhere for now. I’ll show you how to get around this limitation a little later on, with a little CSS and JavaScript magic. But for now, we’ll have to make do with adding our custom controls to a separate meta box.

In the DPT_Twenty_Seventeen_Child class, register two new action hooks in the init method, and a new method called page_template_meta_boxes.

Leave a Comment

Scroll to Top