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 Fourteen 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 and how you can use them to make your website better.

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-contributor-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 thesidebar 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:

<?php
/*
Template Name: My Awesome Custom Page
*/

 

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 favoured 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 box in the admin. 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:

 

<?php
/*
Template Name: Stats Page
*/
?>
<h1>Hello There</h1>
stats-template
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:

<?php
/**
* Template Name: Custom Post List
*/
get_header(); ?>
<div id=main-content class=main-content>
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( featured-content );
}
?>
<div id=primary class=content-area>
<div id=content class=site-content role=main>
<h1>Hello There</h1>
</div><!– #content –>
</div><!– #primary –>
</div><!– #main-content –>
<?php
get_sidebar();
get_footer();

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:

<?php
/**
* Template Name: Alphabetical Posts
*/
get_header(); ?>
<div id=main-content class=main-content>
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( featured-content );
}
?>
<div id=primary class=content-area>
<div id=content class=site-content role=main>
<?php
$custom_posts = new WP_Query( array(
order_by => title,
order => asc
));
if ( $custom_posts->have_posts() ) :
while ( $custom_posts->have_posts() ) : $custom_posts->the_post();
get_template_part( content, get_post_format() );
endwhile;
twentyfourteen_paging_nav();
else :
get_template_part( content, none );
endif;
?>
</div><!– #content –>
</div><!– #primary –>
</div><!– #main-content –>
<?php
get_sidebar();
get_footer();

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

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

$custom_posts = new WP_Query( array(
‘order_by’ => get_field( ‘order_by’ ),
‘order’ => get_field( ‘order’ )
));

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.

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.