When last we met we talked about Using custom templates to add pages to WP that don’t necessarily call for posts or categories, etc. Today we continue our exploration of custom templates by looking at another little known power hidden within the theme system: Per Category templates.
Deep within the recesses of the WordPress code base lies dormant the power to create custom templates for each of your categories, what is even more astounding is how easy it is to pull off. This sleeping giant merely awaits the correct file names and it will wake unleashing untold shininess and spiffiness upon your visitors heads!
It should be said that this isn’t a feature that we are all going to want to run out and use, but I think that for a select few this will be a a breath of fresh air, not to mention a solution to many frustrations.
When you get down to brass tacks, this is a profoundly easy feature to exploit. All you need to know is the number of each category and you know, what you want each one to look like. So lets look at how I am using this feature here on Sillyness.
I am a big believer in giving information to the user that is both contextually correct and also useful. A prime opportunity for this is when a reader is browsing your category pages.
Here on Sillyness where appropriate you will find in the left aligned column a list of “other resources” specific to the category you are browsing. Two prime examples are the Tutorial and Web Standards categories. On each one you will find links to offsite resources.
Now this is a very limited example of per category templates. If you wanted you could change every aspect of the way the page is displayed, load alternate style-sheets anything… the sky is the limit. But think before you go crazy people.
So what does one need to do to tap into the power of per category templates? Glad you asked!
After the previous discussion, creating these templates will be a piece of cake. First of all lets start off by making sure we actually have a category.php file to begin with. I find it very helpful to have a good layout with which to browse categories, and you readers will too.
So let’s say we are all brilliant and already have a category template file, we need to open that puppy up in an editor and decide what we want to customize for lets say… the gorilla category. Heh, gorillas are funny.
Okay so we are going to create a template for our gorillas category (cat number 18).. okay? Good. So I think we need to have some links to gorilla resources on the net offered to our visitors while they are in our gorilla category listing, don’t you?
So lets get to tinkering , first we throw out an oldy but a goody:
<?php
require('./wp-blog-header.php');
/*
Template Name: Gorilla Category Template
Description: A template for the Gorilla Category.
*/
?>
Next we call for our header.php file and start adding our context specific info:
<?php get_header(); ?><div class="main">
Now usually we would want to just call <?php get_sidebar(); ?> and include the template file sidebar.php, but we are wanting to add that context info and the menu is the best place for it. So we will be hardcoding this bit on each template.
<div class="menu"><ol><li><a href="http://gorilla.com" title="gorillas">gorilla.com</a></li><li><a href="http://jungle.com" title="Home of gorillas">Jungle.com</a></li><li><a href="http://kong.com" title="really big gorilla">Kong.com</a></li></ol></div>
Then we go on and throw out the template tags that tell WordPress how we want to display our listing on the category page:
< div class="main"><?php if (have_posts()) : while (have_posts()) : the_post(); ?><h4><?php the_time('') ?></4><h1><a href="<?php echo the_permalink(); ?>"> <?php the_title(); ?></a></h1><h3><?php the_category(' ,'); ?></h3><?php the_excerpt(); ?><?php endwhile; else: ?><p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> <div class="right2"><?php posts_nav_link('','','Next Page »') ?><br /><?php posts_nav_link('','« Previous Page','') ?></div>And finally we close with the footer call:
<?php get_footer(); ?>
Okay, so now we have created a template for our gorilla category, complete with spiffy links about gorillas for our readers. Now we are ready to save this bad-boy, but how does WP know to use this when gorilla is called?
Now it is time to do something with that category number we found. All you need to do is save this file as category-n.php where n is the number of your category. So since gorilla is cat number 18 we would save this file as category-18.php and upload it to our wp-content/themes/mytheme/ directory.
Easy-peasy as they say. Believe it or not, that is all there is to it. The next time you load the gorilla category you should see the template we just created.
Well that’s it for this installment of the series. I hope you have had as much fun as I have. If you have any questions, leave them here in the comments and I will do my best to answer them.
Stroll on over and visit Kates
March 1, 2007
Goddamnit!!! Where did that came from? I didn’t know that can be done. I know there are more tricks up your sleeve. Here is a better read than the codex.
Stroll on over and visit Arno
March 1, 2007
If you defined the cats #18, #19 and #20 as being children of #17 this should be automatical if memory serves.
When creating the category say #18 in the admin panel, right under the form field you have to put the name of the cat in, you’ll have a drop-down list that let you choose a mother cat. Select #18 primates and you’re done.
Note that this can be changed after creation of the child cat as well.
Stroll on over and visit William
March 1, 2007
I actually had no idea Wordpress could do that. Thanks for the heads up; I’m sure this will come in useful in the future.
Stroll on over and visit Waylan
March 1, 2007
Thats pretty slick. But what if Cat 18 was a subcategory of #17 Primates? Then we have #19 Chimpanzees and #20 Apes. I want all Primates to use the same template. How do I get categories 18, 19 & 20 to use category-17.php? True, I could just copy the file and rename it, but later I may decide to add Sloths as Cat # 23 (21&22 have since been used elsewhere). I’m not going to want to go and copy and rename the template file again. Or will that be addressed in part 3 or 4 or …what? That minor detail aside, this is a very handy feature. One I will no doubt put to good use.
Stroll on over and visit Indranil
March 1, 2007
Wow! Who know these could be done. Thanks. As Shawn said, “on to Part 3”.
Stroll on over and visit Shawn Grimes
March 1, 2007
See, this is what I’m talking about. I didn’t even know this was possible to do. Thanks Chris for opening my eyes to a whole new world. Wait, didn’t that come from a Disney movie? Bah, nevermind. Now on to Part 3!
Stroll on over and visit Splee
March 1, 2007
Chris, Kudos. Superbly written as always.
Stroll on over and visit Tyler Thompson
March 1, 2007
Sliced bread has nothing on you my man. Thanks as always.
Stroll on over and visit John Nunemaker
March 1, 2007
Not to copy everybody else, but thanks for the tutorial. That is a pretty sweet feature.
Stroll on over and visit wordpressCN
March 1, 2007
thank you I will change my blog later!
Stroll on over and visit BRU74L
March 1, 2007
Great! Thanks.
Stroll on over and visit Zane
March 1, 2007
Your WP tutorials are well written. My confidence is increasing. LOL.
Blogs have really been good for css, no? And php, too.
Much thanks.
Stroll on over and visit Jeremy
March 1, 2007
Wow, i really apprecite the tutorial. Not only has this been a great feature that has helped me to understand WP, but it really opens my eyes to php! I look forward to being an avid reader! Thanks! - me
Stroll on over and visit Anonymous
March 1, 2007
This page is broken in IE, left sidebar is well above the content. In other words, the content is pushed below the sidebar, well off the page - faulty flushing probably.
Stroll on over and visit Jeremy
March 1, 2007
the big question I have, is how to structure a link to this category-18.php?
Stroll on over and visit http://shikoseo.blogspot.com/
March 1, 2007
Your work is great. Great presentation. Great explanation
Stroll on over and visit Richard Brown
March 1, 2007
Hi
I am hoping you can help. I have posted this to wordpress.org as well.
I am trying to build a Yahoo Styled directory at this site:
I am struggling to get this right!
I have built the index.php file as standard. I have then built a number of category-21.php type files to reflect the categories.
The idea is that we have a parent called Businesses. This then breaks down into three children - Accommodation, Eating Out and Shops. Each of these then breaks down into further categories. Accommodation is Apartments, B & B, Cottages, etc…
So I have created a number of templates for each category. For businesses I have asked it to exclude the uncategorised and Community categories. For each of the next I have asked it to list the ‘child-of’ and the same for the next. Finally I have asked the last category to list the posts by their title tag.
Apart from needing to create a ton of templates(!) there are some problems with what I have created.
Each of the templates is repeating itself. The bottom of this complex layer is fine! The rest are repeating themselves. Any ideas please?
Even better - any other suggestions how I might go about this please?
Thanks.
Rich
Stroll on over and visit K3NNY
March 1, 2007
Lets say I add inline CSS styles to each category using this trick, for example: different background-color. Is there a way of applying this background-color changes to the index.php as well? I mean, if X post belongs to Y category, its background-color in index.php should be #ZZZ;.
Any idea about how to achieve this?
Stroll on over and visit Miguel
March 1, 2007
Hi Chris, I saw that your theme detects the visitor’s language as I´m seeing the side bar translated in spanish, please can you give me some tip about this feature ?
Thanks for your time
Miguel
Stroll on over and visit ShoMazta
April 17, 2007
Thanks for taking the time to put this together.
Stroll on over and visit Christopher
August 18, 2008
I’m used to using Drupal and its PHPTemplate suggestion hierarchy. Wordpress is certainly arguably simpler, but you get to where with Drupal you can ‘guess’ what the file name for an override should be, whereas with Wordpress the filenames for the templates seem sometimes kind of arbitrary… that’s not the case with these category ones, though… luckily! thanks for the tutorial.
-=- christopher
Pingbacks & Trackbacks
Leave a Reply