Tag Cloud – Defination – What is a tag cloud?

A tag cloud is a stylized way of visually representing occurrences of words used to described tags. The most popular words are normally highlighted in a larger, bolder font. Visitors to a blog or site using a tag cloud, are able to easily see the most popular topics within the website by clicking on the respective tags.

If you are using the Wordpress Tag Cloud widget, you will come to know that you are unable to style it the way you like. If you call it directly from PHP in your template there are a few options you can use to control the look. The widgetized version does not give you access to options to control the style
neither you can style it with CSS. Not a problem! Now, You can fix the Tag Cloud Widget with this php function without touching the Wordpress core code.

HTML code of the default Tag Cloud widget:

< a href="http://www.digitalpercept.com/?tag=wordpress" class='tag-link-1' title='3 topic' style='font-size: 8pt;'>wordpress< /a>

The CLASS attribute is unique per tag and does not include any weighting information. And the STYLE tag hard-codes the font size based on weight but would override any CSS font-sizing we might have been able apply with the CLASS. Lets use the font-size information from the STYLE to determine the weight and
write a small filter function to rewrite the CLASS and STYLE declarations so we can use CSS to style the tag cloud.

Copy this filter function code block to your functions.php file in your active template.


// filter tag clould output so that it can be styled by CSS
function style_my_tag_cloud($tags)
{
$tags = preg_replace_callback("|(class='tag-link-[0-9]+)('.*?)(style='font-size: )([0-9]+)(pt;')|",
create_function(
'$match',
'$low=1; $high=5; $sz=($match[4]-8.0)/(22-8)*($high-$low)+$low; return "{$match[1]} tagsize-{$sz}{$match[2]}";'
),
$tags);
return $tags;
}


Hook the created php function into the rendering of the tag cloud widget

add_action('wp_tag_cloud', 'style_my_tag_cloud');

The function rewrites the tag links to look like this:

< a href="http://www.digitalpercept.com/?tag=wordpress" class='tag-link-1 tagsize-1' title='3 topic'>wordpress< /a>

The default tag cloud uses font-sizes from 8 to 22 points. The filter function uses a regular expression to extract that size and remap the default range (8-16) to the range defined by the $low and $high variables, for this example I used 1 though 5. An additional CLASS is added ‘tagsize-n’ where ‘n’ is 1-5 and then the STYLE attribute is removed. With the additional class you can now add something like this to your style.css and make the Tag Cloud look any way you’d like!


a.tagsize-1 { font-size: 8px; }
a.tagsize-2 { font-size: 10px; }
a.tagsize-3 { font-size: 12px; }
a.tagsize-4 { font-size: 14px; }
a.tagsize-5 { font-size: 16px; }