Add a bit of style to the WordPress categories widget

By default the WordPress categories widget offers quick and easy links to your content categories. With a little bit of CSS you can easily make some stylish additions to the output.

So, here’s the before shot:

But in this case I want to add little style, some graphics or perhaps some Font Awesome – something like ” ” (quotes at the beginning or end) or &raquo suffixes to the category links. Now, sometimes you can add some filter code (requires programming knowledge) that works with widgets to modify the output but with the Categories widget  the only amendment you can make is to exclude select categories. The default categories widget doesn’t offer content or style changes in that way so we’re pretty much stuck with its default output.

If you wanted to you can clone the default categories widget code (requires programming knowledge), include it in your theme and make modifications – perhaps just adding the extra character – and you then have the choice of widgets to use.

However, there’s a slightly easier way that only requires the ability to add some CSS to your theme (requires no programming knowledge) and you can make these small style changes changes. For this example I am showing you some code that will add a quote around the category name and » to the end of your category name.

The categories widget outputs the categories in an block like this:

<li class="cat-item"><a href="/category/bananas">Bananas</a></li>
<li class="cat-item"><a href="/category/apples">Apples</a></li>

We will hook into the cat-item class and use CSS psuedo elements (including legacy browser support) and add the code for raquo, “00BB” into the :after element.

.cat-item {
    *zoom: expression(
    this.runtimeStyle.zoom="1",
    this.appendChild( document.createElement("small") ).className="after"
    );
}
.cat-item {
/** Any other specific cat-item styling can go here */
}

.cat-item .before,
.cat-item:before {
        content: '\201c'; /** Open quote **/
}
.cat-item .after,  /* IE6/7 */
.cat-item:after {
    content: '\201d\00BB'; /** Close quote and brackets */
}

And here’s the after shot:

So with a small bit of CSS and no programming you can easily add many embellishments to your categories or in fact any other list. And you can get fancier with your CSS by playing a little more perhaps with inspiration from http://css-tricks.com/

Legacy support code – thank you: http://richard.parnaby-king.co.uk/2012/07/pseudo-classes-before-and-after-in-ie6-7/