Customize the WordPress Tag Cloud Widget

Customize the WordPress Tag Cloud Widget

The tag cloud is not new to WordPress but definitely something you should consider using on your website or blog, especially if you use tags in your publications. The tag cloud gives a rough overview of what your content is all about, what you blog about the most. Tag clouds aren’t generally clicked on by users, although it’s still a good way to provide quick links to the archives.

WordPress comes with a built-in function for generating tag clouds called wp_tag_cloud, which in fact has received an update in 3.1 and now supports different taxonomies. This means that you can create tag clouds out of tags, categories and custom taxonomies you have defined. If you look at the function reference closely, you’ll notice that it accepts quite a wide range of arguments to customize the cloud, keep that page open for a while.

Hooking into the Tag Cloud Widget

Enough with the core, hit close and make sure you don’t save any changes. We’re not editing the core files, remember? Now, in your plugin or theme’s functions.php file, all you have to do is add a filter to that filter name we found above and define the handler function. Like this:

add_filter( 'widget_tag_cloud_args', 'my_widget_tag_cloud_args' );
function my_widget_tag_cloud_args( $args ) {
// Your extra arguments go here
return $args;
}

As I mentioned, don’t forget to return the passed in arguments as I mentioned earlier. Note the commented line I gave, that’s the place where you would edit the $args variable which is passed on to the wp_tag_cloud function. So let’s try out a few things.

Changing the Number of Tags to Display

From the wp_tag_cloud it’s quite simple to figure out that the number key is responsible for the maximum number of tags to output. The default value is 45, so let’s change that to 20. Here’s how my handler function now looks:

function my_widget_tag_cloud_args( $args ) {
$args['number'] = 20;
return $args;
}

Simple as that! Let’s try out the font size.

Changing the Largest and Smallest Font Sizes

As the reference states, our keys are largest, smallest, and perhaps the unit. Let’s go for 18 pixels largest and 9 pixels smallest. Here’s how our handler function looks now, together with the number of tags reduced to 20 in the previous step:

function my_widget_tag_cloud_args( $args ) {
$args['number'] = 20;
$args['largest'] = 18;
$args['smallest'] = 9;
$args['unit'] = 'px';
return $args;
}

Finally, let’s say we want to exclude one of the tags.

Excluding A Tag From The Tag Cloud

This might be a little tricky, but the thing to remember about the include and exclude keys is that they don’t accept strings, they work based on the terms IDs. It’s quite simple to figure out the ID for a specific term — browse to your admin panel, fire up the list of all post tags and hit on one of the tags to edit it. Look at the browser URL and you’ll notice a tag_ID variable, that’s your term ID.

I’ve no clue what your term IDs are, there really is no way to guess, so I’ve browsed through mine an figured out I want to exclude the one with the ID of 80 and one with an ID of 20. Here’s how I did it:

function my_widget_tag_cloud_args( $args ) {
$args['number'] = 20;
$args['largest'] = 18;
$args['smallest'] = 9;
$args['unit'] = 'px';
$args['exclude'] = array(20, 80);
return $args;
}

Leave a Reply

Your email address will not be published. Required fields are marked *