Tag Cloud Widget gives visitors the ability to browse different topics based on tags on your site. Recently I wanted to customize it a little for this site and assumed the widget itself would give you these settings, but you can only edit the most basic parameters. Instead of widgets, we can display the tag using WordPress function wp_tag_cloud in the template, which supports more parameters. But what if we want to use the existing cloud tag widget? Luckily, there is a filter available that allows you to do that and is the topic of this article.
When we go to Dashboard > Appearance > Widgets, this is what we can edit in the WordPress default Tag Cloud widget. Only Title and Taxonomy can be changed:
With wp_tag_cloud function, we can set many more parameters than what is offered in widget settings. It accepts $args
array containing parameters for tag cloud customization. Here is a short list of what we can set:
- smallest – text size of the smallest tag (the tag with lowest count)
- largest - text size of the largest tag (the tag with highest count)
- number – number of tags to display (default is 45, while 0 displays all the tags)
- orderby - order the tags either by name (default) or count (‘name’, ’count’)
- order – sort direction either ascending (default), descending or random (‘ASC’, ‘DESC’, ‘RAND’)
The problem with the wp_tag_cloud function is that it is used, when we want to add a tag cloud in the template file, but to set parameters for the already existing tag cloud added via widgets at Dashboard > Appearance > Widgets, we can't use this function.
Luckily, there is a filter available that can accept the same $args
array parameters and apply it to an existing widget.
Solution - use the widget_tag_cloud_args filter to modify tag cloud widget parameters
WordPress has a widget_tag_cloud_args
filter and is used to set taxonomy for a tag cloud widget. It accepts $args
array and we can use that array to put other parameters in it.
Add the code below inside the functions.php
file and put into $my_args
array those parameters you want to modify. In the code below, we are changing smallest font size to 10, largest to 16 and tags to be ordered by count in descending order:
function set_widget_tag_cloud_args($args) {
$my_args = array('smallest' => 10, 'largest' => 16, 'orderby'=>'count', 'order'=>'DESC' );
$args = wp_parse_args( $args, $my_args );
return $args;
}
add_filter('widget_tag_cloud_args','set_widget_tag_cloud_args');
In the above code, after inserting our parameters into $my_args
array, we merge that array with the $args
variable. Finally, we return that array.
And we are done.
Why the above code needs to merge two arrays is explained next.
When widget_tag_cloud_args filter breaks your tag cloud widget layout
On my first try using widget_tag_cloud_args
filter, I simply added parameters I was interested in changing and returned that array as shown here:
function set_widget_tag_cloud_args($args) {
$args = array('smallest' => 10, 'largest' => 16, 'orderby'=>'count', 'order'=>'DESC' );
return $args;
}
add_filter('widget_tag_cloud_args','set_widget_tag_cloud_args');
But the above code broke my styling for tag widget. This is how it looked like:
By examining the generated HTML code, I noticed that the Tag Cloud widget was not showing properly because it was not wrapped with elements used by other widgets on the sidebar. Also, the usual <div class="tagcloud">
was missing.
The reason for this issue is that the default $args
parameter of widget_tag_cloud_args
filter already contains two elements inside the array:
- taxonomy (set to current taxonomy)
- echo (set to false)
If we simply override $args
arguments with our own values and we don't include 'echo'=>false
, then 'echo'=>true
will be used as the default and that causes the tag cloud not to be displayed as a widget, but instead as if the call to wp_tag_cloud function was made, meaning no wrapping with 'before_widget' and 'after_widget' as set by register_sidebar function will occur.
Merging our custom $my_args
with $args
array using wp_parse_args function solves this problem.
Solution without coding – install a tag cloud plugin
In case when you don’t want to mess with modifying template code or need to drastically change cloud tag widget styles without much of an effort, then adding a WordPress plugin might be a better way to go. The Page Tag Cloud plugin is just one such example. For a more concrete list, check the following article. I would only suggest skipping those plugins that were not updated recently.
Conclusion
Editing settings for the tag cloud widget at Dashboard > Appearance > Widgets gives us only basic parameters to modify. For more options, we can use widget_tag_cloud_args
filter to change the behavior of the default tag cloud widget. Alternatively, we can just simply add a WordPress plugin that replaces the internal widget.
Simo
July 23, 2017I'm building a custom theme and all of my widgets are getting wrapped fine, except for the cloud. Was driving me crazy. Hah.
Thank you for the override (echo false), that fixed it.
moped
April 25, 2019Same for me. The broken widget layout confused me.
The use of echo in the arguments isn't that clear in the reference.
sj
March 6, 2019Works great in the sidebar!!!
I was using two functions, one to change the font size and another change the number shown but this cuts down on a function.
Thanks
I know this is an old post but, I can't seem to get any function(yours or the others) to change the count or font size in wp_tag_cloud() in the article area.