A better WordPress tag cloud

Reading time: About 1 minute

A bit of copy & paste code that will make your WordPress tag clouds better looking and better performing.

Why WordPress’ tag cloud is crap

Isn’t valid HTML

Uses PHP‘s create_function(), which is no better than eval() (dangerous and slow)

The code itself is messy gobbledygook

Introducing a better WordPress tag cloud

Copy this code into /wp-content/themes/yourtheme/functions.php

Run <?php echo get_my_tags(); ?> wherever you want a tag cloud

Make sure the tag archive URL on line 40 points to the right place

Optionally change $smallest and $largest (on lines 3 & 4) to the preferred pixel size of your smallest and largest tags

You can see a working example of this code on my main blog index page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function get_my_tags()
{
	$smallest = 14;
	$largest = 26;
	$tags = get_tags();
	$counts = array();
 
	foreach($tags as $key => $tag)
	{
		if($tag->count < 2)
		{
			unset($tags[$key]);
		}
	}
 
	foreach ( (array) $tags as $key => $tag )
	{
		$counts[ $key ] = $tag->count;
	}
 
	$min_count = min($counts);
	$spread = max($counts) - $min_count;
 
	if ( $spread <= 0 )
	{
		$spread = 1;
	}
 
	$font_spread = $largest - $smallest;
	if ( $font_spread < 0 )
	{
		$font_spread = 1;
	}
 
	$font_step = $font_spread / $spread;
 
	$html = '<p>';
	foreach($tags as $tag)
	{
		$html .= '<a href="/tags/' . $tag->slug . '/" style="font-size:' . round($smallest + ($tag->count - $min_count) * $font_step) . 'px">' . $tag->name . '</a> ';
	}
	$html .= '</p>';
	return $html;
}

23 comments skip to comment form

Ashwin said— 1 day later

Wow! That’s nice. I never realized that WP tag_cloud() is not that good. I will try it out sometime and let you know how it goes.

Thanks for sharing

#1
Brian Cray said— 3 days later

Cool! Please do =)

#2
Rahul said— 4 days later

Its cool Man..somewhere i saw the Tag cloud was shown as Earth shape, like in round shape..how it can be done..does it need any plugin.

#3
Rahul - Web Guru said— 5 days later

Now this is cool stuff. Lets hope I can do it in one go.

#4
Darran said— 6 days later

Really neat. Is there a way to limit the number of tags shown?

#5
Brian Cray said— 6 days later

Darran: You can do 1 of 2 things:

1. Change line 10 “if($tag->count < 2)" to reflect the minimum number of times a tag has to show up in blog entries before it appears in the tagt cloud. For example, if you only want tags to show up that have been tagged 10 times, do if($tag->count < 10)

2. You can also use array_slice() (http://us2.php.net/manual/en/function.array-slice.php) after line 19 like this: array_slice($tags, 0, 20, TRUE) where 20 represents the number of tags you want to display.

#6
Darran said— 1 week later

Brian: I used the array_slice() method: $tags = array_slice($tags, 0, 40, TRUE); and it work wonders. Am just going to tweak a little bit more to show a title on the links. Thanks a million!

#7
Philip Tyrer said— 1 week later

This is really good but doesn’t seem to work on a local installation. I haven’t tested on a live site yet but I assume from other responses that it works. What I am seeing is that on a XAMPP installation the link for a tag goes to:

http://localhost/tags/tagtest/

rather than:

http://localhost/mysite/tag/tagtest/

Perhaps this is to do with not having a “.” in the url?

#8
Brian Cray said— 1 week later

Philip: You’ll have to add a . to the URL or type a specific root directory

#9
Rilwis said— 1 month later

Cool code snippet. Thank you very much Brian Cray.

#10
Sean said— 1 month later

this may sound like a dumb question, but do you basically just add this code into an existing php file, or create a new php file and then call this up? As well, I would like to know where the default tag cloud code is located within the wordpress installation. Thanks!

#11
Sean said— 1 month later

nevermind forget it. haha sorry guys!

#12
Steve said— 2 months later

Nice! I’ve been looking for something like this. I will add it to the portfolio page of my site….

#13
Steve said— 2 months later

Thanks again…..

I’ve added this to my photoblog here: – http://www.imagearcade.net/portfolio/

I also changed slightly to show the tag description on hover-over…..

#14
Matt said— 3 months later

Thanks for this – just what I needed for my new blog

#15
Lee Hughes said— 4 months later

Hi,

I love this website!! Have subscribed! So clean and well thought out and readable to someone of my lack of computer knowledge..

Anyway, am trying to get the tag cloud to work but it’s not showing up..

I think it’s because of number 3:Make sure the tag archive URL on line 40 points to the right place

Am not sure how i would find this out.. Any thoughts?

Thanks

#16
ray said— 4 months later

i keep getting this error and i dont know how to fix it: please help!

Warning: min() [function.min]: Array must contain at least one element in /public_html/wp-content/themes/10/functions.php on line 30

Warning: max() [function.max]: Array must contain at least one element in /public_html/wp-content/themes/10n/functions.php on line 31

it could also be point number 3 in the instructions, how should that be entered as?

thank you

#17
topsurveillance said— 4 months later

Nice little code! Really gives life to the page. I will try it, 10x for sharing

#18
Darkpony said— 4 months later

Nice piece of code.

For those who are using the array slicing [ $tags = array_slice($tags, 0, 20, TRUE); ] it is quite useful to shuffle the array first in order to have a random set of tags each time you run the code. Else you’ll constantly see (almost) the same tags again and again..

Just use

[ shuffle($tags); ] before the array_slice line.

#19
Chris said— 7 months later

Nice work. I am going to use this on a site I am working on at the moment. This may be off topic, but using this code how would I go about adding a class to the current tag I am viewing on a tag archive page? Much like the current-cat works for categories. Please contact me if you do not want to post the reply here. Thank you so much or your time

#20
Leaf. said— 8 months later

Is there a better way, or even a bad way, to display the number of posts in a tag cloud? i know it defeats the purpose of the could (being visually represented by size), but i’m displaying them as lists, of the same size, and wanted to show the number of posts within.

#21
kenchi said— 10 months later

how i can increase no of tags lets say i need to show 50 tags, how this can be done

and how i can replace string like – and space as + ,help me thanks

example tags : how-to as how+to
thanks nice tutorial.

#22
Can Sinan ARTUC said— 11 months later

Thank you for this piece of code, very helpful

#23
Respond to this post—

Your name

E-mail address will not be published