Custom Category, Page and Post Templates for WordPress Overview

By Gabe Diaz on Jun 13, 2009 | 8:53 pm

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 Posts 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 just use our original Post Template for posts appearing in the Category Apples and 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 that will be used as a Custom Post Template for the posts in 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!

<?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'); } ?>

72 Comments: Comment or Ping

Eric

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 ?

Sep 1st, 2009
gabediaz
@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.
Sep 8th, 2009
Adam

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

Sep 25th, 2009
gabediaz

@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!

Sep 29th, 2009
Rebecca

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.

Oct 11th, 2009
Adam

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

Oct 11th, 2009
Adam

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:

Oct 11th, 2009
Adam

Oct 11th, 2009
gabediaz

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

Oct 11th, 2009
gabediaz
@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.
Oct 11th, 2009
Joseph

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

Nov 28th, 2009
Joseph

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.

Nov 28th, 2009
gabediaz

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

Nov 28th, 2009
trumoc

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.

Dec 4th, 2009
gabediaz

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

Dec 5th, 2009
trumoc

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.

Dec 15th, 2009
Chris

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.

Jan 7th, 2010
Paul follow me on Twitter

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

Jan 7th, 2010
gabediaz

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

Jan 8th, 2010
gabediaz

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

Jan 10th, 2010
daniel

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!

Feb 16th, 2010
Ric follow me on Twitter

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

Apr 30th, 2010
gabediaz

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

May 7th, 2010
Roger

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’);
}
?>

May 25th, 2010
gabediaz

@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!

May 26th, 2010
Louisa

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

Jun 19th, 2010
Desu

Hi

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

Desu

Jun 23rd, 2010
gabediaz

@Louisa & @Desu – Enjoy!

Jun 24th, 2010
Arnaud Guillaume follow me on Twitter

Thanks a Lot !

Cu

Jun 27th, 2010
Lasha Krikheli

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

Aug 3rd, 2010
gabediaz

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

Aug 4th, 2010
Lasha Krikheli

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

Aug 5th, 2010
gabediaz

@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!

Aug 5th, 2010
Lasha Krikheli

Hey Gabe, any luck with this?

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

Aug 10th, 2010
gabediaz

@Lasha – Sorry, I have still to find a solution to this.

Aug 11th, 2010
Dave Larson follow me on Twitter

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

Aug 20th, 2010
gabediaz

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

Aug 20th, 2010
Dave Larson follow me on Twitter

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

Aug 20th, 2010
gabediaz

@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).

Aug 20th, 2010
Dave Larson follow me on Twitter

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

Aug 20th, 2010
Dave Larson follow me on Twitter

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

Aug 20th, 2010
gabediaz

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

Aug 21st, 2010
Dave follow me on Twitter

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

Sep 4th, 2010
Dave follow me on Twitter

Ooops. the tag was what I was referencing

Sep 4th, 2010
Dave follow me on Twitter

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

Sep 4th, 2010
Fahim

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

Sep 7th, 2010
Jason

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.

Sep 9th, 2010
gabediaz

@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!

Sep 10th, 2010
PenPeg

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

Sep 28th, 2010
Michael Johansen follow me on Twitter

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

Dec 6th, 2010
Michael Johansen follow me on Twitter

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

Dec 6th, 2010
Michael Johansen follow me on Twitter
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
Dec 6th, 2010

Michael Johansen follow me on Twitter

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))) {

Dec 6th, 2010

gabediaz
@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!
Dec 9th, 2010
markus

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 ?

Jan 6th, 2011

gabediaz

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

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

Jan 6th, 2011

markus

@ gabediaz – thank you

Jan 7th, 2011
markus

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.

Jan 8th, 2011
alat sulap

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?

Jan 18th, 2011
Full Specs reviews follow me on Twitter

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

Feb 20th, 2011
Shovan follow me on Twitter

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

Apr 15th, 2011
gabediaz
@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.
Apr 18th, 2011
Tory McBroom

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?

Jun 2nd, 2011
Akif follow me on Twitter

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

Jun 3rd, 2011
jenny

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

Aug 12th, 2011
Paulo Henrique follow me on Twitter

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

Aug 23rd, 2011
Kiki

Thank you, this was a great help for me!

Sep 2nd, 2011
ashocka

Thanks a ton, worked like a charm!

Sep 13th, 2011
Carlos

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!

Dec 5th, 2011