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 appeareance 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 😉

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 😉

Technorati Tags: ,

18 thoughts on “Self made tag cloud for WordPress

  1. This is such a great tutorial. It would be perfect if you didn’t leave me in the lurch at this point:

    obviously you must choose the right point to place it

    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.

  2. how should I know what the right point is in the template?

    “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)?

  3. 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 🙂

  4. @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 🙁

  5. 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

  6. Pingback: How to put categories in tag cloud ? - One Theme Support Forums

  7. Cool. I’ve tried several plugins now and none of them seem to work the way I want it to. Hopefully this is the answer.

    One question: how does it know what’s the most “popular” and which tag will be the biggest?

  8. At the beginning of the first piece of code: it scans all posts and stores the maximum number of posts into a variable ($max_value).

  9. This code can be adapted, but that’s not a simple task. It’s probably easier to find a “tag cloud” for your CMS and change it according to your needs.

  10. Hello,

    Thanks for this great tips.

    Here I’ve another one, which is just a little adaptation from yours :

    Uncomment the 2 first lines of your script…
    Then use the WP get_categories tag to retrieve all the sub category from a single one…
    Hope it can help !

    //$qrystr = “SELECT cat_ID, cat_name, category_count from $wpdb->categories ORDER BY cat_name”;
    //$cats = $wpdb->get_results($qrystr);
    // Extract children, grand-children, grand-grand-children, and so on, of a single category from its ID (i.e. 7)
    $cats = get_categories(array(‘child_of’ => 7));

  11. Thanks for the tip, was looking for a ready code like this, I can’t do it with WP widget coz the theme I’m using does not support widgets .