WordPress : How to show tag count number of posts for Tag Cloud

Recently I modified a style of my tag cloud widget in a way, so it is less of a "cloud" and more of a list of tags with each tag in its own lines. With so much empty space on the right side of the tag, I wanted to add additional information to the visitors besides the name by showing tag's count number of posts. I expected that the parameter for this behavior would already exist, but it turned out it doesn’t after looking at wp_tag_cloud function, which lists all parameters. Luckily, there is a filter available which we can use to make this work and is the topic of this article.

The list of parameters in wp_tag_cloud function contains a parameter topic_count_text_callback that is related to count, but this one is only used for changing the text in title attribute. To add count data besides tag name, we would need to manipulate the already generated HTML code for tag cloud before it is displayed and this is what we will do with the help of the existing WordPress filter.

Using wp_generate_tag_cloud filter

With wp_generate_tag_cloud filter, we can manipulate the generated HTML code for our tag cloud. A tag cloud is basically a list of anchor elements, one for each tag. What the code below does is it finds each closing element </a> and it inserts a <span> element containing the count number of posts for each tag.

Simply add the following code inside functions.php:

function set_wp_generate_tag_cloud($content, $tags, $args)
{ 
  $count=0;
  $output=preg_replace_callback('(</a\s*>)', 
  function($match) use ($tags, &$count) {
      return "<span class=\"tagcount\">".$tags[$count++]->count."</span></a>";  
  }
  , $content);
  
  return $output;
}
add_filter('wp_generate_tag_cloud','set_wp_generate_tag_cloud', 10, 3);  

Code explanation

Let's examine more closely the most interesting lines:

• Line 1:

  function set_wp_generate_tag_cloud($content, $tags, $args)

  Callback function for the filter accepts three parameters:

  1. $content – string containing the generated HTML of the tag cloud.
  2. $tags – an array of tags data (which is also an array containing various information about the tag).
  3. $args – an array of parameters for a tag cloud. Check wp_tag_cloud function for more information about those parameters. This parameter is not used in the above example.

• Line 4 - 8:

    $output=preg_replace_callback('(</a\s*>)', 
    function($match) use ($tags, &$count) {
        return "<span class=\"tagcount\">".$tags[$count++]->count."</span></a>";  
    }
    , $content);

  We want to replace all occurrences of </a> element with a <span> element containing count number of posts for each tag. We can't use simple string replacement function like str_replace for that, so we need to use the preg_replace_callback function instead. This function accepts a callback function as the replacement parameter that is called each time search string is found. We provide it with three arguments:

  1. The regular expression to find, in our case </a> closing anchor element.
  2. Callback function which is called each time </a> is found. We replace </a> with <span></span></a> and inside that <span>, a count value of number of posts for the tag will be displayed.
  3. String where we do the search and replace, in our case $content containing string of the generated HTML.

And this is it. After all the replacements, filter will return the modified HTML code. But we are not done yet as we still need to style it properly.

CSS style changes of the tag cloud

Without any CSS modifications, the count number will just sit there near the tag name like this:

Below are the CSS modifications that we can use:

.tagcloud a
{
  display: flex;
  align-items: center;
...


span.tagcount
{
    background: #38B7EE;
    padding: 5px;
    color: #fff;
    border-radius: 5px;
    margin: 2px;
    margin-left: auto;
}

After making above CSS changes, the tag cloud should look something like this:

I'm not a CSS expert but the styles above might help you get started. Just note that it uses CSS3 flex element for the layout.

Conclusion

WordPress gives us a lot of parameters to customize tag cloud, but one parameter that is missing is the ability to display count number of posts for the tags. We can simply solve this by using wp_generate_tag_cloud filter that gives us the ability to modify the content of generated HTML tag cloud. In our case, we added <span></span>< element containing count information for each tag.

I hope you found this article useful. Have you ever used wp_generate_tag_cloud filter and if so, for what purpose? Drop a comment and let us know.