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):
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 '\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 😉
Leave a Reply