I frequently get questions about how to tweak something on a blog’s front page or change how something works in a theme. Many times, users don’t understand how easy this could be. I see this as a major problem because so many people are missing out on one of WordPress’ greatest features.
They give you the ability to do what you want without touching other theme files. You can make page templates look and function completely different from the rest of your site.
Last year, I ran a series on my blog called If you were a WordPress theme developer. This series was meant to give end users a chance to voice their opinions on how they’d develop a theme if given the chance. The first post dealt with page templates. I had a good reason for this. I wanted to take some of those ideas and apply them to my Hybrid theme.
At the time, I had searched endlessly on Google for page template ideas. There were hardly any that I could find. I saw many tutorials on how to create a basic page template, but that was pretty much it. That brings us to the here and now. I’m starting a new series on creating page templates.
I’ll be giving you the basics in this post, but I’ll follow it up with several tutorials on actually creating something.
What are page templates?
They’re just like any other template within the template hierarchy — they display your content. But, page templates are kind of special. They’re only used when you choose to use them. And, they tend to function a little differently from other templates in your theme.
Most themes should have a page.php file. This is called the Default page template. It usually just loads your page content and displays it like a single post. Themes can also have additional page templates that display things in a different way, add new functionality, and/or do pretty much anything you want them to.
Two good examples of page templates are in the WordPress Default theme — Archives and Links.
I do want to point out that page templates are not for styling specific pages. A good theme will give you CSS classes to style your pages with. Page templates should be about making something function differently from the norm.
How to create a page template
For the first post of this series, I’ll show you how to create the most basic page template. What you need to do is copy your theme’s page.php file. If your theme doesn’t have this file, trash it. It’s worthless.
At the top of this file, you’ll likely see something like this:
<?php get_header(); ?>That’s pretty standard. We want to change that a bit. First, we need to come up with a unique name. For the sake of this example, we’ll call this template Example. Change the original line of code to this:
<?php
/*
Template Name: Example
*/
get_header(); ?>Save it as example.php. That’s it. You’ve now created a page template. It won’t do anything special just yet, but that’s okay.
You can download my example template to have a look at one way this can be done:
How to select a page template
Page templates don’t just magically start working once you’ve created them. You actually have to select them when writing a page. Hop on over to your WordPress admin and create a new page. Find the meta section labeled Attributes. Within that section, select your template from the Template drop-down box.
The Example template we created in the previous step may be your only page template. As you can see in the figure below, I have quite a few to choose from.
Figure 1: Select a page template
Once you’ve selected a template, save your page and view it on your site. The Example template won’t do anything different from the default page.php template, but I’ll get to that in the next tutorial.
Gearing up for the page template tutorial series
It’s idea time. Put on your thinking caps and let me hear some great ideas. Just don’t get too crazy. I probably won’t do anything like add JavaScript, hook into Twitter, or anything complicated. I just want to show how we can grab information from WordPress and use it in unique ways.
I’m fascinated by all of the things that can be accomplished with WordPress page templates. From my experience, few users take advantage of this feature of WordPress. And, those that do might only use one or two templates.
I used page templates to create sitemap, with copyblogger theme. I looked for something similar in the Hybrid theme, but the drop down was blank … how do I enable them for Hybrid theme ? may be this is the subject for your next post ?
dinu — I’m not going to deal with the Hybrid theme in this tutorial series. This is more of a general tutorial series for any theme. Hybrid currently has around 15 page templates. If you’re having any trouble with it, ask over at Theme Hybrid. There are several tutorials dealing with how to use the page templates.
What about a photoblog page template for pulling in a category dedicated to photos. It should have single view as well as archive (thumbs) view.
Although I’d like to try it myself I haven’t had the time. Are there any restrictions on having a category specific page template? What about the next/previous post links in a specific category issue?
I’m interested in the template you come up with. Looking forward to the tutorials.
How about a simple page template to display a single category of posts? Gotta start somewhere, eh?
my mistake .. sorry ..
I got it !!
Ryan — You might want to look into category templates. If you were pulling in multiple categories to make a big archive, it might be something.
I really like the idea of a visual archive, which is definitely something I’d want to write about.
rgregrory — You might want to look into category templates as well. It’s a good idea in theory, but we’d just be recreating something WordPress already does.
So I’m guessing you’d say Wordpress is much better than Blogger???
TGLR — Are you making some kind of a joke?
How about a users page, done visually, by grabbing user profile information (if it exists). This could even be separated by user roles…and if you grabbed gravatars, that would be the cherry on top.
So, here’s a list of my subscribers….then display their gravatar (if they have one), and selected fields from their profile information (if it exists).
This would be most useful for a blog that has “contributors” or “editors” most likely, some reason that people would want to see these profiles of course. Or this use case, say it’s for an internal company site, and you want to create an employee directory…or a church directory?
Thoughts?
Justin,
I’m well into your quick-post page temlpate, I’d love to see how you would extend it with a submit to category option as well as adding images.
I have this working on one of my sites but would still like to see how you would do it.
I’d also like to see email-author of post & tell-a-friend about post page templates.
As you can probably tell, I run a multi author site, I don’t want these authors having access to the word press back-end so I’d also like to have edit-post & my-posts page templates.
MyBodyPart — I’ve actually put a little work into a Members page template but haven’t finished it. My biggest concern with something like this is pagination. I know I could create a members list with gravatars and profile info, but once you hit a certain number, you really bog down the site. Another concern is the number of database queries to get user information. WordPress doesn’t really have a lightweight solution for listing users.
It’s definitely doable though, and I can see the real need for something like this.
DaveK — I’ve thought about extending it, but at a certain point, we’re just entirely recreating the WordPress backend. Once we get to that point, it’s probably better to dress up the backend rather than bring the functionality over to the front end. Well, that would at least be easier. Honestly, I think this is one of those things that risks running into the slippery slope dilemma.
An additional category option wouldn’t be tough. I’m not sure how to go about an image-uploading feature though. I’d love to look over what you’ve done.
What I’ll probably do is a page template to let users send a post (along with tags and images). The post would be saved and marked as Pending Review.
Justin, category templates are great. The problem is the lack of interface for selection similar to page templates. I’ve always wanted to see this added to the categories page. It would be great to load up a theme with not only page templates but category templates as well. When a user creates a new category they could also choose what type of template they’d like to render that category (photoblog, calendar, quicklinks, portfolio, etc…). Unfortunately, pages are the only ones that get a UI. That’s from where my suggestion originated.
What’s you’re opinion?
Stefano F. (tacone) — Yeah, that’s what we were talking about with the Quick Post template in the Hybrid theme, which could be molded to set the posts as “Pending Review.”
Ryan Fitzer — My opinion is usually that users want an interface for too many things.
Making specific categories use a specific category template based on your suggestions is relatively easy. Providing the interface is a bit tougher but definitely something that could be done. Your ideas are great, and I agree that having something like this would be cool. Maybe I’ll do some category template tutorials after I’m finished with page templates.
I just coded a page template to pull in a certain category and right away I ran into the problem where users won’t actually be able to choose the category without some separate interface. Which, like you said (and I agree) can go a bit too far. Didn’t see that coming.
Ok, my new suggestion for a page template is for a résumé. I make a lot of artists sites and the second biggest request I get is for the ability to have a standard formatted résumé page. The template I’ve made is pretty standard (example: http://davideology.com/?page_id=4 ). Maybe you’d have more exciting ideas
Ugh ! It’s already there
.
I’ll try to get it using the rich editor and so on, but it sounds like a good start.
Justin, I have thought about dressing up the back end rather than creating page templates to do similar functionality but I’m still stuck on page templates.
Dressing up the word press back end is another nightmare I don’t want to get into.
Took a while to figure out but adding images using:
on the quick post-page template works perfectly, creates the thumbnails & adds links to full images…
wordpress should have post templates as well as page templates.
I always enjoy reading about what’s cooking in your brain, Justin!
The only idea I could come up with is a post template, but Chris beat me to it.
Love to see you hybred them pull in rss feeds that I assign a static image (user/author) to
Ryan — Yeah, the situation would always call for an interface. A resume page template would be pretty cool though.
DaveK — Fiddling with the WP backend would only require CSS edits. I believe there are several plugins now that make this process much easier. I still like the idea of page templates for some of the stuff though.
chris — I’d have to disagree about post templates being a part of the core because most people would never need the feature. Plus, this is easily enough done with a plugin. But, it doesn’t really matter; post templates aren’t really a part of this discussion.
Bonnie — Chris was talking about the ability to have single post templates. Single post templates are really outside the scope of this discussion.
ricland — If you have any ideas for the Hybrid theme, you should share them on the community forums over at Theme Hybrid. This discussion doesn’t have anything to do with that theme.
Hi Justin
Although definitely page templates have a great potential, but I have a problem which I am really stuck in!
So, I am making a Page Templates within my WP. One of the Page Template is confusing me a lot.
This Page Template denotes Projects. Now there are three projects as of now and ofcourse a new project can be created later by the user.
When a New Project is made, it is assigned that Project “Page Template”. Now the problem is that I want to have a different gallery for each project within my Project Template.
I know how to make a gallery and how to make user to put it through Page, but what I am stuck in that how would I control different Project Galleries within the same Project Template. Ofcourse, I have to find a way, to let user do that for every new project he/she makes.
Do you think, I can achieve a solution to this problem through Page Templates?
Many Thanks!
could you create a template that had a grid of thumbnail photo on the left half of the page.
Each thumbnail would be clickable and, wehn clicked, a larger version would show up on the left hand of the page, and in a perfect world, a caption for that enlarged image?
I’m an illustrator and would love to create that kind of portfolio template. I’m fairly new to Wordpress, so – don’t laugh – but is what I am imagining even in the realm of possibility with a template?
Thanks for starting this. I don’t think I even need a tutorial, I just need to do it. My site theme is Cutline-based but majorly modded (and not very clean, I’m afraid, though I’m working on a cleaned-up version without the discarded CSS and whatnot).
As the blog evolves, I’ve found myself using a lot of conditional PHP to control things that I could solve with a couple templates. Like one for pages where I want 2 sidebars instead of 1. And another template for pages where I don’t want any. Those are the most-common changes I make to pages. All the code is there, too, I just need to straighten it out and put it together. But my brain got so fixated on the conditional PHP solution that it wasn’t thinking about simpler alternatives.
Thanks for the idea! (I’ll also be following the series to see what else people come up with.)
hey justin,
do you think it’s ideal to use templating to create page variations? i.e seperate the content being displayed, and how it’s being displayed on a WORK page (portfolio) vs. the BLOG page.
would be klutch for artists, illustrators and designers if they could easily create a page called work, select “portfolio template” in the drop down, and then be able to skin and customize their portfolio that way, as supposed to having an entire site dedicated to artwork.
thanks,
alvin
I build real estate and legal sites using WP as a cms. One page template we use for RE is a property listing template. Another is a featured listings template for thumbnails of property that link to the specific single property listing template – basically a gallery template. We also have a blank template with no sidebars for framing in 3rd party property search programs.
Couple the different page templates with widgetized content areas and you have a huge number of layout options.
Hi,
Thanks for the post, I would like to raise an issue I am encountering. I am using a customized theme. This theme doesn’t have the ‘Template’ dropdown within the ‘Attributes’ box. Is there a way for me to add that dropdown box?
Thanks
I am making a page template that dynamically calls different header templates for SEO purposes.
Just to give a basic idea, I have the metas from google that only need to show up on the site root. So if the page being called is the site root, then the page will call rootheader.php and load the header with the google meta.
One more example. I only want certain pages to be tracked by analytics. So I have an analyticsheader.php
So that’s what I am doing with my headerselectpage.php custom page template.
by the way, if the admin of this site cares to edit my original content, this is a great source for the proper conditional tags to use in your custom page template to call different headers based on certain criteria.
http://codex.wordpress.org/Conditional_Tags
Thanks alot!
That pictured helped me alot, due to a bug in wordpress admin I couldn’t see the page template until I selected default theme – and then back to my own. But it was the picture that made me realize that there should’ve been something there and not just that I didn’t find it. Thanks again…
Keep up the good work.
Best Wishes Palle
Very helpful tutorial, hope you keep posting on your site. Gotta love WordPress!
I don’t see where to choose a page template. I don’t see anything called Attributes (I’m using 3.1). The WordPress codex says, “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.” I can’t find that either.
Can you help?
Thanks
you say change the header and then save the example.php–but WHERE do you save it? when it’s modified, do you mean modify it within a text editor and then save it there, and then upload it ( example.php or any new template) ? if so, which directory do we upload/save it to? wp-content? OR the folder where the material for that page goes? (In my case, blog/video/example.php). I’m just a little confused about where we put these things we create.
that template i created is also not showing up in the Page Attributes/Parent/ drop down box…