Day 8: Unique CSS Styling for Categories in WordPress

While coding this theme, it took me a while to figure out how to give certain categories different styles on the front page. After browsing the web for a bit, I found that there are several ways to do this, most of them involving multiple loops in WordPress. Most of these solutions seemed a little too complicated for what I needed, so here’s what I came up with. (I am not saying that this is the best way, but it has worked splendidly for me thus far. )

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="<?php $category = get_the_category(); echo $category[0]->cat_name;?>">

After the loop, I simply used get_the_category();  function in WordPress to define specific CSS styling for each category. For example,

.Blogroll{
background-color:#000;
color:#fff;
...
}

I’ve used this method so far to style my <blockquote>s differently for some posts, but it can be used for things such as different headings for different categories :)



Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>