How to make custom page templates in WordPress

In this article, we’re looking at how to set up custom page templates in WordPress. The benefit of using custom page templates is that they allow you to basically build standard web pages that pull their content from the WordPress database. That means the content can be updated by non-technical users through a web form on the WordPress Admin Panel.

When you publish a page in WordPress, the page.php template is used by default. Certainly you can modify page.php as much as you like, but sometimes you want to design something different from this default template. Custom page templates enable you to design dynamic pages that differ from the standard page.php template. You can build and deploy as many of these as you like, so once you understand them, it really opens up a lot of options to customize your WordPress site to meet the needs of your organization.

There’s no point re-inventing the wheel, and lots of good information about this is available in the WordPress Codex. The best place to start for this topic is on the Pages entry. I would recommend reading that entire page and probably checking out some of the other pages linked from there, but here is one important excerpt to get us going:

WordPress can be configured to use different Page Templates for different Pages. Toward the bottom of the Write > Page administration panel (or on the sidebar, depending on which version of WordPress you are using) is a drop-down labeled Page Template. From there you can select which Template will be used when displaying this particular Page.

So, how do you create one of these page templates? Remember that all page template files in WordPress are PHP files, so if you wanted to create a custom page template for a page called Contact, you would start by setting up a file called contact.php. Technically, the only PHP that you must include in this page goes right at the top, where you identify contact.php as the page template with the name of Contact. The code looks like this:

<?php
/*
Template Name: Contact
*/
?>

Once you’ve put that at the top of the contact.php file and uploaded the file, the Contact template (contact.php) will be available for you as a template whenever you create a page in the WordPress Admin Panel. All the page templates that are available will be shown in a dropdown menu to the right of the post box on the Add Page screen in a box labeled Attributes under Templates.

I’ve included a screenshot here of what that dropdown menu looks like. In this example, there are several custom templates to choose from.

We mentioned earlier that the only PHP you technically must have in a custom page template is the snippet above with the Template Name: Contact line in it. The reason that is true is because with that PHP included, the rest of any custom template could be static HTML if you wanted it to be. In practice, you’ll probably often want to be able to add and update content dynamically through the WordPress Admin Panel so there will be additional PHP, but that is not a requirement for a custom page template.

If you do want users to be able to add content for each page in the WP Admin Panel, how do you tell your template where and how to display that content within your custom page template? You do that by including The Loop in your custom page template. There are lots of ways you can style the content from the loop, but here is a very basic version of it:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<?php the_title(); ?>

	<?php the_content(); ?>

<?php endwhile; endif; ?>

The above version of the loop doesn’t include any extra CSS hooks and only displays the title and the content for the given page. There are lots of other things you could include such as the_excerpt and the_permalink.

One thing that might be confusing about the loop in the context of pages is the use of the term post in The Loop. You might be thinking that pages are different from posts in WordPress so why are we looking for posts in the PHP here?

Pages are indeed different from posts in WordPress, but as far as how they are treated in the WordPress database structure and the way they are called in The Loop, pages are, in that context, a type of post.

Now that we’re using The Loop to display the content for the given page into our custom page template, we can put whatever we want to put around this content. That means our page can have a standard heading or banner at the top and a footer at the bottom, or basically anything else that you can code up. You can also use more WordPress template tags such as get_header and get_footer to make including that kind of thing more modular.

Once you get used to building and using custom page templates, it becomes relatively straightforward to use WordPress to manage content on almost any type of page you can design.

About these ads