Custom Category, Page and Post Templates for WordPress

Quick overview of custom templates for WordPress Categories, Pages and Posts. You may already be familiar with Category and Page templates but custom Post templates are just as easy.

DISCLAIMER: Before making any edits to original files make sure to have backups in case something goes terribly wrong…not that it should but you can never be too safe!

WordPress Category Templates

WordPress Category templates are very easy to use, view the WordPress Codex – Category Templates and you will see that hierarchy for a category templates is:

  • 1. category-6.php
  • 2. category.php
  • 3. archive.php
  • 4. index.php

This basically just means that WordPress will first look for a template labeled category-6, if there is none, it will then look for category.php and so forth all the way down to index.php.

To create a custom category template, just copy your category.php and resave it as category+”your category ID number.” If you do not have a category.php, you can copy your archive.php or index.php but just remember that your custom template will look like the template you copied until you make your edits. So if you have a category.php, archive.php and index.php you will want to copy your category.php and work from there.

You can find your category ID number by logging into your WordPress backend…go to your categories section and hover over or copy any category names and you will see your category ID. Upload category-”ID#”.php to your theme directory and the specified category can now be freely styled to look differently than your other categories.

WordPress Page Templates

WordPress Page Templates may be easier than Category Templates. WordPress looks for templates in the following order:

  • 1. The Page’s selected “Page Template”
  • 2. page.php
  • 3. index.php

Let’s pretend we want to create a specific template for an “About Us” page. Most themes will have a page.php so once again, you can copy your page.php and resave it, let’s call it about.php.

Once resaved, our page template must start with the following 5 lines of code so add the following to the very top:

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

The above sets a name for your page template, so you can enter just about anything in the Template Name: “Your Choice” For the ease of consistency I would label the template name something similar to what I am saving the file, so this about.php will have a Template name of About. Now that you have your Page Template named along with some copied format from your original page.php you can edit this about.php to your hearts desire. Any edits made to about.php will only affect those pages using this template. Upload your new about.php to your theme directory and we are all set.

To use a Custom Page template just create or edit any page. You should see a dropdown box labeled Page Template, if all is in order you should see your template name as an option in the dropdown.

WordPress Post Templates

WordPress Post Templates are great because they allow you to make posts in different categories different from each other.

For example let’s say you had 2 categories named Apples and Oranges. You styled each category differently using Custom Category Templates but also wanted posts that appeared in Oranges to have a different look than posts appearing in Apples.

Custom Category Templates do not pass any styling to the posts within, posts take their styling from either single.php or index.php as per the WordPress Template Hierarchy.

Most themes will have a single.php, so yes once again duplicate your single.php…twice. We only need two Post Templates in this example since we want one Post Template for Oranges and we will just be using our original Post Template for posts appearing in the Category Apples as well as for the rest of our posts in our blog.

Let’s name one of our copies of single.php to singleOriginal.php, this is a direct duplicate of our original file, unedited.

For our second copy of single.php, which will be used as a Custom Post Template for all the posts in Category Oranges, let’s save this file as singleOranges.php. This file will be the edited single.php that will have whatever custom edits you want for all Posts in the Category Oranges. Make your edits to this file and you will also need to retrieve the category ID for the category Oranges, let’s pretend it has an ID of 10.

Recap

Before we move ahead, let’s make sure we have everything in order, we should have 3 files and 1 Category ID number.

The 3 files consist of a singleOrignial.php which is a direct duplicate of our original single.php. We should also have a singleOranges.php which has our edits for our custom look for all posts in the Category Oranges (ID #10). And finally we should still have our original single.php unedited in it’s original format.

Now let’s edit single.php since WordPress first goes to single.php for all Post Templates. Edit your single.php with the following:

    <?php
    $post = $wp_query->post;
    if ( in_category('10') ) {include(TEMPLATEPATH . '/singleOranges.php');}
    else {include(TEMPLATEPATH . '/singleOriginal.php');
    }
    ?>

That’s it! Basically the above checks the posts to see if it’s category 10, if so use the template singleOranges.php, else use singleOriginal.php. What if you wanted a Custom Post Template for Oranges, Apples and Grapes but still wanted a single.php for everything else?

    <?php
    $post = $wp_query->post;
    if ( in_category('10') ) {include(TEMPLATEPATH . '/singleOranges.php');}
    elseif ( in_category('11') ) {include(TEMPLATEPATH . '/singleApples.php');}
    elseif ( in_category('12') ) {include(TEMPLATEPATH . '/singleGrapes.php');}
    else {include(TEMPLATEPATH . '/singleOriginal.php');
    }
    ?>

A very easy way to customize posts in any category. Go ahead and get creative with customizing then come back and leave a comment to show it off, would love to see what some people do!

About Gabe Diaz

Gabe Diaz is web professional and consultant focusing on design and development, currently based out of South FL. When not geeking out on the internet you will find him spending time with his children. You can also find him on Google+: +Gabe Diaz, Twitter: @GabeDiaz and Facebook: GabeDiaz.

13. June 2009 by Gabe Diaz
Categories: Blog | Tags: | 80 comments

Comments (80)

  1. Thanks for the trick, very effective for un single post page. But I would like to display posts with a different layout depending on categories within my blog homepage on index.php page. Is there a hack for this ?

  2. @Eric

    If you want to style posts differently on your index.php and have them change depending on which category they are in you can try this within your loop:

    <?php if ( in_category('3') ) { ?>
    <div class="post-cat-three">
    <?php } else { ?><div class="post"><?php } ?>

    Then you would just apply CSS to make your edits.

    WP 2.7 introduced the post class which make the above even easier. Basically your In your loop you would include:

    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

    The above outputs a category specific class which you can style via CSS.

  3. Brilliant. Just what I was looking for. Thank you! I’ll post my website when it’s done. :)

  4. @Adam -

    Glad you find it useful. It’s really great for changing the look of categories and single posts. Definitely share your site link when you are done!

  5. This is fabulous! Thanks SO much for posting. I wouldn’t have figured out how to style a single post within a category without this.

    So here’s what I did. I had already created category templates, so that when you clicked on a certain category that it was differentiated from the rest of the site (in my case, with an image):

    http://modite.com/blog/category/character/
    http://modite.com/blog/category/photos/

    Then I used the instructions and code you provided to do the same with single posts within those categories so the same image would show up on those single posts in addition to the category pages. Examples:

    http://modite.com/blog/2009/10/08/wishlist-missed-connections/
    http://modite.com/blog/2009/10/08/dinner/

    Anyway, thanks again. So useful.

  6. You think it’s possible to create custom header templates?

  7. It is. I just figured it out. You just have to create a new header template (lets say ‘header1′) and include in your template files like this:

  8. @rebecca –

    Glad you found it useful and yes passing along styles from custom categories to the posts within those categories is why I needed a solution like this. By creating custom post templates you can modify every aspect of your post…really useful if you have a category sponsored by “x company” and need to show certain ads or a banner for the category and the posts within.

  9. @adam –

    If you want to include any php in the comments try starting with
    < pre lang="php" > and ending with < /pre > just remove the spaces between the brackets.

    < pre lang="php" > code < /pre >

    But glad to hear you figured out how to swap headers based on category.

  10. You have no idea how long it’s taken to find someone that just explains it. So many places tell me what to do, but then I don’t learn anything.

    You just made my life so much easier. Thanks a ton.
    .-= Joseph´s last blog ..test13 =-.

  11. Oh I also meant to ask…I’m using a theme that has a home.php and then an index.php, where would I make these changes.

  12. @joseph –

    No problem! Just duplicate your index.php and rename it to single.php then edit that single.php file for any changes you wish to make.

  13. Hola
    GabeDiaz

    How are you today?
    I tried to email you , and it bounce back

    I have one question, I’ve seen your website and your work and we like it!
    Can you tell me, let me know, drop a hint or whatever you can do to tell me how you did or what you use to build your work link (page), please
    We’ve been looking every kind of portafolio and gallery plug ins and none work as well as we need to and we want something simple
    and good designed as you have.

    Im trying to do a post with the projects thumbs and linking to a post for the project, dont know if its the rigth way

    thank you and whenever you have time and posible
    if you can recommend us please

    we are moving from our actual website to a wordpress site.

  14. @Trumoc –

    First and foremost, thank you for alerting me that mail@ was down. I recently moved hosts, but mail@ should be back up and running.

    Thanks for the kind words!

    As for my Works page it’s actually a custom category page. The thumbnails are added to the posts as Custom Fields, in the category template I just call in the thumbnails for all the Work posts from within the loop. What’s great about using Custom Fields for my thumbnails is that I can reuse as needed, as you can see in my sidebar.

  15. Hola
    No problem, you’re welcome!

    Thank you for the info, i’m going to try and do it like that, and see how it goes.

  16. Great Post!

    One question, I have a parent category and many child categories. Do you know how to add a custom category template so it includes all child categories?

    Let”s say my parent category is “cars” or category “30″. How I can I use the same template for all Brands or “child categories” such as Lexus, BMW etc.

    • @Chris –

      I think WordPress treats all subcategories as separate categories which means you will just need to create a template for each category and subcategory. Basically you will just duplicate your category template and change the cat ID. Sucks but I can’t think of another way to pass along styles to subcategories.

  17. Hi,

    That’s a really great post!

    Is is a way to assign categories to pages in order to have active state according to the category on the main navigation?

    Or maybe, Create custom templetes for categories, but what then with pages?

    Basicly I wanted to create:

    home – page (displaying all posts from all categories) or custom templete?
    about – page
    articles – category with listed posts from articles category
    tutorials – category with listed posts from tutorials category
    freebies – category with listed posts from freebies category
    contact – page

    The problem is to display is and keep active state button even if we are deep into the category -> post hierarchy…. Is that any way to acomplish it?
    .-= Paul´s last blog ..C.R.A.P. Website Design principles, are they really so crap? =-.

  18. @Paul –

    To get the active category when viewing single posts check out the following links:
    http://www.designshard.com/video-tutorials/highlight-wordpress-category-when-on-a-single-post-tutorial/

    http://kahi.cz/wordpress/highlight-used-categories-plugin/

    Basically the plugins will allow for a “current” class to be included to your wp_list_category() and will also display them for when into single posts.

  19. Hi Gabe…you a freakin time saver!! I’ve been lookin around for nearly 3 hours searching article about this, finally i find it here! you rocks man..deeply apreciate on your information

    cheers!

  20. Same as Daniel! Absolute hair saver thanks for writing this.

  21. @Daniel, @Ric – No worries, glad you found it useful!

  22. Forgive the rather basic question but where in single.php do you place the code mentioned above? post;
    if ( in_category(’10′) ) {include(TEMPLATEPATH . ‘/singleOranges.php’);}
    else {include(TEMPLATEPATH . ‘/singleOriginal.php’);
    }
    ?>

  23. @Roger – Essentially the code directs your theme to look for a new single.php template so you can either replace all the content in your single.php with the new code(recommended) or place it towards the top of the page before the loop.

    Enjoy!

  24. Brilliant!!!!!
    I haven’t yet tried this out (just discovered your website a few minutes ago) but it may be just what I need! I’m using a custom post template plugin at the moment, only I now want to use Theme Switcher and that hasn’t gone down too well with post template plugin at all!!!

    If I can use your method instead I’ll be a very, very happy designer!!

    So thanks, Gabe!!!!

  25. Hi

    This was really help full where this is exactly what i need. Thanks a lot..

    Desu

  26. @Louisa & @Desu – Enjoy!

  27. Hey,

    I’m trying to customize my search page template.

    Instead of displaying every search result in the same way, I want all the “pages” to only display title and excerpt, while all other posts can have the title, date, category, etc….

    This is like the in_category solution you posted on Sept 9, 2008, but this time I want it to output the pages differently.

    I hope there’s a fast/easy solution to this. :)

    Thanks in advance!!

  28. @Lasha – You should be able to use conditional tags in your search results page, I will try it out.

  29. @Gabe – That would be awesome. I tried including conditional tags but couldn’t figure it out no matter what I tried.

    If anything, I can send you a copy of my search results template if it’ll make things easier to figure out.

  30. @Lasha – I tried almost every is_page(), is_single() combination along with page/post ID/name and still can’t get WordPress to distinguish the difference between posts and pages. Conditional tags work in the loop but pages and posts seem to get treated the same…if I figure it out I’ll let you know!

  31. Hey Gabe, any luck with this?

    Just wondering cause it could still be really helpful in my project. :)

  32. Any reference or suggestion for implementing this from a child theme?

  33. @Dave – Child themes would be slightly tricky. Since child themes rely heavily on the parent, child themes usually set their looks in a functions.php file along with a CSS file. There might be a custom home page (home.php, customname.php) but the rest of the site’s layout is based on the parent theme’s files or the child theme’s functions file, I would think it really depends on the theme since they can be setup differently.

    Short answer is that Category and Page templates should work via the WP template hierarchy, you would just need to copy the output layout from the parent or child theme and make edits to that.

    As for the Single Post template, the child theme would mostly likely not even have a Single.php but you would be able to make edits in the funtions.php to sort through the post’s categories(if/elseif) and then apply a Post template file built by copying the output layout from the parent or child theme.

  34. Could I simply copy those files to the child theme before modifying them? Then they would override the parent, correct? I think that’s what my preferred theme reference says: (StudioPress Genesis) http://j.mp/aI8GtU

  35. @Dave – I went downstairs to get some medicine(been sick all week) and was just about to reply on your post on your site after coming back!

    Yes you are correct. If your child theme has any theme related file(s) WP will use what is in your child theme before looking in your parent theme. Just as the WP hierarchy overrides index.php with home.php (if there is one), WP will override your parent theme files found in your child theme (if there are any).

  36. What you’ve done for all of us here is incredibly awesome, Gabe. .

    This is, I think, one of the finest WordPress posts I have ever seen.I have dug into supporting references, and you have boiled it down to just what we need, and grouped all the essentials together.

    Fantastic work!!

  37. Thanks for your thought the Simple Hooks Plugin. I’m already looking into that on the StudioPress Support forum here: http://j.mp/bGKNJ3

  38. @Dave – I am humbled by your kind words, thanks again! It’s rewarding to know that others can make use of some of things that I’ve learned when working with WordPress.

  39. What would you enter into a template to access the settings?

  40. Ooops. the tag was what I was referencing

  41. Tried the code tag in my comment without success “body” html tag is what I am referencing

  42. Above is my code where I have made seven different pages for seven different page. It works fine but if I am adding child page to one of these pages it is taking default templatepath. I want that child page should take the parent template please help me

  43. This method works beautifully for me, but i modified the approach slightly by used category names instead of ID’s. It makes it that much easier to read when modification time comes along.

  44. @Fahim – Your code did not display, feel free to shoot me an email if you’d like.

    @Jason – Great point, the category slugs might actually be easier for people to use as well!

  45. Hi I’m working with a 2010 child theme and I want to create a single posts template related to a category. You said to Dave that you have to add “edits in the funtions.php to sort through the post’s categories(if/elseif)” Any chance of getting the code for that?
    Thanks

  46. Hi gabediaz,

    What I’m trying to achieve is that all entries in a given category, and all subcategories of that, uses a different sidebar than the other categories.

    Is it in any way possible and can you possibly help me to achieve this result?

    Regards,
    Michael Johansen
    BuildinganOnline.com

  47. Sucks ;) – I’ve just found out you have answered that question once before – and that it can’t be done.

    Anyway – I’ve followed your instructions with great success so far and almost obtained the wanted result. I’ll be back if I have more questions.

    Thank you for a really useful article/post

    Regards,
    Michael Johansen
    BuildinganOnline.com

  48. I haven’t much knowledge when it come to programming, but shouldn’t it be possible by using an array?

    I’ve tried but can’t make it work…

     

    Regards,
    Michael Johansen
    BuildinganOnline.com

  49. Didn’t work the way I thought – I try again :)

    /* If this is a category archive */ if (is_category(array(771,772,766,792,768,769,783,791,818))) {
  50. @Michael – Sorry have been really busy at work. Let’s say you have two categories in which you need to display a different sidebar then the rest of your site, you could do something like the following:

    <?php if (in_category('Cat1', $id)) { ?>
    Cat1 info
    <?php }elseif (in_category('Cat2', $id)) { ?>
    Cat2 info is much better
    <?php }else{ ?>
    <?php get_sidebar();?>
    <?php } ?>

    If I have time I will try to write a more detailed post about this question, thanks!

  51. Is it possible to use the name of cat instead of the ID for
    the post templates ? So the code would be reuseable when setting up
    new website and have nothing else to do than create a cat withthe
    name ?

    • @markus – Yes you can. So the above example would look like this:

          <?php
          $post = $wp_query->post;
          if ( in_category('Oranges') ) {include(TEMPLATEPATH . '/singleOranges.php');}
          elseif ( in_category('Apples') ) {include(TEMPLATEPATH . '/singleApples.php');}
          elseif ( in_category('Grapes') ) {include(TEMPLATEPATH . '/singleGrapes.php');}
          else {include(TEMPLATEPATH . '/singleOriginal.php');
          }
          ?>

      Thanks for bringing this up, it’s a great option!

  52. @ gabediaz – thank you

  53. When I add this to my single.php it works great, the post template is picked up and displayed like the posttemplate is set up but the single.php is call also also and the output ist posttemplate and single in one.

  54. thanks very useful post
    html and php always make me headache
    oo i wanna ask, is it etichal if i change the name at the footer template?

  55. Finally i found it here..
    I really confused about custom Category…
    thanks for sharing

  56. Thanks for the post, give me the know about category templating. Currently each category shows 10 post I know I can change this via admin panel. Is there any where in the code I can add how many post it should display on the page?

    Cheers,
    Shovan S
    Web Designer / Creative Director

    t: http://www.twitter.com/ShovanSargunam
    f: http://www.facebook.com/ShovanSargunam
    w: http://www.shovan.org / http://www.thescube.com
    y: http://www.youtube.com/ShovanSurya
    l: http://www.linkedin.com/in/ShovanSargunam
    f: http://www.flickr.com/photos/shovan

  57. @Shovan – Yes you can change the number of posts per category by editing your WP Query.

    So in your category template you can use:

    <?php query_posts('posts_per_page=10'); ?>

    That would show 10 posts per category page.

  58. Hey Gabe,

    How would i make it so I could use the same custom template for multiple categories(basically parent category and it’s children). Do I need to use in_category (id) || in_category (id2) || in_category (id3) and so on?

  59. I have installed a theme recently and i was looking for this info on google and found your site Thanks mate

  60. very useful, I always think of the shortcomings of the default wordpress template, and finally I found this article, thanks

  61. Didn’t know it was so easy ! Thanks for sharing it !

  62. Thank you, this was a great help for me!

  63. Thanks a ton, worked like a charm!

  64. It will be very usefull I hope. Like you explained before @eric I want to style posts differently on my index.php and have them change depending on which category they are in. I entered the (short) code into my loop.php.

    Now i’m missing the next step. After entering into the loop it will output a category specific class which I should style via CSS. I can’t find the output and I don’t know where to style it. Can you help me out?

    Thanks a lot!

  65. You are the man! Thanks, very useful!

  66. Hi, this will solve a problem perfectly, however, I am using a child theme and this fix only works if the ‘singleoriginal’ and (in my case) ‘singlewide’ files are in the parent theme folder. If they are just in the child theme folder it can’t find them. Is there a modification you can suggest?

    thanks
    rich

  67. Regards my above comment:

    Solved by changing TEMPLATEPATH to STYLESHEETPATH

    woohoo!

    thanks for code though.

  68. Hey Just read your post as i was searching for something. I want to use the same thing for a post that belongs to a category inside custom post type. But can’t figure that out…please help me if you know any method to do this otherwise it is working fine with normal post system of wordpress.

    I have a custom post type named ‘feature’ and a category inside it named ‘tech’. i have the template and is working fine but need help to activate it for my tech category…

    Thanks
    Any help appreciated as i need it urgent…

    • I think a taxonamy template would let you apply a style to your tech category:
      taxonomy-feature-tech.php for the tech category style

      and for the single pages have you tried single-tech.php?

      single-feature.php would style all the posts in your custom post type of Feature, try single-tech.php or even single-feature-tech.php and see if either work.

  69. Thank you so much Sir and Happy New Year from Modern Masterpiece. I was looking for how to customize WordPress categories and came across this one and the one from WordPress. I’d like to thank you be cause not only did I get to work on the first time, but this will help my SEO for special blogs relating to products I love. Very helpful.

Trackbacks/Pingbacks

  1. Enabling Author Pic and Bio for WordPress Single Posts | GabeDiaz.com - Personal portfolio and all things web related.
  2. How to give a Wordpress 3 site sections that each look different.
  3. Tutorial Roundup: WordPress Custom Post Types and Automatic Galleries — Creativity Included
  4. How To Start A Podcast: An In-Depth Guide From Planning to Launch Day | DavidRisley.com

Leave a Reply

Required fields are marked *