Giving different styles to different WordPress categories
September 7, 2007 – 9:02 am | byWordPress allows you to give different styles to different categories in a range of ways. You can style a category page: this means that every category page can have its own unique style. For example, let’s say you have a site about vegetables, where every vegetable is a category. You can style the Tomato category page so that the headers are all in red, the Carrot category page so that the headers are all orange, etc.
You can also make sure that when you visit a single post page in a specific category, that page also has a unique style. So if someone clicks on your post about Delicious Tomato Sauce, the headers on that page can be styled red, while the single post page for the article on Creamy Carrot Soup will have orange headers.
And finally, I just found out that you can style posts on the index, home page, search results page, or any page with posts from multiple categories, with their own style depending on their category.
Let’s go through each styling method one-by-one:
Styling Category pages
- Find out what the id number is of the category you want to style. To do so, go to Manage > Categories, find the category in question, and look at the left-hand column. Let’s say that your Tomato category has an id of 5.
- Create a file called category-x.php, where x is the id number of the category. In the case of the Tomato category, your file will be called category-5.php. The best way to do this is to copy you index.php file, and rename it category-5.php.
- Now modify your file at will. For example, if you want all
h2text to be red, find where it says<h2>in your file, and replace it with something like<h2 class="tomato-red">. Then, in your style.css file, create a class called tomato-red, and give it the right styles. In this case, you would add the following to your style sheet:
.tomato-red {
color: #FF0000;
} - The method described above in Step 3 is ok if you want to customize the styles for one or two categories. But if you have more than that, it can become annoying to manage a zillion category-x.php files. Ryan Hellyer, a devoted WordPressGargage reader and most frequent commenter, gave the following more efficient way of doing this. He said to create one category.php file, and put the following code in it:
<h2
<?php
if (is_category('tomato'))
{echo 'class="tomato-red"';}
if (is_category('cucumber'))
{echo 'class="cucumber-green"';}
?>
Etc. Brilliant!
Styling single post pages for different categories
See my previous post titled “Displaying single post pages differently in specific categories” for detailed instructions on styling single post pages for different categories. It’s all there.
Giving posts from different categories different styles on a multi-category page
I love how there’s always something new to learn about WordPress! Abhijit Nadgouda has written a post on Lorelle’s blog explaining how you can apply unique styles to posts in different categories. He explains how you can use the category slugs to create styles that can be dynamically called to give different styles to posts from certain categories.
Why is this useful? Let’s take our vegetable site example. By giving each category its own style, a reader on the home page could easily identify all posts about tomatoes by picking out the posts with red headers, and carrot posts would have orange headers. This could also create a very colorful and eye-catching page.
Another way to use is if you have a category of feature articles. You want these articles to stand out in some way, either by giving them some kind of badge, or a background color, for example. By using this method, you can ensure that your feature articles are always more prominent, and don’t get lost in the crowd.
So there you have it – three ways to make sure your posts in different categories stand out all across your site. Hurray for WordPress!
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
12 Responses to “Giving different styles to different WordPress categories”
By Ryan on Sep 7, 2007 | Reply
Rather than using seperate category-x.php files, I’d use a single category.php file and serve different classes to the H2 inside that file. That way you don’t have a squillion different files to edit, just one.
ie: category.php …
By Marcus O'Donnell on Dec 13, 2007 | Reply
I thought this was the post that was going to solve all my problems but after giving it a go I dont think so. But maybe you can help
I am looking for a way of giving each category its own distinctive sidebar. So that when you call up a single post from a particular category you get a particular set of information in the sidebar that varies for each category.
The theme I use already calls up a More posts from this category but I am unsure how to take this further
you can do this really easily with pages by calling a different page template but I have searched around and can’t seem to find a way of doing it with posts
hope you or your readers might have a simple elegant solution
thanks – I am learning lots from your site
By Miriam on Dec 13, 2007 | Reply
Hi Marcus – glad to see you here at WPG!
Can you clarify what type of information you would want to have appear in the sidebar? If it’s related to the category that the post is in, there may be a way to have category-specific information appear there.
Nice implementation of the Mimbo theme, by the way.
By Marcus O'Donnell on Dec 14, 2007 | Reply
Hi Miriam
Thanks for your quick reply.
I have progressed a little already but still having problems.
What I want to do with certain categories is to replace the normal sidebar with a completely different set of information. It may be a set of specific links that relate to that category or it may be some general text that relates to that category – if for example the category is about a specific project there might be a general project description and I might not want the general rest of site stuff. Essentially I want the same flexibility that I can have by choosing different page templates for different individual pages.
I can see this working in a range of situations but I have a particular site that I am working on at the moment where this would be helpful because some of the categories indicate a kind of sub-publication.
One way that i can get close to this is by adding in some code to the single.php at the end:
This does work but there is one problem. Posts with multiple categories. I could live with that and be more discriminating in my category distribution (use tags instead for instance) but in one particular instance this doesn’t work. The mimbo theme uses categories to place the “Lead” and “featured” articles in certain places so these articles will always have two categories.
My problem with using the above syntax is that it works perfectly if you only want to do it once because the code seems to read
“if this post is in category x then use this special category x sidebar but everywhere else use the normal sidebar”
If a lead post (cat-3) is also category x then I get the beautiful category specific sidebar – it seems to ignore the multiple categories.
However in the above example if I am trying to do it in multiple categories it has problems because if I have a category 18 post as the Lead (also cat-3) and a category 17 post as one of the featured (also cat 4) in the first mentioned category I get both the normal and the special sidebar while in the second mentioned category I get what I want – only the special sidebar.
Again I gather (I am a real php newbie) this is because the code is reading
“if this post is in category 18 then use this special category 18 sidebar”
“”if this post is in category 17 then use this special category 17 sidebar but everywhere else use the normal sidebar”
And because in this case the post is coded cat 3 and cat 18 I end up with both side bars because the theme is reading the second “everywhere else” as only relating to the last mentioned cat and it thinks – oh cat 3 put the normal sidebar.
I need code that says
“if this post is in category x then use this special category x sidebar
“if this post is in category y then use this special category y sidebar
“if this post is in category z then use this special category z sidebar
but if none of the above use the normal sidebar”
Sorry this was so long!
I notice on the wordpress forums there are similar questions that are unresolved so if you have a solution I think there are others who would be interested too.
Thanks
Marcus
By Marcus O'Donnell on Dec 14, 2007 | Reply
The php code didn’t show up in the comment post I will try removing all of the opening and closing <?
php if ( in_category(’18′) ) {
php include (’sidebar3.php’);
php }
php if ( in_category(’17′) ) {
<?php include (’sidebar2.php’);
php } else {
php get_sidebar();
php }
By Ryan on Dec 14, 2007 | Reply
I’m a little confused. The PHP you have above should work fine, although you may end up with two sidebars if it is in categories 18 and 17, but you should be able to get around that by using an elseif instead of an if for category 17.
Or maybe I’ve missed what you are trying to do, I’m not sure.
By Marcus O'Donnell on Dec 15, 2007 | Reply
Hi Ryan
thanks for trying to help I changed the “else” to “elseif” and i ended up with an error message
I have put up a test site so that you can see what i mean
http://blogsperiment.com
if you click on Amiel’s story which is categorised as Lead Story (cat-7) as well as Paper Rock (cat-13) you get what I want – the story with its own sidebar
but if you click on J Student Blogs for NYT which is categorised as Currently Featured (cat-4) and Tide (cat-16) you ended up with the special Tide sidebar and the normal one below it
same with the bottom story in the second column Images of Cronulla you get the special News Photography (cat-11) side bar as well as the normal one
the current code on the single page is
so the only category that is excluding the normal sidebar is the one closest to the “else” statement
any ideas?
thanks so much for the help
By Marcus O'Donnell on Dec 15, 2007 | Reply
Forgot the code wouldn’t print (is there a way around that???)
php if ( in_category(’16′) ) { ?>
php } ?>
php if ( in_category(’11′) ) { ?>
php include (’sidebar4.php’); ?>
php } ?>
php if ( in_category(’13′) ) { ?>
php }else { ?>
php get_sidebar(); ?>
By Marcus O'Donnell on Dec 15, 2007 | Reply
Still not right all the replaced with xx just in case my synatx is wrong
xxphp if ( in_category(’16′) ) { xx
xxphp include (’sidebar3.php’); xx
xxphp } xx
xxphp if ( in_category(’11′) ) { xx
xxphp include (’sidebar4.php’); xx
xxphp } xx
xxphp if ( in_category(’13′) ) { xx
xxphp include (’sidebar2.php’); xx
xxphp }else { xx
xxphp get_sidebar(); xx