Creating Custom Page Templates in WordPress

Creating Custom Page Templates in WordPress

Page templates in WordPress are a great way to add structural variations or highly customized functionality to your website. They are easy to create so newcomers can get started, but they offer enough potential to keep even seasoned professionals busy.

You can get started by copying page templates from popular themes like the default WordPress theme Twenty Seventeen and tweaking, but you can also add your own styles and Javascript with ease.

In this article, we’ll take a look at what page templates are as well as how you can use them to make your website better. I’ll also include details for creating page templates with code, and the much easier way with our CustomPress plugin and Upfront theme framework.

What is a Page Template?

As I mentioned in the introduction, a page template gives you the ability to deviate from your site’s existing structure in addition to adding new features. Twenty Fourteen includes two great examples: a contributor page and a fullwidth page.

Twenty Fourteen
Twenty Fourteen has a page template for contributors.

The contributor page introduces new functionality: the ability to list the authors who have contributed to your website. The full width template alters the structure of the page by removing the sidebar, focusing more on content.

Twenty Eleven also provides two page templates: the showcase template and the sidebar template. The sidebar template gives you the good old sidebar on your page, the showcase page displays sticky posts first and then a list of recent posts.

Premium themes, in particular, like adding numerous page templates to themes to create pixel-perfect contact forms, customizable post listings, highly-customized author lists and more.

Creating a Page Template

Creating a page template is extremely easy. Create any new file in your theme and start the file with a comment block like so:

If you are modifying a third-party theme you really should be using a child theme. If you don’t know how to create one, read Raelene Wilson’s great How to Create a WordPress Child Theme article.

Page template files may reside in a sub-directory – this is my favored method. I usually create a <code>templates</code> directory and store them there.

Once created, your page template will show up in the page attributes module, which if you’re unfamiliar with sits on the right-hand side of the screen in the backend of the Edit Page screen. If you select it and update the post, the code in your template file will be used to display the page. Give the following template code a go:

Our custom template shown in the admin
Our custom template shown in the admin

Notice that “Hello There” is all that is visible; with page templates you’re on your own. You have to call the header, footer and other page elements if you need them.

Let’s create a basic page template, which will blend in with Twenty Fourteen:

I’m sure WordPress code newcomers are gasping at the jump in complexity between the two previous examples. My little secret is cheating. I simply went into a template file in the Twenty Fourteen theme and copy-pasted it. I removed the loop, which we don’t need.

If your theme doesn’t have template files you could try copying the <code>index.php</code> file and removing the loop as a starting point.

Making Useful Page Templates

It’s all well and good to have a page template, but we really should add something useful to it. From this point on it is completely up to you, as long as you can code it in PHP/HTML you can use it.

Here are a few ideas to help you get started:

  • Custom contact page with Google Maps and a contact form
  • A page listing the newest post from each category
  • An archive page listing five new posts and category posts from your top three categories
  • A sitemap page listing all your content (posts and pages)
  • A page listing your recently uploaded images
  • A post list ordered by comment counts
  • A post list showing posts ordered by the last update time
  • A list of authors and their top three posts
  • A custom designed page for your portfolio

Here’s how you could list posts alphabetically using a page template in Twenty Fourteen:

Again, cheating! I went into the index.php file in Twenty Fourteen and copied the whole loop. I needed to create a new query object, so I created the $custom_posts variable and used it throughout the loop.

Adding Options

Post templates get really fun when you add options to them. You can do this by registering meta boxes but this would add considerable unrelated code to the article, so why not cheat yet again?

One of my favorite plugins, Advanced Custom Fields can do the heavy lifting for us.

Let’s create a special page template where users can choose how the posts on the page are ordered.

First, install Advanced Custom Fields. Next, create a page template using the code in our previous example from above. Make sure the template name is “Custom Post List” so you can use our import example below.

The next step is to create our settings using Advanced Custom Fields. You can create your own, making sure they are only shown on the new page template, or you can import the XML file in this archive using the WordPress importer found in Tools > Import.

I’ve created an order, and an order by setting. This will be imported into your ACF settings.

Once done, you can create a page and select the “Custom Post List” template. You should see two options grouped in a meta box pop up under the editor. Set these to whatever you would like and lets get started on making our theme use these settings.

Our new template-specific settings
Our new template-specific settings

All you need to know is the key of the order by setting is order_by, the key for the order settings is order (no surprises there). We can retrieve the value of these fields using the get_field() function provided by ACF. All we need to do is substitute the user selected values into our WP_Query object from before:

Creating Page Templates with CustomPress

If you’re not too familiar with making your own page template, it can certainly be overwhelming at best. If you’re a pro, it can still be time-consuming and tedious. That’s why it’s more than handy to use a plugin to create the page templates you need.

You could select the options you want in a simple interface and in a few of minutes, your template would be done and you could use it right away or style it with CSS as needed. Our CustomPress plugin does this and takes away the overwhelm and tediousness while saving you time.

It’s quick and easy to install and once you do, you’re ready to start creating a new page template. You can also create any kind of custom post type from attachment to post pages. It’s all included.

Plus, if you’re already a WPMU DEV member, CustomPress is better than free since you don’t have to sign up for anything else or fill out any forms. You can download it right away and start creating a page template. If you’re not a member yet, you can still get CustomPress for free.

You can sign up for a free 14-day trial and download CustomPress. Even if you cancel, CustomPress is all yours and you can continue using it. If you want, you could continue your membership and receive future updates, expert premium support, all our other 100+ plugins and WordPress courses at our Academy. remote site management with the Hub where you can

You also get remote site management with the Hub where you can link your sites and get uptime and blacklist monitoring, security essentials and more features coming regularly.

It’s difficult to list everything, but there’s so much it’s almost like getting a truck full of money delivered to your house. Almost.

Getting Started

Here’s how you can use CustomPress to create a page template. You can find full installation and configuration details on the CustomPress page under the usage tab.

I’ll be creating a product showcase page to show you the ropes. It’s important to plan your page template before you get started so you can breeze through the setup.

I created a fictional plugin business so my product showcase is going to be a full sales page template that I can use for each plugin.

Apart from knowing you want to create a page template or a post type, it’s helpful to also know:

  • Whether you need custom categories or tags
  • The custom fields you need
  • If you want the page template to be public or private
  • The name you want to use for your page template
  • Whether you need certain post type capabilities
  • If you have a Multisite network, do you want subsites to create their own page templates?

Once you have a rough plan, you can install CustomPress. In my product showcase, I’m going to have a featured image and want to display certain specs such as the plugin version number.

When you first install CustomPress, you can either enable it network-wide in Multisite or site-by-site. If you choose to network-activate CustomPress, only the super admin can create page templates or custom post types, but the subsites can use them. If you enable it site-by-site, each site that has the plugin activated can create their own post types and templates to use.

You can get all the details on the CustomPress page’s usage tab. Once that’s all done, you can create your page template.

Page Template Settings

Go to CustomPress > Content Types and click the Add Post Type button on the default Post Types tab.

The Post Types tab.
Click the Add Post Type button to get started.

In the first panel called Post Type, enter a name into the field that you want to use in the back-end code. The name you choose should have a maximum of 20 characters, a minimum of two letters and the letters should also all be lowercase.

You also have the option to include underscores, but it’s recommended that your name doesn’t start with an underscore.

Add Post Type settings.
Enter a system name for your page template that is going to be used in the code.

You can follow the CustomPress usage instructions for details on all the settings and how to set them up, but there are a couple more settings that are important to cover in order to specifically create a page template.

By default, the Capability Type is set to post which means you would be creating a custom post template. If you want to do this, that’s perfectly fine, but if you would rather create a page template, this needs to be changed.

Under the Capability Type section, check the edit box and enter page into the field above it, replacing post.

The Capability Type section.
Edit the Capability Type to page in order to add a new page template.

In the Labels section, you can enter the user-friendly titles you want to give your page template and its links. In the Name field, enter what you want to appear on the tab in your admin dashboard so you can access the page template.

You can also customize the names for the links that are listed under the tab such as the New Page and View Pages links.

The Labels portion of the Post Type settings.
Enter user-friendly names for your page template and its links.

When you’re done, click Add Post Type at the bottom to save your changes and create your new page template. You can check out your new tab with the name you chose for it in your admin dashboard, but in order to add any options for specific kinds of content that you need to have displayed on your page, you need to create custom fields.

Adding Custom Fields

For my fictional plugins business and the product showcase page template I’m creating for it, I need to be able to add a few options to the editor such as the plugin version.

Go to the Custom Fields tab and click the Add Custom Field button. Enter a user-friendly name that’s going to be displayed in the editor and also on the page when you create your first one with the template.

The Add Custom Field settings page.
Enter the options for your custom field such as its name.

Also, be sure to select the name of the page template you create in the Post Type section so your option can appear in the editor if you enabled a user interface. In the Hide input for this Post Type section, enter all the post types or page templates where you don’t want this custom field to be displayed in the editor.

For my fictional plugin business, I wouldn’t want my custom field that displays the plugin version to be shown in the regular post and page editor, but I do want it to appear in my page template. This being the case, I’m going to multi-select all post and page types on the list, except for my custom page template.

Under Field Type, enter the way you want users to input information for this field option. In the case of my fictional business, I want my staff and I to be able to enter in a version number in a text box since there’s bound to be more than a few options as development progresses so I chose a text box.

The Field Type settings.
Choose the type of field you want to create.

There are many other options you can choose and here’s a complete list of all of them:

  • Text box
  • Multi-line text box
  • Radio buttons
  • Checkboxes
  • Drop down box
  • Multi-select box
  • Date picker
  • Upload

When you have chosen your field type, you can enter any additional options. For example, you can enter in a regular expression to validate the text box information. This is useful if the field is going to be used to enter an email address. You can use the regex to validate the email and make sure it’s valid.

If you choose a different field type such as checkboxes, different options dynamically appear so you can add the relevant settings such as the options you want users to click in your field.

You can also enter a description for your field so users have a better idea of what to type in or select in your field.

When you’re done, click the Add Custom Field button at the bottom of the page. Now, when you go to your page template’s tab and click the link to create a new page, you should see the option appear below the editor if you chose to display a user interface.

The editor for the new page template.
The new custom field appears in the editor for the page template that was created.

You’re almost done, but there’s one final step to make sure the custom field actually shows up on your page in the front end.

Embedding Your Custom Field

Even though you can see your custom field in the editor, it won’t show up on your page template until you add it in with a bit of PHP code or a shortcode. Fortunately, it’s all generated for you so you just need to plug it in.

You can find the code you need by going to CustomPress > Content Types > Custom Fields tab and hovering over your custom field title. Click the Embed Code link.

The Custom Fields settings page.
You can find the embed code for your custom field in the settings.

Your code should dynamically appear directly below. You can copy and paste what you need.

The PHP code can be used in the page template that was created by CustomPress. You should be able to find this file under /wp-content/themes/your-theme/single-{post_name}.php. Instead of {post_name}, you should see the actual system name you picked for your page template. In my case, it was products so my file name would be single-products.php.

You can edit the file and enter the code where you want your custom field to appear on the front end, then save changes.

If you would rather use the shortcode, you can just pop it into the page editor where you want your custom field to be displayed like you would with any other shortcode.

Customizing Your Fields with CSS

By default, your custom fields are written out in plain text, but you could use CSS to customize it to look fancier and any way you want.

In order to customize your fields with CSS, you need to use the generated PHP embed code. Then, wrap the code in custom <div> tags to add a class name for your styles. From there, you can go into your theme’s style.css file and use your newly created class name to customize your fields with CSS.

Page Templates in Upfront

Creating page templates with CustomPress is fast, but if you’re so busy you think bees are lazy and don’t have time for CustomPress, there’s an easier way.

With our Upfront theme framework, you can intuitively drag and drop your way to a professional and stunning site and page template. You can design your site and template completely from the front end and live visual editor.

Unlike CustomPress, you don’t even have to touch a single line of code, unless you really want to, then you can. But like CustomPress, if you have a membership with WPMU DEV, Upfront is better than free because you can download and install it right away without filling out any forms.

You also get access to everything we’ve got — everything — from our 100+ plugins, updates and premium support, to WordPress courses in our Academy, remote site management in the Hub and so much more stuff that it could take you while to figure out how to fit everything into your site and schedule.

You can also give it all a go for free to see what all the fuss is about, especially when you could easily make your site three or four times faster (or more!) with our Hummingbird and WP Smush Pro plugins, and little to no effort.

Getting Started

To begin using Upfront, download and install one of the starter themes on your WordPress site or network.

You can check out Download WPMU DEV Plugins & Themes for details on downloading Upfront manually or you can also install Upfront in one click through the WPMU DEV Dashboard plugin and you can find the details on this by checking out Installing the WPMU DEV Dashboard Plugin.

Once you have it installed and activated, you can start the Upfront editor by clicking on the Upfront button on the admin bar.

The Upfront button in the admin bar.
Click the Upfront button to start up the visual editor,

Once you launch the visual editor, you can customize the starter theme’s page templates to suit your needs.

Opening a Page Template

In the visual editor, click on the New Page button in the menu on the left.

The Upfront editor.
Click the New Page button to open the menu options for opening a page template.

You should see options for creating a new page, but to customize the built-in page templates, click on the Templates link and choose one of the options in the drop-down box, then click Apply.

There are many to choose from and you can apply a template to view it without actually publishing it to your public-facing site.

The Upfront Page Settings menu area.
Click on the Templates link and choose which one you want to customize.

When you click the drop down box, you also have the option to uncheck the Layouts option to only display page templates.

After you have chosen your template, you can customize it fully and any way you want, even if it’s 100% different than the original starter theme. For details on how to infinitely customize your design and template, check out the Upfront User Manual.

The Upfront editor with the Publish button highlighted in the menu.
When you’re done customizing the page, click the Publish button to update your live site.

When you’re done, click the Publish button. Your newly customized page from the template is saved and pushed to your live site and is available for everyone to see.

If you would rather start over again, you can click the Trash button and start the process over again for a clean slate.

You can also be sure your customizations are fully responsive by clicking the Responsive button in the menu and adjusting your page elements as needed. Buttons are displayed at the top of the editor to show you how your page would look on different screen sizes.

Upfront in responsive mode.
In responsive mode, you can adjust your design so it’s fully responsive across screen sizes.

When you’re happy, click Save to keep your changes.

Getting Help

If you run into any troubles along the way, our expert support team is ready and waiting to help you out with whatever you need. You can submit a ticket, check out our live support or search the support forum to see if your question has already been answered.

You can also check out The Good Support Ticket manual page for details on what to include in your support ticket so we can help you at top speeds.

It’s all included in your membership so you don’t have to hesitate for even a split second if you need a hand. If you’re not a member yet, you can still get support for free with a trial membership.

Summing Up

It should be fairly obvious that by adding options you can create a whole new experience for website admins and users. This functionality, coupled with customized CSS and Javascript can result in some astounding and powerful work.

Do take care – with great power comes great responsibility! Adding 100 options to page templates just because you can is not the way forward.

Make sure to use this knowledge wisely and build something genuinely useful for your clients and yourself.

Image source: Blueprints by Cameron Degelia.

Daniel Pataki
If you have any great page templates you've made or seen recently we'd love to know. Share your experiences in the comments below.