WordPress FAQ: How Do I Use Category Themes?

This article will take approx 1 minute to read.

Is it possible to have different layouts, theme or links depending on the category the user has clicked?

This question comes from Milo Riano. Milo wants to be able to have what I call a “flexi-site”. A Flexi-site is a site that is flexible in terms of display options or layouts. This could really be an extension of the question about multiple blogs as well.

Template Files

The key here is in template file hierarchy. WordPress looks in the theme directory to find the following files, and in this order:

  • category-X.php
  • category.php
  • archive.php
  • index.php

So if you have a blog that you assign a category of “Linkblog” to, and you want the linkblog to be displayed in a different format that the rest of the blog, you could simply find the ID number of the category (We’ll call it 23 for the sake of argument), and you could create a special template file with the unique layout you wish to use, and call the file category-23.php. Now everytime the category page is loaded, the template file category-23.php will be used.

Custom CSS

You can take this approach a step farther through customized CSS stylesheets. As most templates use the inbuilt function

1
<php get_header() ?>

to summon the use of the common header.php file from the theme, it is also possible to create custom headers and include those directly.

However, the better solution to this, providing you don’t have a vast number of categories that you want to display different CSS files for, is to simply use the WordPress template tag

1
is_category()

to figure out whether to display an alternate stylesheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<php
if( is_category( 23 ) )
{
?>
   <link rel="stylesheet" href="http://example.com/wp-content/theme/cat23.css" type="text/css" media="screen" />
<php
}
else
{
?>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<php
}
?>

You can get real creative with this instead choosing to use

1
is_category()

to determine if extra CSS can be added after the main CSS thus overriding styles. There are quite a few options and you are limited only by your creativity.

If you have questions for this ongoing WordPress FAQ series, shoot me an email and let me know. By doing so, you’ll get a free link to your site.

Comments

  1. says

    Great tip Aaron…

    I think it’s a little weird that, when trying to access a page, foobar.php will be used when loading a page with a slug of ‘foobar’, but the same doesn’t apply to categories.

    I think WordPress could really use that. Sure, we can apply the category-x.php method you went over, but it would be great if we could use foobar.php where ‘foobar’ is the name of the category we want to look at.

    For anyone that is still a little puzzled after Aaron’s great write-up on the matter; You might want to take a look at this page on the WordPress Codex concerning the template hierarchy.

    http://codex.wordpress.org/Template_Hierarchy

    There exists a very handy diagram there that I would recommend anyone who plans on developing any WordPress themes download for private perusal at a later date.

    Technosailor FTW and that :)

  2. says

    I experimented with this quite some time back to have different advertising content for my sports and pop culture categories buy found an easier way to do it for that purpose.

    Off the top of my head, I can’t think of other applications for this. Any suggestions?

  3. says

    Hi James-

    Good to see you. I’ve seen a couple of blogs do it where the topics are diverse and the author wanted to have, say, a different background color for a given category or, say, a slightly different layout for a miniblog category. Your blog would do quite well with either a different color or a different layout for, particularly, your sports category. At any rate, Andrew Sullivan pops to mind as someone who did slightly different things per category on his old blog.

    I’m also pretty sure Mezzoblue is doing some pretty funky things with categories using them as definition for his “Collections” and styling differently per.

  4. says

    Interesting. I spun off almost all the postings for sports and pop culture to separate blogs last February, so there’s probably not much point anymore.

    I’ll have to think about other applications, though. Most of my visitors either come to a specific entry item or the home page, but I do get substantial search engine referrals to the category archive pages. It may be interesting to color code or play around with different logos and such for those pages.

  5. says

    I’d probably recommend that anyone separating content out like this into different stylesheets, etc probably also take the additional step of modifying the main Loop to exclude those categories. In other words, it’s probably less effective if you don’t treat separate categories as separate pseudo-blogs – if that makes any sense through my weekend haze.

  6. says

    This is so cool! I can’t wait to find my way in WordPress and use the techniques above. I would start with a simple change header scenario for each category. Its been a long time I want to do this. :)

    Also, can you please correct? My name is Milo Riano, not Griano. :) G is my middle initial.

  7. says

    Nice post!

    The categories always prefix with “category”.

    I find we can remove it by add /. to the setting.
    Options>>Permalink>>Optional>>Category base:

  8. Matt Kruse says

    I’m putting up a family blog, with each person in the family having their own category. So the home page will show all posts, and each person will “have their own blog” by linking directory to their category.

    I wanted to allow for different themes and styles if someone is viewing a category page specific to a certain family member.

    So what I did is in the header I just put this:
    <body class=””>

    Now I will have a class set on the body tag if I’m viewing a category page, and I can use plain old CSS to set rules like

    body.Bob { background-color:black; }
    body.Bob #wp-calendar { something-funky; }

    I can completely change the layout, style, and content based only on the body’s class by changing my theme’s single stylesheet.

    I haven’t fully implemented it yet, but that’s my plan. Any better ideas?

  9. says

    Hello!

    I realize this is sort of an old issue, but I was wondering if there were a relatively simple tutorial for setting up a WordPress blog that allows for separate WordPress Themes for each Category featured on the blog. So far I’ve found numerous sites describing how one can alter the Category templates, but this is the first site that seems to suggest you can actually set separate complete Themes for each category. I tried my best with what was provided here, but even the basic questions of which files to edit seem a bit confusing.

    Thanks for the help! (hopefully)
    Frank