WordPress page templates are a great way to give your website structural variety or highly customised functionality. They are simple to create, making it simple for beginners to get going, but they have enough potential to keep even seasoned professionals busy.
You can get started by copying and modifying page templates from well-known themes, such as the Twenty Seventeen default WordPress theme, but you can also easily add your own styles and Javascript.
This article will discuss page templates, what they are, and how to use them to enhance your website. I’ll also go over how to create page templates using code as well as the much simpler method using our CustomPress plugin.
What is a Page Template?
A page template allows you to modify the existing structure of your website in addition to adding new features, as I mentioned in the introduction. Two excellent examples are found in Twenty Fourteen: a contributor page and a fullwidth page.
The ability to list the authors who have contributed to your website is a new feature that the contributor page offers. By removing the sidebar, the full width template changes the page’s structure to put more emphasis on the content.
The showcase template and the sidebar template are two additional page templates offered by Twenty Eleven. The showcase page shows sticky posts first, followed by a list of recent posts, while the sidebar template gives you the good ol’ sidebar on your page.
Particularly with premium themes, you can create pixel-perfect contact forms, highly-customized author lists, and more by adding a tonne of page templates to your theme.
Creating a Page Template
It’s very simple to create a page template. Any new file you create in your theme should begin with a comment block that looks like this:
You ought to use a child theme if you’re modifying a theme from a third party. Read Raelene Wilson’s excellent article on How to Create a WordPress Child Theme if you don’t know how to do it.
It is possible for page template files to live in a sub-directory; this is the approach I prefer. I typically create a directory called “templates” and put them in there.
Once created, your page template will appear in the page attributes module, which, in case you’re not familiar, is located in the backend of the Edit Page screen on the right-hand side of the screen. The template file’s code will be used to display the page if you choose it and update the post. Try out the template code that follows:
You’ll see that the only thing that is visible is “Hello There”; with page templates, you’re on your own. If you require the header, footer, or any other page element, you must call for it.
Let’s make a simple page template that will match Twenty Fourteen:
Newcomers to WordPress code are probably gasping at the sudden increase in complexity between the two earlier examples. My little trick is to lie. I simply copied it and pasted it into a template file using the Twenty Fourteen theme. We don’t need the loop, so I removed it.
If your theme doesn’t have template files, you might want to start by copying the index.php file and removing the loop.
Making Useful Page Templates
Having a page template is great, but we should really add something helpful to it. As long as you can code it in PHP or HTML, you can use it from this point forward.
Here are some suggestions to get you going:
.
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
Adding Options
When you give post templates options, they become really entertaining. This can be accomplished by registering meta boxes, but this would significantly increase the amount of unrelated code in the article. So why not cheat once more?
Advanced Custom Fields, one of my favourite plugins, can handle the labor-intensive tasks for us.
Let’s design a special page template that allows users to select the hierarchy of the page’s posts.
Install Advanced Custom Fields initially. The code from our earlier example from above should then be used to create a page template. To use the import example below, make sure the template name is “Custom Post List”.
Our settings will be created using Advanced Custom Fields in the following step. The XML file in this archive can be imported using the WordPress importer found in Tools > Import, or you can create your own while making sure they are only displayed on the new page template.
An order and an order by setting have both been created. Your ACF settings will be imported with this.
When finished, choose the “Custom Post List” template when creating a page. A meta box with two options should appear underneath the editor. Let’s get started making our theme use these settings by setting these to whatever you like.
You only need to be aware that order_by is the key to the order_by setting and order is the key to the order settings (no surprises there). Using the get_field() function offered by ACF, we can obtain the value of these fields. All we have to do is modify our previous WP_Query object by replacing the user-selected values with them:
Creating Page Templates with CustomPress
Making your own page template can be overwhelming at best if you’re not too familiar with it. Even if you’re an expert, it can still be laborious and time-consuming. Because of this, using a plugin to generate the necessary page templates is more than convenient.
Your template would be ready in a few minutes after you chose the options you wanted to use, and you could use it right away or style it with CSS as necessary. This is accomplished by our retired CustomPress plugin (now freely accessible on Github), which also saves you time by eliminating the confusion and tediousness.
Getting Started
Here’s how to make a page template in CustomPress. Full installation and configuration information is available on the CustomPress page’s usage tab.
To help you get started, I’ll be creating a product showcase page. It’s crucial to plan your page template before you begin so you can complete the setup quickly.
Because I made up a fake plugin company, my product showcase will consist of a complete sales page template that I can use for each plugin.
It’s useful to know the following in addition to the fact that you want to create a post type or a page template:
.
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?
Install CustomPress once you have a general strategy in place. I want to display certain details, like the plugin version number, in my product showcase’s featured image.
You have two options when installing CustomPress: network-wide in Multisite or site-by-site. Only the super admin can create page templates or custom post types if you choose to network-activate CustomPress, but the subsites can still make use of them. Each site that has the plugin activated can create its own post types and templates to use if you enable it site-by-site.
The usage tab on the CustomPress page contains all the information. When everything is finished, you can make your page template.
Page Template Settings
Click the Add Post Type button on the default Post Types tab by going to CustomPress > Content Types.
Put a name in the field you want to use in the back-end code in the first panel, Post Type. The name you select must be at most 20 characters long, contain a minimum of two letters, and be all lowercase.
Although you can use underscores, it is advised against doing so at the beginning of your name.
There are a few more settings that are crucial to discuss in order to specifically create a page template, and you can find information on them in the CustomPress usage instructions.
You would be creating a unique post template since the Capability Type is by default set to post. This is fine if you want to do it, but you should change it if you’d rather make a page template.
Check the edit box next to “Capability Type” and replace “post” with “page” in the field above.
You can enter the user-friendly titles for your page template and its links in the Labels section. Enter the name of the tab that will allow you to access the page template in the Name field of your admin dashboard.
The names of the links listed under the tab, such as the New Page and View Pages links, can also be changed.
To save your changes and create your new page template, click Add Post Type at the bottom when you’re finished. You can view your new tab with the name you specified in your admin dashboard, but you must first create custom fields if you want to add any options for particular types of content that you must have displayed on your page.
Adding Custom Fields
I need to be able to add a few options to the editor for my hypothetical plugins business and the product showcase page template I’m creating for it, like the plugin version.
Click the Add Custom Field button on the Custom Fields tab. When you create your first one using the template, type a clear name that will appear both in the editor and on the page.
Additionally, if you enabled a user interface, make sure to select the name of the page template you created in the Post Type section so that it can be seen in the editor. Enter all the post types or page templates where you don’t want this custom field to be visible in the editor in the Hide input for this Post Type section.
I wouldn’t want my custom field, which shows the plugin version, to be visible in the regular post and page editor for my hypothetical plugin business, but I would want it to be visible in my page template. Given this, I’m going to select multiple options for all post and page types on the list aside from my personal page template.
Enter the information entry method you want users to use for this field option under Field Type. Since there will probably be more than a few options as development moves forward, I decided to use a text box in the case of my fictional company so that both my staff and I can enter a version number.
Here is a comprehensive list of all the additional options available to you:
.
Text box
Multi-line text box
Radio buttons
Checkboxes
Drop down box
Multi-select box
Date picker
Upload
You can enter any extra options once you’ve selected the field type. To validate the information in the text box, for instance, you could type in a regular expression. If an email address is going to be entered in the field, this is helpful. To verify that the email is valid, you can use the regex.
In order to add the necessary settings, such as the options you want users to click in your field, you can select a different field type, such as checkboxes.
In order to give users a clearer idea of what to type or choose in your field, you can also enter a description.
Click the Add Custom Field button at the bottom of the page when you are finished. Now, if you chose to display a user interface, you should see the option appear below the editor when you access your page template’s tab and click the link to create a new page.
To ensure that the custom field actually appears on your page in the front end, there is one more thing to do before you are finished.
Embedding Your Custom Field
Even though your custom field is visible in the editor, it won’t appear on your page template until you insert some PHP code or a shortcode to include it. Fortunately, everything has been generated for you; all you need to do is plug it in.
By selecting CustomPress > Content Types > Custom Fields and hovering over the title of your custom field, you can find the necessary code. Select the link for Embed Code.
Directly below, your code ought to dynamically appear. What you need can be copied and pasted.
The page template made by CustomPress can make use of the PHP code. This file should be located at /wp-content/themes/your-theme/single-post_name.php. You should see the actual system name you chose for your page template in place of “post_name.” Since it was products in my case, single-products.php would be the filename.
To make your custom field appear on the front end, you can edit the file and add the corresponding code before saving the changes.
If you’d prefer to use the shortcode, you can simply insert it like any other shortcode into the page editor and place it where you’d like your custom field to appear.
Customizing Your Fields with CSS
Your custom fields are written out in plain text by default, but you can change that using CSS to make it look fancier and however you want.
You must use the generated PHP embed code to customise your fields with CSS. Then, add a class name to the code by enclosing it in unique div> tags. After that, you can use your newly created class name to modify your fields using CSS by going to your theme’s style.css file.
Getting Help
Our knowledgeable support staff is available and waiting to assist you with anything you need if you encounter any difficulties along the way. To see if your question has already been addressed, you can search the support forum, submit a ticket, or check out our live support.
For information on what to include in your support ticket so that we can assist you as quickly as possible, see The Good Support Ticket manual page.
You don’t have to wait even a millisecond to ask for help because everything is covered by your membership. You can still receive support for no cost with a trial membership even if you are not yet a member.
Summing Up
It should be fairly obvious that by adding options, you can give website administrators and users a completely new experience. This functionality, along with specially made CSS and Javascript, can produce some amazing and potent work.
Don’t neglect your safety; great power entails great responsibility. The best course of action is not to add 100 options to page templates just because you can.
Use this information wisely and create something that will be genuinely helpful to both you and your clients.
We’d love to hear about any outstanding page templates you’ve created or recently came across. Post your stories in the comments section below.
