Customize the WordPress Tag Cloud Widget

During a recent redesign for a client, I needed to alter the default WordPress tag cloud widget to exclude a certain number of tags as well as include a custom taxonomy.

There are plenty of ways of adding a custom widget, or hacking WordPress core files to achieve what I needed but that isn’t very efficient; especially when it comes time to update the WordPress install.

Instead, I took advantage of filters, specifically widget_tag_cloud_args. You can find the different parameters for the wp_tag_cloud in the Codex since that’s what we’ll be working with here.

Open up your themes functions.php file (custom_functions.php for Thesis users) and add the following:

Changing the Smallest and Largest Font Sizes

By default, the tag cloud displays tags by point (pt); the smallest being 8pt and the largest being 22pt. Let’s change that to 10px and 18px respectively:

function custom_tag_cloud_widget($args) {
	$args['largest'] = 18; //largest tag
	$args['smallest'] = 10; //smallest tag
	$args['unit'] = 'px'; //tag font unit
	return $args;
}
add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud_widget' );

Changing the Total Number of Tags to Display

By default the WordPress tag cloud only shows 45 tags. We can change that to display a specific number or all tags by adding the following to the function we added above:

function custom_tag_cloud_widget($args) {
	$args['number'] = 0; //adding a 0 will display all tags
	$args['largest'] = 18; //largest tag
	$args['smallest'] = 10; //smallest tag
	$args['unit'] = 'px'; //tag font unit
	return $args;
}
add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud_widget' );

Changing the Tag Cloud Format

By default the tag cloud displays tags in a flat format seperated by whitespace. Let’s change that to an unordered list with a class of wp-tag-cloud:

function custom_tag_cloud_widget($args) {
	$args['number'] = 0; //adding a 0 will display all tags
	$args['largest'] = 18; //largest tag
	$args['smallest'] = 10; //smallest tag
	$args['unit'] = 'px'; //tag font unit
	$args['format'] = 'list'; //ul with a class of wp-tag-cloud
	return $args;
}
add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud_widget' );

Exclude Tags from the Tag Cloud

We can also exclude tags from showing up in the tag cloud by adding the following:

function custom_tag_cloud_widget($args) {
	$args['number'] = 0; //adding a 0 will display all tags
	$args['largest'] = 18; //largest tag
	$args['smallest'] = 10; //smallest tag
	$args['unit'] = 'px'; //tag font unit
	$args['format'] = 'list'; //ul with a class of wp-tag-cloud
	$args['exclude'] = array(20, 80, 92); //exclude tags by ID
	return $args;
}
add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud_widget' );

Add Custom Taxonomies to the Tag Cloud

By default the tag cloud only shows the post_tag taxonomy. Let’s also add a custom taxonomy called ‘ingredients’:

function custom_tag_cloud_widget($args) {
	$args['number'] = 0; //adding a 0 will display all tags
	$args['largest'] = 18; //largest tag
	$args['smallest'] = 10; //smallest tag
	$args['unit'] = 'px'; //tag font unit
	$args['format'] = 'list'; //ul with a class of wp-tag-cloud
	$args['exclude'] = array(20, 80, 92); //exclude tags by ID
	$args['taxonomy'] = array('post_tag', 'ingredients'); //add post tags and ingredients taxonomy
	return $args;
}
add_filter( 'widget_tag_cloud_args', 'custom_tag_cloud_widget' );

Pretty simple, no? Let us know if you need any help in the comments below.

Tagged as: Tag Cloud, Widget

Post Short Link: