Colored Tag Cloud

Note – the plugin is now available for download on the WordPress plugins repository. Download and install it from there.

UPDATE: 6-21-2010. Updated for WP 3.0. You should see ‘new version available’ in your WP plugins panel.

UPDATE: 7-22-2009. Thanks to Areil and Serkan Algur below for spotting the problem with how the tags are retrieved. I’ve finally gotten around to fixing it, and making a couple of other small improvements.

I wanted a cool colored tag cloud. Couldn’t find one. So I wrote one :) Actually, what I did was pulled  the original WP tag cloud code from the core WP file, modified it, and turned it into a plugin. I mean, how do you improve on perfection, and why reinvent the wheel? :D

Installation: couldn’t be easier. Download the plugin here, if you want to manually install it. Unzip the package to your local machine, then upload the colored-tag-cloud directory to your wp-content/plugins directory. Alternatively, you can search for and install the plugin directly from your Dashboard, providing you’re running WP 2.7 or above. Navigate to your plugins page and activate the plugin.

Usage: if you want to use the colored tag cloud in your sidebar, navigate to Appearance > Widgets, find the ILWP Colored Tag Cloud widget and drop it in whatever sidebar you want. Click the Edit link on the widget, complete the options setup, click ‘Done’. Then click the big update button like WordPress tells you to do. :)

Alternate usage: you can also use the ILWP Colored Tag Cloud in your themes. Simply add this to your index.php (or other template file) in the position you want the tag cloud to appear:

<?php
if ( function_exists( 'ilwp_tag_cloud' ) ) {
ilwp_tag_cloud();
}
?>

Options: ILWP Colored Tag Cloud comes with a number of options. You can choose to use colors or not, choose to use color names or color numbers, specify the minimum (default 8px) and maximum (default 20px) sizes for the tags, and change the title (applies only on the widget).

{ 3 trackbacks }

A Colored Tag Cloud For Your WordPress Blog | I Like WordPress!
April 8, 2009 at 10:12 pm
Contact Form 7 Changes Plugin Admin Path! | WpFunc
July 22, 2009 at 2:48 pm
ILWP’nin Colored Tag Cloud Eklentisini Kullananlara… | KaiseRCrazY.CoM, Serkan Algur
August 13, 2010 at 1:49 am

{ 60 comments… read them below or add one }

Nicolás April 16, 2009 at 5:41 pm

Nice plugin, but please, correct the post:

You need to call the function (in the manual method) by ilwp_tag_cloud and not by ilwp_colored_tag_cloud.

Bye :)

Reply

Steve April 16, 2009 at 6:51 pm

Done, and thanks for the correction :)

Reply

Nicolás April 17, 2009 at 12:25 pm

np, thanks to you for the plugin :)

Nice update :)

Reply

uwiuw April 18, 2009 at 2:57 am

i think what yu have done is quite great. i love the plugin

Reply

Juanita April 22, 2009 at 10:10 am

Great plug-in. I wonder if you can help me with a tag bug?
On certain tags I get the Not found error like if you go to my site and click on organizing tag in colored tag cloud then click on credits. CREDITS seems to work fine but ORGANIZING does not show the posts? Any ideas?

Reply

Juanita April 22, 2009 at 10:23 am

OMG! Figured it out – it is a bug. Got it fixed. This will take time because I will manually have to repair the problem for EACH broken tag in my WP blog :-(

Reply

Steve April 22, 2009 at 11:59 am

Glad you got it worked out. If you need help with anything WordPress, do let me know.

Reply

Areil May 2, 2009 at 7:06 am

For some reason this is selecting only the final x number of tags instead of the most popular. For example, with 45 tags shown, it only displays T-Z. Is there anyway to have this show most popular? Or to add a “2 or more” rule to wipe out tags with only one post?

Reply

Areil May 2, 2009 at 7:28 am

Actually, I found a fix for this myself. I changed the ‘orderby’ from ‘name’ to ‘count’ and ‘ASC’ to ‘DESC’ in both of the following codes.

$defaults = array(
‘unit’ => ‘pt’, ‘number’ => 45,
‘format’ => ‘flat’, ‘orderby’ => ‘name’, ‘order’ => ‘ASC’,
‘exclude’ => ”, ‘include’ => ”
);

$defaults = array(
‘unit’ => ‘pt’, ‘number’ => 45,
‘format’ => ‘flat’, ‘orderby’ => ‘name’
‘order’ => ‘ASC’
);

Reply

NaDs May 6, 2009 at 10:29 am

Hi,

I got it to work , but it shows only one font size with different colors (all underlined, how can i remove the under line)

Please help

thank you

Reply

Jane July 9, 2009 at 5:38 pm

I like the concept and the way the colors work but I wish that the font size of the words/letters could go smaller. I think the smallest possible is 18 but I’d like to see it go lower, at least down to 16.

Reply

Steve July 9, 2009 at 5:44 pm

Hi Jane,

There are two values on the settings page – one for the smallest font size, and one for the largest. The range for the small end of font sizes is between 6 and 10px, between 18px and 30px for the largest.

Reply

Serkan Algur July 14, 2009 at 12:38 am

hi everybody. i fixed for T-Z ordering.

find
$tags = get_tags( array_merge( $args, array('orderby' => 'name', 'order' => 'DESC' ) ) ); // Always query top tags
and only change orderyby like this;
$tags = get_tags( array_merge( $args, array('orderby' => 'count', 'order' => 'DESC' ) ) ); // Always query top tags

all done! Thanks for the plugin!

Reply

etienne July 18, 2009 at 10:03 am

Hey,
Looks like its great, but it does not work great in my sidebar with wp 2.8.1 (font is super small, on two lines)…I tried to find an “edit option”, but there is none in the widget menu, and the code in the plugin editor seems alright.
Any advice?

Reply

Steve July 18, 2009 at 12:13 pm

@etienne – did you visit the options page to set the options? Font sizes are controlled there rather than on the widget itself.

Reply

etienne July 19, 2009 at 8:18 am

Thanks! It does work (w/out me doing anything, just waited awhile). And it looks really great. 2 little things, that might be of interest for more people:
- how can I remove the under line (maybe to make it appear when I roll over)?
- how can i select an array of colors (I’d like to keep them in the same range).
Thanks for the work and for the plugin, it’s a great tag cloud

Reply

Serkan Algur July 22, 2009 at 3:27 pm

RAND is always my favourite :D Thanks :)

Reply

CJC September 6, 2009 at 4:39 pm

Is there a link to an example of what this looks like?

Reply

Steve September 6, 2009 at 4:59 pm

Look on this post: http://ilikewordpress.com/259/protecting-your-wordpress-blog-from-hackers-crackers-and-jerks/ toward the bottom; there’s a link for ‘hosting that gives you shell access’.

Reply

Google Adsense Friendly October 5, 2009 at 4:18 am

Just used this plugins. But, I have a question about the colors. How to fix the white color into “red”?

Please, advice me. Thanks for your help.

Reply

Steve October 5, 2009 at 9:23 pm

Can’t change from one color to another – but you can get rid of white. Just delete it from the color list.

Reply

Obi-Mom Kenobi October 6, 2009 at 2:56 pm

This is a great plug-in, very eye-catching. I’ve had some complaints though about the tags not being in alphabetical order – and therefore hard to find. I display ALL my tags, which I know isn’t recommended. Yet, my readers have always found it useful. Is this a possible option for future versions of the plug-in? Many thanks. OMK

Reply

isaac November 29, 2009 at 10:52 pm

Hi,
Thank you for a great tag cloud.
I was wondering if i can make border to it and resize the width of it.
thnak you,
Isaac

Reply

Steve December 10, 2009 at 9:53 am

Not a problem, Isaac. In your stylesheet, target the class “ilwp_widget_tag_cloud”. You can use any standard CSS on the widget, including border and width.

Reply

isaac December 10, 2009 at 11:05 am

Hi Steve,
Sorry, but I do not find “ilwp_widget_tag_cloud” in my stylsheet CSS.
I guess ther is an way to add it, but this is behind my abilities.

Reply

Malaysia Classifieds December 18, 2009 at 7:46 pm

Wow! Really cool plugin for WP. And the options panel also make it easier for custom display. Thanks for the plugins :)

Reply

Stuart Meyer February 16, 2010 at 6:06 pm

I got the tag cloud to work with different colors, but the font size is very small and one size only. I went to Settings, Colored Tag Cloud, which shows “ILWP Colored Tag Cloud v.1.2 ~ General Options” at the top, and changed the min font to 7 and max to 18, but still no change. Any suggestions? Thanks in advance. -Stuart

Reply

Zippy April 19, 2010 at 4:48 pm

For some reason my words in the cloud are all together no spacing between tag words. Can I add a (& nbsp;) in the plugin to fix this?

Reply

JOHN May 16, 2010 at 9:50 pm

I would like to randomize the order of the tags that show. Right now the largest tags appear at the bottom and the smallest at the top. How do I randomize them?

Reply

Pete June 21, 2010 at 8:32 am

Can this cloud display different font sizes per tag as well as different colours?

Reply

Steve June 21, 2010 at 9:10 am

Pete, sizes are calculated by the popularity of the tag – the more posts, the larger the size. The plugin uses the same code as the standard WP tag cloud widget. If you’re not seeing differing sizes then either the range of posts/tags isn’t great enough to trigger a change by the algorithm, or possibly a stylesheet issue.

Reply

Pete June 21, 2010 at 9:33 am

I didn’t realise that – do now though. Ta.

Stuart Meyer - Indianapolis Photographer June 21, 2010 at 9:27 am

Yes, the colored tag cloud on my photography blog now has different sizes since I populated it with several posts. I hadn’t realized this was how it functioned. Thanks. Stuart

Reply

Tommy June 28, 2010 at 1:51 am

Thanks for updating to work great with 3.0.

Here is the code for alphabet order of tags. Starts around line 199 in the code.

$defaults = array(
‘unit’ => ‘pt’, ‘number’ => 45,
‘format’ => ‘flat’, ‘orderby’ => ‘name’, ‘order’ => ‘ASC’,
‘exclude’ => ”, ‘include’ => ”
);

Orderby to ‘name’ and order to ‘ASC’

Reply

Thomas August 12, 2010 at 11:32 pm

Is there a location to download the previous version? Just updated to latest version and it appears broken for latest WordPress. I would like to revert back to a previous install.

Reply

Steve August 12, 2010 at 11:51 pm

The previous version is fundamentally different from v2.0 in that it uses an options page and the old single widget style.

I suppose I can dig up the old one if you really want to revert.

Reply

Thomas August 13, 2010 at 11:26 pm

Thank you for the quick fix and update. I should have better detailed how I was receiving the error. Thanks again for the super quick response and also for this plugin. I was only looking to revert because of the error but with the update there is no need.

Thomas August 12, 2010 at 11:32 pm

Has any parameters been changed? Coming up with an error on Line 30 of the plugin.

Reply

Steve August 12, 2010 at 11:40 pm

Well – that’s awkward. Can you tell me the error you’re seeing? It’s been tested on the latest WP nightly build, 3.1-alpha.

AND – I just installed on a fresh install of 3.0.1 populated with 50+ posts and 100+ tags and saw no errors.

Reply

Steve August 13, 2010 at 7:51 am

Thomas, I’ll have a fix for this posted by the end of the day. Sorry for the trouble you’re having.

Reply

Serkan Algur August 13, 2010 at 1:37 am

@Thomas
If you use the function on your template you can get the Missing argument on line 30 error. Try new widget.
@Steve All function users get missing argument on line 30. the first function ilwp_tag_cloud( $args ) {
is something missing before this code?

Reply

Steve August 13, 2010 at 7:32 am

Thanks Serkan, that’s exactly the problem. The function now requires that the config arguments be passed to it. I’ll fix that straightaway. The previous function required no args.

Reply

Serkan Algur August 13, 2010 at 11:16 am

:) I compared old and new files when i look at 30th line. everybody waits for new update :) thanks again

Thomas August 13, 2010 at 11:31 pm

I am going to add a new widget area to my theme. I use the tag plugin at the bottom of each of my pages and so I was using the ‘function exists’ code.
Thanks for the quick fix.

Reply

Steve August 13, 2010 at 12:15 pm

The update was posted to the system several hours ago. It is version 2.0.1.

Thanks for your patience, and sorry for the inconvenience.

Reply

Moist Heating Pad November 1, 2010 at 11:11 am

Thank you for the tip. When I first started seeing tag clouds I didn’t get it. It just looked like a space filler to me. But now I do “get it’, it gives you a way to see at a glance what the main topics are, and i have started using them myself.

Reply

Massage Holster December 4, 2010 at 9:55 am

Tag clouds are cool and Ive just added one to my site. thanks for the help.

Reply

Andrew Johnson December 25, 2010 at 1:22 pm

On my website http://templatesagogo.com I am trying to configure your great plugin. I used the php code in the sidebar.php. There doesn’t seem to be a way to configure the plugin for sizes and colors. Any help? I want to limit the sizes to 10-25 px and remove the white, silver, grey and lime colors.

Reply

Andrew Johnson December 25, 2010 at 1:27 pm

Oh I thought to look at the plugin php file and just changed the defaults. It worked. :) Very nice plugin!

Reply

Steve December 26, 2010 at 3:40 pm

Glad you got it to work, Andrew. There is a whole slew of settings in the widget where can configure all that, though :)

Reply

Andrew Johnson December 26, 2010 at 3:53 pm

I configured it in the widget “control panel” but when the widget is parked in the inactive widget area, the settings do not get used. Just doing it in the php works fine. :)

Hubrecht March 13, 2011 at 3:37 pm

I’ve been testing the plugin, but I have some problems with it. I only want it to use these colors: #dbdbd9, #b8b9bd, #a2a5aa, #d0cfcd.

But I can’t find how to change the following code to do that. With everything I try, some tags don’t get a font-color and end up with the regular link formatting (black in my stylesheet), also if I remove black from the options. What to do?

$default_colors = array( ‘aqua’, ‘magenta’, ‘blue’, ‘fuchsia’,
‘gray’, ‘green’, ‘lime’, ‘maroon’,
‘navy’, ‘olive’, ‘purple’, ‘red’,
‘silver’, ‘teal’, ‘white’, ‘yellow’);

$default['min_size'] = 12;
$default['max_size'] = 20;
$default['number'] = 35;
$default['use_colors'] = true;
$default['use_color_names'] = true;
$default['sort'] = ‘random’;
$default['order'] = ‘ASC’;
$default['color_names'] = $default_colors;
$args = wp_parse_args( $args, $default );

Reply

Steve March 13, 2011 at 3:59 pm

Sorry you’re having troubles…

First, you should put the color values into the box within the widget, one color per line. I’m assuming that you’re doing this.

Next, you’ll need to fix a tiny oversight in the plugin code that your issue exposed.

In the following section:

if ( $use_colors ) :
$color = rand( 0, $c );
$colorstyle = " color: $pre" . $color_names[$color] . ";";
else :

change

$color = rand( 0, $c );

to:

$color = rand( 0, $c - 1 );

The short explanation is $c is set to the number of colors in the passed array – but the array keys begin with ’0′. So occasionally the $color variable will be set to an array key that doesn’t exist. The HTML output will be ‘color: #;”, which will cause the browser to display the inherited color, in your case, black.

I’ll update the plugin in the next day or two to fix this, but meanwhile, you can add the “-1″ to the $color line and you should be good to go.

Reply

Hubrecht March 13, 2011 at 8:36 pm

Wow, thanks for your very quick reply! That works like a charm! So next thing I was wondering, would it be possible to give the most used tags for example a darker color, and the least used tags a lighter color? Thanks for all your efforts!

Reply

Steve March 22, 2011 at 7:28 pm

Sorry for not answering you sooner, I completely spaced it out.

The plugin would have to be modified to have that functionality. I’ll definitely put it on the to-do list for the next update. Would be kind of a cool feature to have. Thanks for your input.

Reply

Werbung Netz March 22, 2011 at 2:53 am

Nice Codes. Thanks. (I Like WordPress = Coll Name)

Reply

Ash Quadir March 22, 2011 at 6:54 pm

I installed the plugin and activated the widget in my side bar a few days ago. Been actively reading posts — but the tags in the cloud have remained in the smallest setting size. At what point do I get different sizes for words in the tag cloud?

Reply

Steve March 22, 2011 at 7:25 pm

The tag cloud reflects the frequency of use of the tags you have used in your posts. The more posts a tag appears in, the larger its text size in the cloud.

Reply

Tom August 23, 2011 at 8:49 pm

it looks like the plugin doesn’t appears in the options menu – localized (czech) version of WP 3.2.1

Reply

Steve August 23, 2011 at 9:14 pm

Options are available in the widget instead of an options page. This lets you configure each widget differently if you want to use more than one.

Reply

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>