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.

What is a Page Template?
Creating a Page Template
Making Useful Page Templates
Adding Options
Creating Page Templates with CustomPress
Getting Started
Page Template Settings
Adding Custom Fields
Embedding Your Custom Field
Customizing Your Fields with CSS

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 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

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

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 minutes, your template would be done and you could use it right away or style it with CSS as needed. Our retired CustomPress plugin (now available for free on Github) does this and takes away the overwhelm and tediousness while saving you time.

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.

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.

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.

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.

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.

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.

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
Drop down box
Multi-select box
Date picker

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 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.

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.

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.

Щелкните ниже, чтобы поставить оценку!
Всего: 0 В среднем: 0

Написать комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

3 × четыре =