How to Build a Better Tag Cloud in WordPress

Share this article

Once you’ve defined a great set of tags for your WordPress posts (or pages
), you’ll want to display a tag cloud from somewhere in your template. This is normally achieved using the wp_tag_cloud() or wp_generate_tag_cloud() functions which do the hard work for you:
<a href="http://www.mysite.com/tag/word" class="tag-link-7" title="1 topic" style="font-size: 8pt;">word</a>
<a href="http://www.mysite.com/tag/tag" class="tag-link-5" title="2 topics" style="font-size: 14.3pt;">tag</a>
<a href="http://www.mysite.com/tag/phrase" class="tag-link-6" title="4 topics" style="font-size: 22pt;">phrase</a>
<a href="http://www.mysite.com/tag/subject" class="tag-link-4" title="1 topic" style="font-size: 8pt;">subject</a>
Perhaps you’re happy with that. I’m not…
  1. Inline styles? Didn’t we abandon those in 1998?
  2. The classes are pointless. I’ll probably never need to style an individual tag and, even if I do, referencing it by ID is fragile.
  3. I don’t need the fully-qualified URL.
wp_tag_cloud() offers several options but I want more control! As well as addressing the points above, I’d like to assign five or six classes to tags depending on their popularity, e.g. ‘tagged1’ for the least-used tag through to ‘tagged5’ for the most used. Let’s write a PHP function which returns a customized tag cloud. It can be placed in your theme’s functions.php file (wp-content/themes/<themename>/functions.php) or a plugin. First, we have our function name which accepts an array of named arguments and sets defaults:
// generate tag cloud
function My_TagCloud($params = array()) {

	extract(shortcode_atts(array(
		'orderby' => 'name',		// sort by name or count
		'order' => 'ASC',		// in ASCending or DESCending order
		'number' => '',			// limit the number of tags
		'wrapper' => '',		// a tag wrapped around tag links, e.g. li
		'sizeclass' => 'tagged',	// the tag class name
		'sizemin' => 1,			// the smallest number applied to the tag class
		'sizemax' => 5			// the largest number applied to the tab class
	), $params));
We now initialize $ret, our returned HTML, and $min and $max
— the minimum and maximum number of times a tag is used:
	// initialize
	$ret = '';
	$min = 9999999; $max = 0;
The WordPress get_tags() function is now called. It returns an array of tag objects:
	// fetch all WordPress tags
	$tags = get_tags(array('orderby' => $orderby, 'order' => $order, 'number' => $number));
We now need to determine the the minimum and maximum number of times a tag is used in our site. The following loop sets $min and $max accordingly:
	// get minimum and maximum number tag counts
	foreach ($tags as $tag) {
		$min = min($min, $tag->count);
		$max = max($max, $tag->count);
	}
We can now create our custom tag cloud HTML. We need to loop through all tags a second time and fetch the URL and the link title — a message indicating how many articles use that tag:
	// generate tag list
	foreach ($tags as $tag) {
		$url = get_tag_link($tag->term_id);
		$title = $tag->count . ' article' . ($tag->count == 1 ? '' : 's');
Now for the tricky bit. By default, we want to assign a class ‘tagged1’ for the least-used tag through to ‘tagged5’ for the most used (the class name and numbers can be overridden by setting sizeclass, sizemin
and sizemax parameters when calling the function). We know the minimum and maximum number of times a tag can be used so a little math can determine the class name for us. However, the equation would cause a divide by zero error if each tag was used, say, only once. In that situation, we set the class to just $sizeclass:
		if ($max > $min) {
			$class = $sizeclass . floor((($tag->count - $min) / ($max - $min)) * ($sizemax - $sizemin) + $sizemin);
		}
		else {
			$class = $sizeclass;
		}
We now have enough information to create the HTML for our single tag and end the loop:
		$ret .= 
			($wrapper ? "<$wrapper>" : '') . 
			"<a href="$url" class="$class" title="$title">{$tag->name}</a>" .
			($wrapper ? "</$wrapper>" : '');
	}
Finally, we remove the blog domain URL from $ret, return the value and complete the function block:
	return str_replace(get_bloginfo('url'), '', $ret);
}
The function can be called in any theme file using My_TagCloud();. Arguments can be passed as an associative array, e.g. My_TagCloud(array('orderby'=>'count','order'=>'DESC'));. However, we could also permit content editors to add a tag cloud using a WordPress shortcode, e.g.
// enable [tagcloud] shortcode
add_shortcode('tagcloud', 'My_TagCloud');
In the following example we’ll create a tag cloud within an unordered list:
$tags = OW_Tags(array('wrapper' => 'li'));
if ($tags) {
	echo "<h2>Tags</h2>n<ul class="tagcloud">$tags</ul>n";
}
This produces far tidier HTML code:
<h2>Tags</h2>
<ul class="tagcloud">
<li><a href="/tag/word" class="tagged1" title="1 article">word</a></li>
<li><a href="/tag/tag" class="tagged2" title="2 articles">tag</a></li>
<li><a href="/tag/phrase" class="tagged5" title="4 articles">phrase</a></li>
<li><a href="/tag/subject" class="tagged1" title="1 article">subject</a></li>
</ul>
which is easier to style and maintain CSS:
ul.tagcloud, ul.tagcloud li
{
	font-size: 1em;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.tagcloud li
{
	display: inline;
}

ul.tagcloud a
{
	text-decoration: none;
	padding: 3px 4px;
}

a.tagged1 { font-size: 0.60em; }
a.tagged2 { font-size: 0.80em; }
a.tagged3 { font-size: 1.00em; }
a.tagged4 { font-size: 1.20em; }
a.tagged5 { font-size: 1.40em; }
I hope you find it useful. Please use and adapt the code however you like in your own WordPress projects.

Frequently Asked Questions (FAQs) about WordPress Tag Cloud

How can I customize the appearance of my WordPress tag cloud?

Customizing the appearance of your WordPress tag cloud can be done through CSS. You can change the font size, color, and even the shape of the tags. To do this, you need to add custom CSS to your theme. You can do this by going to Appearance > Customize > Additional CSS in your WordPress dashboard. Then, add your custom CSS code. For example, to change the font size, you can use the following code:

.tagcloud a {
font-size: 14px !important;
}
Remember to click ‘Publish’ to save your changes.

Can I limit the number of tags displayed in the tag cloud?

Yes, you can limit the number of tags displayed in your WordPress tag cloud. This can be done by using the ‘number’ parameter in the wp_tag_cloud() function. For example, to limit the tag cloud to display only 20 tags, you can use the following code:

<?php wp_tag_cloud( array( 'number' => 20 ) ); ?>
This code will display the 20 most used tags on your website.

How can I display the tag cloud in a specific order?

The order of tags in the WordPress tag cloud can be controlled by using the ‘orderby’ parameter in the wp_tag_cloud() function. You can order the tags by name, count (number of times the tag is used), or randomly. For example, to order the tags by name, you can use the following code:

<?php wp_tag_cloud( array( 'orderby' => 'name' ) ); ?>
This code will display the tags in alphabetical order.

Can I change the shape of my WordPress tag cloud?

Yes, you can change the shape of your WordPress tag cloud by using a plugin like WP Cumulus or Cool Tag Cloud. These plugins allow you to display your tag cloud in a 3D rotating sphere, which can make your website more interactive and engaging.

How can I add a tag cloud to my sidebar?

Adding a tag cloud to your sidebar can be done by using the Tag Cloud widget. To do this, go to Appearance > Widgets in your WordPress dashboard. Then, drag and drop the Tag Cloud widget to your sidebar. You can also customize the title and the number of tags to display.

Can I exclude certain tags from the tag cloud?

Yes, you can exclude certain tags from your WordPress tag cloud by using the ‘exclude’ parameter in the wp_tag_cloud() function. You need to provide the IDs of the tags you want to exclude. For example, to exclude the tags with the IDs 3 and 5, you can use the following code:

<?php wp_tag_cloud( array( 'exclude' => array(3, 5) ) ); ?>
This code will exclude the tags with the IDs 3 and 5 from the tag cloud.

Can I display the tag cloud in a dropdown menu?

Displaying the tag cloud in a dropdown menu can be done by using a plugin like Dropdown Tag Cloud. This plugin allows you to display your tag cloud in a dropdown menu, which can save space on your website.

Can I display the tag count in the tag cloud?

Yes, you can display the tag count (number of times the tag is used) in your WordPress tag cloud by using the ‘show_count’ parameter in the wp_tag_cloud() function. For example, to display the tag count, you can use the following code:

<?php wp_tag_cloud( array( 'show_count' => 1 ) ); ?>
This code will display the tag count next to each tag in the tag cloud.

Can I change the color of the tags in the tag cloud?

Changing the color of the tags in your WordPress tag cloud can be done through CSS. You can use the ‘color’ property to change the color of the tags. For example, to change the color to red, you can use the following code:

.tagcloud a {
color: red !important;
}
Remember to click ‘Publish’ to save your changes.

Can I display the tag cloud in a specific category?

Yes, you can display the tag cloud for a specific category by using the ‘taxonomy’ parameter in the wp_tag_cloud() function. You need to provide the slug of the category. For example, to display the tag cloud for the category with the slug ‘news’, you can use the following code:

<?php wp_tag_cloud( array( 'taxonomy' => 'category', 'include' => array('news') ) ); ?>
This code will display the tag cloud for the ‘news’ category.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

HTML5 Dev CenterPHPtag cloudWordPress
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form