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.

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

Posted Monday, June 15th, 2009 · Back to Top

SPONSOR

Add Comment

27 Comments 20 Mentions

  1. Bill Lowden Author Editor

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

    ·

  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

    ·

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

    ·

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

    ·

  5. video Author Editor

    tahnks.

    very good

    ·

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

    ·

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

    ·

  8. sonichtml Author Editor

    very Nice….thank you

    ·

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

    ·

  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!

    ·

  11. lossendae Author Editor

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

    ·

  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! :)

    ·

  13. xtence Author Editor

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

    ·

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

    ·

  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?

    ·

  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.

    ·

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

    ·

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

    ·

  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,

    ·

  20. Mahmood Author Editor

    Hi,

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

    Thanx anyway,

    ·

  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

    ·

  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…

    ·

  23. SMiGL Author Editor

    Good article. Thanks

    ·

  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!

    ·

  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

    ·

  26. Boyce Author Editor

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

    ·

  27. http://www.winterscarfjapan.com Author Editor

    湿った布を呼吸する必要があります を考えるは、共通ファブリック。A弱いと 病んでいる人は のほとんど、完璧な繁殖 地面のため、ヘルペスウイルス。ことができます 頻繁シープスキンの検索 インプラントのため、非常に低価格。とき苛性アルカリ溶液は と一緒にそれオイル 体験化学 一種の反応けん化と呼ばれます。

    ·

 

Build Internet by One Mighty Roar. Since 2008.