Self made tag cloud for WordPress

flod — Sun, 08 Jul 2007 16:37:58 +0000

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):


 
// 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 '';
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 ',$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,"\r";
 }
}
echo "
";	
?>

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: tag cloud, wordpress

Yet Another Tech Blog » php

Self made tag cloud for WordPress