Style Links with CSS by Category – WordPress

A recent WordPress project required having a recent posts widget that each link was styled differently with CSS based on what category the post came from. A bit of a jargon loaded sentence I admit.

Basically, if a “recent post” link in this widget was from the “Tools” category (for instance) then it could be styled with a CSS background image or a color specific to that category.

I ended up modifying this Recent Posts plugin. (In enhanced-recent-posts/includes/plugin-class.php line 116)

Here is what I ended up using:

<a class="<?php $category = get_the_category();  echo $category[0]->category_nicename; ?>" href="<?php the_permalink() ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a>

Here is what it then looked like when the code worked it’s magic:

<a class="tool-category" href="..."></a>

This WordPress function for getting the category was very helpful.

Have a better way to style links with CSS by category? Bonus if there is a plugin already doing this.

Tags: , , ,

3 Responses to “Style Links with CSS by Category – WordPress”

  1. Rick June 29, 2012 at 11:09 am #

    I’m viewing this page in Chrome, and I can’t see the code samples. I tried it in FF and still couldn’t see them.

  2. Amanda August 19, 2012 at 12:58 pm #

    Dude sort out your page, the code that you present is hidden in a way or another. For the visitors here, if you want to view the codes he is trying to show, then use Firebug for Firefox and inspect the element on those areas. :)

  3. Blake Imeson August 22, 2012 at 12:00 pm #

    Sorry guys, hopefully the code is fixed now.

Leave a Reply