Add Technorati tags to WordPress posts

There are several WordPress plug-ins that allow to add Technorati tags at the end of your posts. In my experience with WordPress plug-ins, I tend to prefer the simpler ones for an elementary reason: usually reliability is inversely proportional to complexity

On this basis I chose SimpleTags. SimpleTags allows to manage TAGS directly inside the WordPress editor: it’s possible to add tags as a list at the end of the post (syntax [tags ]…[/tags ], without spaces before the closing square brackets) or define TAGS progressively using the post’s content (with the syntax [tag ]example[/tag ], without spaces before the closing square brackets).

To improve the appearance of the results, you need to make little modifications to the plug-in code and the WordPress template.

Open simpletags.php with a text editor (possibly with syntax highlight support): you should see these two lines of code just after the initial comments

$pre_replacement = '<p> Technorati Tags: ';
$post_replacement = '</p>';

You need to modify the variable $pre_replacement in order to add a class to the generated “Technorati Tags” paragraph:

$pre_replacement = '<p class="tag_technorati"> Technorati Tags: ';
$post_replacement = '</p>';

Now you have to save the image used for the icon in the images folder inside the current template and add this rule to the style sheet:

.tag_technorati {
background: transparent url(images/technorati.gif) no-repeat scroll left center;
padding: 8px 2px 8px 20px;
}

Obviously, if you want you can also modify the variable $pre_replacement to create a DIV instead of a paragraph.

Technorati Tags: Technorati, SimpleTags, tags

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