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

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 ๐Ÿ˜‰

Technorati Tags: ,


Posted

in

, ,

by

Tags:

Comments

18 responses to “Self made tag cloud for WordPress”

  1. Rosina Lippi Avatar

    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. flod Avatar

    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. Rod Avatar

    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. flod Avatar

    @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. Teresa Avatar

    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. flod Avatar

    You’re welcome ๐Ÿ˜€

  7. Aquarium Filter Avatar

    I really need that, thanks…

  8. Deon Avatar

    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?

  9. flod Avatar

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

  10. Aquarium Stores Avatar

    Will this code work if I write it inside a widget? No an expert in php, my website was done by some one else.

  11. flod Avatar

    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.

  12. Aquarium Stores Avatar

    I actually tried the codes but it shows a lot of error! Is it tested for the latest wp?

  13. flod Avatar

    Yes, since I’m using it right now on this blog (WP 2.7.1)

  14. ACS04 Avatar

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

  15. solicitors northamptonshire Avatar

    Works great for me, thanks!

  16. Tech pinger Avatar

    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 .

  17. Richard Avatar
    Richard

    Can you show me how to exclude tags from a certain category?

    Thanks in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *