Custom Category, Page and Post Templates for WordPress Overview

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!

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 von Gabe Diaz
Categories: Blog | Tags: Wordpress | 76 comments

Comments (76)

Michael Johansen says December 6, 2010 at 11:50 am

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

Reply
Michael Johansen says December 6, 2010 at 2:34 pm

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

Reply
Michael Johansen says December 6, 2010 at 3:37 pm

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

Reply

Michael Johansen says December 6, 2010 at 3:39 pm

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

gabediaz says December 9, 2010 at 12:41 am

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

Reply

markus says January 6, 2011 at 7:52 pm

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 ?

gabediaz says January 6, 2011 at 11:35 pm

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

markus says January 7, 2011 at 7:01 am

@ gabediaz – thank you

Reply
markus says January 8, 2011 at 5:27 pm

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.

Reply
alat sulap says January 18, 2011 at 4:56 am

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?

Reply
Full Specs reviews says February 20, 2011 at 8:09 pm

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

Reply
Shovan says April 15, 2011 at 9:36 am

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

Reply
gabediaz says April 18, 2011 at 9:41 pm

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

Reply
Tory McBroom says June 2, 2011 at 6:23 pm

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?

Reply
Akif says June 3, 2011 at 2:51 pm

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

Reply
jenny says August 12, 2011 at 1:42 pm

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

Reply
Paulo Henrique says August 23, 2011 at 1:25 am

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

Reply
Kiki says September 2, 2011 at 3:34 am

Thank you, this was a great help for me!

Reply
ashocka says September 13, 2011 at 9:09 pm

Thanks a ton, worked like a charm!

Reply
Carlos says December 5, 2011 at 8:34 pm

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!

Reply
Gabor says February 24, 2012 at 5:43 pm

You are the man! Thanks, very useful!

Reply
Pingback: How To Start A Podcast: An In-Depth Guide From Planning to Launch Day | DavidRisley.com
rich says April 2, 2012 at 11:17 am

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

Reply
rich says April 2, 2012 at 12:15 pm

Regards my above comment:

Solved by changing TEMPLATEPATH to STYLESHEETPATH

woohoo!

thanks for code though.

Reply

← Older Comments

GabeDiaz.com

Pages

Popular Posts