Secrets of WP Theming: Part 2

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.

Hidden Spiffiness abounds

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.

Context sensitive information is the bees knees

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!

So lets write some code, shall we?

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(); ?>

Now for the payoff, making it all work

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.

  1. personal avatar Kates
    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.

  2. personal avatar Arno
    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.

  3. personal avatar William
    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.

  4. personal avatar Waylan
    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.

  5. personal avatar Indranil
    Stroll on over and visit Indranil
    March 1, 2007

    Wow! Who know these could be done. Thanks. As Shawn said, “on to Part 3”.

  6. personal avatar Shawn Grimes
    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!

  7. personal avatar Splee
    Stroll on over and visit Splee
    March 1, 2007

    Chris, Kudos. Superbly written as always.

  8. personal avatar Tyler Thompson
    Stroll on over and visit Tyler Thompson
    March 1, 2007

    Sliced bread has nothing on you my man. Thanks as always.

  9. personal avatar John Nunemaker
    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.

  10. personal avatar wordpressCN
    Stroll on over and visit wordpressCN
    March 1, 2007

    thank you I will change my blog later!

  11. personal avatar BRU74L
    Stroll on over and visit BRU74L
    March 1, 2007

    Great! Thanks.

  12. personal avatar Zane
    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.

  13. personal avatar Jeremy
    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

  14. personal avatar Anonymous
    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.

  15. personal avatar Jeremy
    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?

  16. personal avatar http://shikoseo.blogspot.com/
    Stroll on over and visit http://shikoseo.blogspot.com/
    March 1, 2007

    Your work is great. Great presentation. Great explanation

  17. personal avatar Richard Brown
    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

  18. personal avatar K3NNY
    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?

  19. personal avatar Miguel
    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

  20. personal avatar ShoMazta
    Stroll on over and visit ShoMazta
    April 17, 2007

    Thanks for taking the time to put this together.

  21. personal avatar Christopher
    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

  1. katesgasis.com | Approved Gravatar » [...] urs in other blogs. That’s it for now. Gotta read Chris J. Davis’ tutorial on Secrets of WP Theming: Part 2. [...]
  2. Shaghaghi.net » Yet Even more WordPress Theme Howto » [...] dPress(t) , themes(t) howto(t) Following up on theme, there is now themeing Permalink [...]
  3. Pretty Pink Ponies Edition… » Secrets of WP Theming: Part 3 » [...] ts Technorati Results ★ Latest 5 Posts CJD Notepad in BetaAlmost go timeSecrets of WP Theming: Part 2Secrets of WP Theming: Part 1The Proper use of Base HREF's &# [...]
  4. O Weblog! » Tutorial on Wordpress Theming » [...] lable. If you are not blogging, then get on it! Cheers! Secrets of WP Theming: Part 1 Secrets of WP Theming: Part 2 Permalink Comments a [...]
  5. Aimeelicious » Links for me » [...] Holy Shit This dude rocks… Chris J. Davis Themes Tutorial 1 Chris J. Davis Themes Tutorial 2 Chris J. Davis Themes Tutorial 3 Themes University [...]
  6. Time Being » Blog Archive » WordPress Themes and a Quick Business Update » [...] This more for my own memory more than anything that most sane folks would be interested in. As this blog is in dire need of a style overhaul, this excellent WordPress Theming Tutorial, Parts [1] [2] [3], should come in handy. [...]
  7. Netlex News » Blog Archive » Dissection of a WordPress theme » [...] Secrets of WP Theming: Part 2 [...]
  8. Grant Palin » Blog Archive » Useful WordPress Resources » [...] An article discussing some lesser-known features of WP with regards to themes, templates, and plugins. A two-part series (1, 2) [...]
  9. Testbed » Blog Archive » Theme Resources » [...] Secrets of WP Theming Pt 2 [...]
  10. davidhay » Blog Archive » Hacking Wordpress Modules » [...] After having seen Chris J Davis’ guides to Wordpress theming, I thought that having found a cool little gubbin I ought to share it too. [...]
  11. FOUND&LOST » [...] [...]
  12. Secrets of WP Theming at ericsetiawan.com » [...] Chris J Davis wrote about the secrets of Wordpress theming. He divided it into three sections. Part 1 is about the custom templates which you can use to make your own static pages on Wordpress, like the archive page. Part 2 covers the *per category template*. Part 3 is about the use of home.php which after he pointed it out I feel it can be a powerful tools. On his example page, it can be used as a summary page (or the cool words *rss aggregation*) of your page which will be loaded before the index.php. Actually you can find all this piece of info at the codex but I think Chris has put it all together nicely. Now that he share it with us means this is not secrets anymore, right? :)   #     [...]
  13. weblog by hanneng 韩蔫的日志 » Blog Archive » Secrets of WP Theming » [...] While I’m google around for WordPress plugins, I accidently found this article by Chris J. Davis. and worth reading it. Believe me, it’s easy to understand. Secrets of WP Theming: Part 1 Secrets of WP Theming: Part 2 Secrets of WP Theming: Part 3    [...]
  14. Wordpress 2.0 Theme Design Competition - Alex Allied » [...] Secrets of WP Theming Part 1 | Part 2 | Part 3. [...]
  15. Lorelle on WordPress » Secrets of WordPress Theming » [...] Begin at the beginning with some basic core tips and techniques in Part 1. Then get more into the code in Part Two to understand more about building template files, including custom template files for specific needs like 404, search, and more. Chris recently introduced Part 3 which examines how to make your home.php custom template work for you with feeds and more. [...]
  16. WordPress theme park » Secrets of WP Theming » [...] Links: Secrets of WP Theming: Part 1 Secrets of WP Theming: Part 2 Secrets of WP Theming: Part 3 [...]
  17. Stupid Wordpress Tricks » Blog Archive » Secrets of Wordpress Theming » [...] Part 1: Custom TemplatesPart 2: Per-Category TemplatesPart 3: Customized Home Page (home.php) [...]
  18. toehold » Panacea? Unfortunately Not » [...] Secrets of WP Theming - part 1 Secrets of WP Theming - part 2 Secrets of WP Theming - part 3 [...]

Leave a Reply