Yet Another Tech Blog

It’s been over two months since my last post, sorry

Let’s talk about a great Italian plugin for WordPress: Hiddy. Hiddy is a simple and light plugin that adds a field to the comments form: this field has a pseudo-random name (chosen among a set of “interesting” names, like e-mail, url, etc.) and is placed inside a DIV with a random class.

<div class="A10ZHW4BMEY">
  <input type="text" name="easyCaptcha" value="" />
</div>

Thanks to a simple CSS rule this field will be hidden to standard visitors but visible to spam-bots that try to fill all the available fields in the comments form.

Final result: if this hidden field is filled up, that comment is just spam and can be safely deleted from the database.

From now on your spam queue will be so empty

Technorati Tags: hiddy, antispam, wordpress, plugin

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

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 appereance 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

<?php 
  include(TEMPLATEPATH . '/tagcloud.php');
?>

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