Change HTML output in Categories Widget
Here is an easy way to change how the Category Widget outputs HTML.
Simply add this chunk to your theme functions.php file.
add_filter('wp_list_categories', 'wpchunks_add_span_count'); function wpchunks_add_span_count($links) { $links = str_replace('</a> (', '</a><span>', $links); $links = str_replace(')', '</span>', $links); return $links; }
HTML result
The above chunk will output the following HTML into the Category Widget.
<li class="cat-item"> <a href="#" title="Category Name">Category Name</a> <span>5</span> </li>
This should be enough for you to target with CSS.
Bonus CSS
Here is a bonus little bit of CSS that may help you style your new Category Widget
li.cat-item { position: relative /* needed for the span positioning */; } li.cat-item a { display: block; font-size: 13px; padding: 5px 10px; color: #666; } li.cat-item a:hover { color: #f60; } /* Our new Span */ li.cat-item span { position: absolute; top: 8px; right: 5px; font-size: 10px; padding-top: 3px; line-height: 1em; text-align: center; width: 16px; height: 16px; background: #f60; color: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }