Custom Category, Page and Post Templates for WordPress Overview

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!

30 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