Build Internet has a brand new theme, and that's only the beginning. Read the full story or hide this bar

Quick Tip – Separate Page Templates in WordPress

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
Click for full size chart

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:

Attributes box visible from the edit screen

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

Dropdown Options

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!

Related WordPress Codex Entries

  1. Template Hierarchy
  2. Pages

Wordpress.com stats not installed! Posted Monday, June 15th, 2009 / Back to Top

I this post. Tweet
SPONSOR

26 Comments 20 Mentions

  1. Bill Lowden Author Editor

    Nice tutorial Zach. I never considered using templates in WordPress. Thanks for the info.

    June 15, 2009 · Reply

  2. Fred Author Editor

    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 15, 2009 · Reply

  3. George Author Editor

    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 15, 2009 · Reply

  4. Jad Graphics Author Editor

    Another great tutorial. I myself have never used templates either.
    .-= Jad Graphics´s last blog ..6 Free & Awesome Text Effects Available for Download =-.

    June 15, 2009 · Reply

  5. video Author Editor

    tahnks.

    very good

    June 15, 2009 · Reply

  6. Montana Flynn Author Editor

    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 15, 2009 · Reply

  7. Dicky Author Editor

    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 15, 2009 · Reply

  8. sonichtml Author Editor

    very Nice….thank you

    June 15, 2009 · Reply

  9. Ilias Bennani Author Editor

    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 16, 2009 · Reply

  10. Zach Dunn Author Editor

    @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 16, 2009 · Reply

  11. lossendae Author Editor

    Php in html is not the best solution, but wordpress still remain simple and easy for blogging purpose.

    June 22, 2009 · Reply

  12. henry Author Editor

    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 23, 2009 · Reply

  13. xtence Author Editor

    Thanks Zach, i was looking for this a long time, great post, keep on the good work !

    June 27, 2009 · Reply

  14. Omer Rosenbaum Author Editor

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

    June 27, 2009 · Reply

  15. Keith Davis Author Editor

    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 4, 2009 · Reply

  16. Keith Davis Author Editor

    Sorry
    I’ve answered my own question… I created a template page and voila, there it was in the page options.

    July 5, 2009 · Reply

  17. Aaron Author Editor

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

    July 17, 2009 · Reply

  18. sergi bosch Author Editor

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

    August 24, 2009 · Reply

  19. Mahmood Author Editor

    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,

    October 23, 2009 · Reply

  20. Mahmood Author Editor

    Hi,

    I got it sought out. Its done by custome page templates.

    Thanx anyway,

    November 3, 2009 · Reply

  21. nathan Author Editor

    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

    December 30, 2009 · Reply

  22. jb Author Editor

    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 5, 2010 · Reply

  23. SMiGL Author Editor

    Good article. Thanks

    January 8, 2010 · Reply

  24. André Author Editor

    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!

    January 19, 2010 · Reply

  25. Eric R. W. Author Editor

    This is great. Is there a way to make the navigation links to not show the main site?

    -Eric

    January 15, 2012 · Reply

  26. Boyce Author Editor

    Very good tips, i learn a lot from these tips.

    February 24, 2012 · Reply

 

Join the Conversation

Back to Top / Comment RSS

2012 Build Internet. Created by One Mighty Roar. Icons by Komodo Media. Back to Top