WordPress FAQ: How Do I Use Category Themes?


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.