WP - Category Count

add a class to the category count in WordPress to be able to style it.


Tuts Library »

The Finished Project

Have you seen this before?

Generic WordPress Categories with Counts

and you want it to look way better? Here's how.

The PHP script must be copied into your function.php file. Just change the CSS styles to anything you like. I added my CSS styling to show you how I styled the category count to meet my taste.

Generic WordPress Categories with Counts

How It's Done

PHP

   function add_span_category_count($links) {
      $links = str_replace('</a> (', '</a> <span class="category-count text-right">', $links);
      $links = str_replace(')', '</span>', $links);
      return $links;
   }
   add_filter('wp_list_categories', 'add_span_category_count');

               

CSS

   // Category Count Settings
   li.cat-item a {
      display: inline-block;
      text-align: left;
      position: relative;
      transition: all 240ms ease-in-out;
   }
   li.cat-item a:hover, 
   li.cat-item a:focus {
      color: #FFFFFF;
      transform: translateX(-5px);
   }   
   span.category-count {
      position: absolute;
      right: 10px;
      background-color: #CCC3B8;
      border-radius: 10px;
      padding: 2px 10px;
      font-size: 10px;
      min-width: 26px;
      text-align: center;
   }