Self made tag cloud for Wordpress
In this tutorial I will show you how to create a simple tag cloud with WordPress categories and place it in your sidebar without using external plug-ins or widgets (you can read here an Italian article about the same argument).
You can write the following code inside the sidebar.php file in your template, or create a new file (tagcloud.php) and include it in your sidebar.php: the second way is better if you have multiple sidebar files.
Let’s start with the second solution: create a file tagcloud.php and place it in your template folder. This is the code you have to write inside this file (you can download tagcloud.php in text format here):
<?php // Extract categories from database $qrystr = "SELECT cat_ID, cat_name, category_count from $wpdb->categories ORDER BY cat_name"; $cats = $wpdb->get_results($qrystr); // Find the max number of posts for a single category $max_value = 0; foreach ($cats as $cat) { if ($max_value < $cat->category_count) { $max_value = $cat->category_count; } } // If you want to change the appereance of the tag cloud (maximum and minimum percentage in font-size, percentage difference between levels), change only these 3 variables $min_percentage = 80; $max_percentage = 200; $percentage_level = 10; $num_levels = ($max_percentage-$min_percentage)/$percentage_level; $postgap = $max_value / $num_levels; // Display all categories inside a div with id=cloud // Assign a class to the category (or categories) with more posts // Do not show categories without posts echo '<div id="cloud">'; foreach ($cats as $cat) { if ($cat->category_count>0) { $catname = $cat->cat_name; $catlink = get_category_link($cat->cat_ID); $postcnt = $cat->category_count; $fontsize_percentage = $min_percentage+(Round($postcnt/$postgap)*$percentage_level); echo '<a href="',$catlink,'"'; ($postcnt == 1) ? $str_post=' post">' : $str_post=' posts">'; if ($fontsize_percentage==$max_percentage) { echo ' style="font-size: ', $fontsize_percentage,'%" class="top_category" title="',$postcnt, $str_post; } else { echo ' style="font-size: ', $fontsize_percentage,'%" title="',$postcnt, $str_post; } echo $catname,"</a>\r"; } } echo "</div>"; ?>
Let’s take a quick look at the code:
- I make a query on the WordPress database (table “categories”): results are ordered by category name and we already have all the data we need thanks to the field “category_count”
- I check all the results to find the maximum number of posts for a single category. This value is stored using the variable $max_value
- I set the maximum and minimum percentages to use as font-size, percentage difference between levels and the number of posts between two levels (this is why I need $max_value)
- now I can walk trough the results of the query, generating the html code: I write a simple link, using title to display the number of the posts for each category (so you will see a tooltip), and assign a special class to the top category (or categories)
Now change your sidebar.php to include the tagcloud.php file; obviously you must choose the right point to place it 
<?php include(TEMPLATEPATH . '/tagcloud.php'); ?>
At this point you should already be able to see the tag cloud in your blog: the next step is to style it using css. This is the stylesheet I use for this blog:
div#cloud { border: 1px dotted #E4F0DB; padding: 0.5em; margin: 0.6em 0.5em; font-family: Tahoma, Verdana, Arial; text-align: justify; line-height: 1.7em; } div#cloud a { color: #2f63b3; } div#cloud a.top_category { color: #76b391; } div#cloud a.top_category:hover { color: #4A5265; text-decoration: none; }
That’s all
Rosina Lippi said
am July 23 2007 @ 5:42 pm
This is such a great tutorial. It would be perfect if you didn’t leave me in the lurch at this point:
I need the tutorial because I’m new to WordPress and uncomfortable still with php … how should I know what the right point is in the template? I did study the template and I tried your snippet of code in a number of different places, saved it, uploaded it — but no tag cloud.
Disheartening, just when you think you’ve learned something.
Francesco said
am July 23 2007 @ 10:25 pm
“The right point to place it”: you have to look at your current sidebar (the layout of your blog, not the code) and choose where you want to display the tag cloud.
Example: “I want the Tag Cloud just after the Latest Comments block”. Ok, now you have to open the sidebar.php, find the piece of code that manages latest comments and place the tag cloud code just after this block.
Maybe if you use WordPress widgets the situation is a little more complex: if I’m not wrong you can display the tag cloud before or after, not between two widgets (I’m not a widget fan
).
Are you working on this template? Did you modify the sidebar.php of the original template (Binary Blu v. 1.4.1)?
Rod said
am August 5 2007 @ 7:33 pm
Well thank you so much this tag cloud worked great. One ? though… How do I include key words from posts in the tag cloud?
Thanks again
Rod
Francesco said
am August 5 2007 @ 10:19 pm
@Rod: unfortunately this isn’t a simple task, unless you’re using a plug-in that stores keywords in a specific table of the database
For Technorati keywords I’m using the SimpleTags plug-in, so keywords are put inside the text and not stored in a table.
To create a similar tag cloud you should query all the posts and find keywords
Teresa said
am August 19 2007 @ 9:07 am
Thank you for the fantastic code! I just tried it and it worked perfectly and now I have my fancy category cloud that I have been lusting after!
You rule!
Teresa
Francesco said
am August 19 2007 @ 9:34 am
You’re welcome
Aquarium Filter said
am January 5 2008 @ 1:52 am
I really need that, thanks…