View an Example of this article before you get started.

A tag cloud is a list of tags that are sized based on keyword count. For this example we will be using a static array of tags, but this can easily be extended to a database application.

We will start off with the CSS which will provide the visual element to this tutorial.

<style type="text/css">
.tag_cloud { padding: 3px; text-decoration: none; }
.tag_cloud:link  { color: #81d601; }
.tag_cloud:visited { color: #019c05; }
.tag_cloud:hover { color: #ffffff; background: #69da03; }
.tag_cloud:active { color: #ffffff; background: #ACFC65; }
</style>

Next up, a function that will return an Array we will be using. As you will see it is a simple Multi-dimensional Array that stores the tag/count pairs.

function get_tag_data() {
    $arr = Array('Actionscript' => 35, 'Adobe' => 22, 'Array' => 44, 'Background' => 43, 
	'Blur' => 18, 'Canvas' => 33, 'Class' => 15, 'Color Palette' => 11, 'Crop' => 42, 
	'Delimiter' => 13, 'Depth' => 34, 'Design' => 8, 'Encode' => 12, 'Encryption' => 30, 
	'Extract' => 28, 'Filters' => 42, 'Flash' => 32, 'Functions' => 19, 
	'Gaussian Blur' => 44, 'Grafix' => 49, 'Graphics' => 35, 'Hue' => 47, 'Illustrator' => 8, 
	'Image Ready' => 12, 'Javascript' => 47, 'Jpeg' => 15, 	'Keyboard' => 18, 'Level' => 28, 
	'Liquify' => 30, 'Listener' => 10, 'Logo' => 12, 'Loops' => 22, 'Macromedia' => 26, 
	'Method' => 28, 'MySQL' => 18, 'Obfuscation' => 13, 'Object' => 39, 'Optimize' => 25, 
	'PDF' => 37, 'PHP' => 44, 'PSD' => 17, 'Photography' => 28, 'Photoshop' => 46, 
	'Revert' => 50, 'Saturation' => 35, 'Save as' => 28, 'Scope' => 11, 'Scripting' => 9, 
	'Security' => 41, 'Sharpen' => 49, 'Switch' => 41, 'Templates' => 11, 'Texture' => 22, 
	'Tool Palette' => 30, 'Variables' => 50);
    return $arr;
}

Now that we have the array function all setup, we move on to the function that will return our cloud tag HTML

function get_tag_cloud() { ... }

Lets run through this big function and explain what is going on. First off we define the min and max font sizes.

// Default font sizes
$min_font_size = 12;
$max_font_size = 30;

Call our "get_tag_data" function to retrive an array of tags.

// Pull in tag data
$tags = get_tag_data();

We pull out the minimum and maximum count from our tags. Creating a spread to be used in our font size calculations. Check to see if we have a good spread, if not, set one.

$minimum_count = min(array_values($tags));
$maximum_count = max(array_values($tags));
$spread = $maximum_count - $minimum_count;

if($spread == 0) {
    $spread = 1;
}

Finally we start the HTML building process to display our tags. For this demo the tag simply searches Google using the provided tag. We then return the HTML code.

$cloud_html = '';
$cloud_tags = array(); // create an array to hold tag code
foreach ($tags as $tag => $count) {
	$size = $min_font_size + ($count - $minimum_count) 
		* ($max_font_size - $min_font_size) / $spread;
	$cloud_tags[] = '<a style="font-size: '. floor($size) . 'px' 
		. '" class="tag_cloud" href="http://www.google.com/search?q=' . $tag 
		. '" title="\'' . $tag  . '\' returned a count of ' . $count . '">' 
		. htmlspecialchars(stripslashes($tag)) . '</a>';
}
$cloud_html = join("\n", $cloud_tags) . "\n";
return $cloud_html;

Here is some example HTML to call this tag builder.

<h3>Sample Tag Cloud results</h3>
<div id="wrapper"
<!-- BEGIN Tag Cloud -->
<?php print get_tag_cloud(); ?>
<!-- END Tag Cloud -->
</div>

There you have it a step by step guide on how to write your very own Tag Cloud... until next time... Happy Coding.