Quick Tip – Separate Page Templates in WordPress
Sometimes not every page on a blog can fit the same “About Me” style.
Making unique page templates is surprisingly simple to do in WordPress, and is often an overlooked feature. There’s no need for bloating a single file with series of PHP loops to determine the file name and content. This is built in simplicity, and we’ll start with a brief explanation of how it works.
How WordPress Handles Templates
Put simply, WordPress handles templates in a hierarchy. Each page loads from a different base template file based on the type. A blog post loads from single.php, category view from category.php, and pages load from page.php by default.
This is where WordPress becomes awesome all over again. It supports and recognizes multiple variations of page templates as long as the prefix is “page-”. If you’re lost, the diagram below from the WordPress Codex should help explain.
Follow the image link below for a full view
This hierarchy of file names opens up a number of exciting possibilities for themes. A similar concept is applied within the specific category ID’s, so each of your categories could have a unique look. A photos section could appear as a thumbnail gallery while a text section might just show lists. The result would be impressive but also easy to manage since it remains within the WordPress engine.
Make a Custom Page
So as you may have picked up from the section above; making a custom page template is easy. You don’t even have to know any fancy PHP to do it. It’s simply a matter of making separate page file, renaming it, and then assigning a display name in the opening comments.
Create a new file called “page-news.php” which will be the basis for our new community link feed. Once the file is created in the blog theme’s root directory, we’d just have to past in the following comment in order to have WordPress fully recognize it.
<?php /* Template Name: Community News */ ?>
How’s that for easy? From this point the custom page template can now be designed independently. None of the code written in the default page.php will be loaded as long as the custom file exists. Now that we’ve got the file made, we can go into the dashboard for the rest.
Go ahead an make a new page or open an existing one in the dashboard. I’m running version 2.8 at the time of publishing, so in the right column of the page editor I see the following series of options in the “Attributes” block:
If we look at a closeup of that box we’ll see that there is a drop down box label “Template” in the middle. This is where we activate any custom page templates from. The name loaded here is the one we place in the opening comment lines of the page-customnamehere PHP file. In this case it will be called “Community News”.
Enjoy Your Fresh Start
And that’s it! This kind of theme development makes redesigning much more segmented and therefore easier to do over time. Do you know any WordPress themes out in the wild that use page templates effectively? Post a link below to share!
Discussion
June 15th, 2009 at 8:28 AM
Nice tutorial Zach. I never considered using templates in WordPress. Thanks for the info.
June 15th, 2009 at 9:16 AM
Great & useful tutorial. I would love it if you would follow it up showing how you would then make that template look different. let’s say you wanted a page that – as a template – came up with a photo gallery on it. How would you make it look different! It would be of great value to demonstrate how you went on and created this community news feed page. I hope you will do that!
Thanks,
Fred
June 15th, 2009 at 10:56 AM
Great piece of information. For someone who is not a designer, starting off with an existing template is easier. Start off with your current page template and make the changes as required (you can remove the sidebar, change the colors etc). Once finished save/use it as Zach explains above.
.-= George´s last blog ..What I like in WordPress 2.8 =-.
June 15th, 2009 at 1:31 PM
Another great tutorial. I myself have never used templates either.
.-= Jad Graphics´s last blog ..6 Free & Awesome Text Effects Available for Download =-.
June 15th, 2009 at 7:14 PM
tahnks.
very good
June 15th, 2009 at 8:44 PM
I have been creating custom page templates for awhile, and have just got into adding “theme options” with the functions.php, but am having some trouble, thanks for the quick tip though!
.-= Montana Flynn´s last blog ..Twitter Weekly Updates for 2009-06-12 =-.
June 15th, 2009 at 9:06 PM
The page template is very useful if you wanna create a CMS website using WordPress. I had been using the page template technique a lot for my projects.
.-= Dicky´s last blog ..30 High Quality Magento Templates To Spice Up Your E-commerce Projects =-.
June 15th, 2009 at 10:49 PM
very Nice….thank you
June 16th, 2009 at 9:24 AM
Hello and thanks for the tip!
I just can not make this work for me.
I have installed a theme named “City Lights” into my WordPress 2.8. The theme woris fine, but that is not my default theme for the moment.
I also have a page called “Kontakt”. The url to that page is http://www.symbianbloggen.se/index.php/kontakt
1. First I create a file in /wp-content/themes/ folder called page-kontakt.php
2. Then i copy and paste the php-code found above in this post into the page-kontakt.php file.
3. Before saving, alter the 3rd row:
# Template Name: Kontakt
When I log in into Admin to edit the page kontakt, there is no option “Kontakt” in that drop-down.
(Just to make sure, I also copied the file page-kontakt.php to /wp-content/themes/city-lights folder)
Any ideas what I did wrong?
.-= Ilias Bennani´s last blog ..Tips: Mobify.Me anpassr din webbplats för mobilen =-.
June 16th, 2009 at 10:21 AM
@Ilias
If I had to guess, your problem may be coming from the fact that the page-kontakt.php does not contain any code past the original comment.
Try making a duplicate of your existing page.php file and then renaming/pasting in the comment code at the top. If you’re still having issues, come back and we’ll take a better look at it.
Good luck!
June 22nd, 2009 at 7:35 PM
Php in html is not the best solution, but wordpress still remain simple and easy for blogging purpose.
June 23rd, 2009 at 9:50 PM
THANKS!!! i was looking for this i googled it and your site showed up shouldve known better to come here in the first place love your blog very helpful i have also been getting your rss feeds keep up the good work Zach! :)
June 27th, 2009 at 6:46 AM
Thanks Zach, i was looking for this a long time, great post, keep on the good work !
June 27th, 2009 at 9:05 AM
I think it is most helpful when you want to design a page that will be customized in order to show specific content. I myself designing a Twitter followers aggregation page in my blog.
.-= Omer Rosenbaum´s last blog ..Did you know? =-.
July 4th, 2009 at 6:12 PM
Just what I was looking for.
I want to exclude the comments section from some of my pages and a separate page template looks like the way to do it.
I notice that you are using version 2.8, as I am, but in my dashbord, I don’t get a templates option in the attribute box.
Do you only get the templates option once you have created a template?
July 5th, 2009 at 10:58 AM
Sorry
I’ve answered my own question… I created a template page and voila, there it was in the page options.
July 17th, 2009 at 5:39 PM
I have a problem. I created a page template and it works. I created the new page template in a different program added the php code and got my new page to show. I want to make the new page my home page which I know how to do by changing the reading options. Everything was fine but when I changed my permalink structure to /%category%/%postname%/ the images on the page would not show up. The whole page was an image so now the people see nothing. How can I fix this
.-= Aaron´s last blog ..How do I get traffic to my website =-.
August 24th, 2009 at 7:54 PM
excellent tutorial. love the diagram and concise explanation. solved my problem in 5 min.
.-= sergi bosch´s last blog ..future technology, a la minority report, is achieved =-.
October 23rd, 2009 at 5:51 AM
Hi,
Thanks for the excellent tutorial. But may be im just new to WP and would like to have a few questions cleared.
1. A normal website may look like this in your webhost directory:
index.php
– /news/news.php
– /videos/videos.php
– about.php
– contact.php
where index.php has a menu reffering with links e.g
( etc.) to a page news.php.
As far my understanding goes everything in WP are posts which can be shown e.g on new pages created with your said method choosing a new template.
Do pages created with your method have a physical presence in the wordpress directory or are they just placeholders for posts taken from database ??
Ive seen e.g http://www.huckmagazine.com/ it has quite a few menu points are they all physical pages? Your menu points too?
2. If physical pages or not can i insert php code in them. I guess i can do that with some plugin. e.g Exec-php?
Thanks in advance,
November 3rd, 2009 at 3:59 AM
Hi,
I got it sought out. Its done by custome page templates.
Thanx anyway,
December 30th, 2009 at 10:11 AM
Hi Guys, just found the web and its great!
I have one question. Creating a new plain template…how can I add 3 columns of text within the main body. Do I need to do this with Divs?
thanks
January 5th, 2010 at 8:49 AM
Is it possible to use a completely different theme for another page? I’d like to add a forum to my blog, but I absolutely need a different theme. I also dont want to do a separate install for the forum…
January 8th, 2010 at 1:31 PM
Good article. Thanks
January 19th, 2010 at 5:57 PM
Easy to understand post. Thanks for that. I got that far already though and simply would like to apply a ‘themed’ style, without the need to get too deep onto the programming bits.
Guess it’ll be a long weekend ;)
if you hav ideas otherwise please write me a mail. Thanks!
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.