Recently I modified the 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 the 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);
Let's examine the highlighted code in more detail.
Code explanation
Let's examine more closely the most interesting lines:
And this is it. After all the replacements, the 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 the 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.
""
David Manning
September 30, 2018This code works well except that when I add a new tag that is not related to any post yet, it adds the count of the previous tag; such as - I added 'Drawing' to the Tags in admin and on the Tags List page, it shows '2' when the are no posts associated with 'Drawing' yet. (see my site tags page:
https://artscendant.com/artists-and-genres/
)Though a tag entered before I put the code into functions.php which had no posts associated with it - 'Scupture' - does show zero posts. This seems to be a bug in the code.