Help, this is probably the best way to have control over the styling of the wp_tag_cloud ...

I was looking for a way to add size based classes to my tags within the tag cloud widget. The problem here is that this solution only works when hard coded into for example a template file, but not for the tag cloud widget.

I also found this snippet to add slug classes and they beautifully work right out of the box. I simply had to place them inside the function.php file.

I was trying to get solution one to work in the same way solution number two works, but with the size based class names instead of slug names or even both. However, I can't figure it out and need help. Thanks in advance.

2 Answers 2


try this code:

add_filter ( 'wp_tag_cloud', 'tag_cloud_font_size_class' );  
function tag_cloud_font_size_class( $taglinks ) { 
    $tags = explode('</a>', $taglinks);
    $regex1 = "#(.*style='font-size:)(.*)((pt|px|em|pc|%);'.*)#e"; 
    $regex2 = "#(style='font-size:)(.*)((pt|px|em|pc|%);')#e";         
    $regex3 = "#(.*class=')(.*)(' title.*)#e";         
    foreach( $tags as $tag ) {         
        $size = preg_replace($regex1, "(''.round($2).'')", $tag ); //get the rounded font size       
        $tag = preg_replace($regex2, "('')", $tag ); //remove the inline font-size style
        $tag = preg_replace($regex3, "('$1tag-size-'.($size).' $2$3')", $tag ); //add .tag-size-{nr} class
        $tagn[] = $tag;
    $taglinks = implode('</a>', $tagn);     
return $taglinks; 

there might be more effective solutions, or a way to put it all into one regex; however it works (I am no expert in preg_replace()). can be used at the same time as the slug class filter.

  • Thanks Michael, it does work. I should probably start learning regular expressions. Really powerful stuff it seams. Do you mind me asking, how do you teach yourself (in general)? I find it hard giving myself challenges and thus I mostly look at code other people wrote, but the learning curve seams to be slow that way. Any thoughts? Thanks again.
    – Marc Wiest
    Commented Aug 18, 2012 at 17:46
  • I am still learning as well; general sources to combat my ignorance are php.net and w3schools.com combined with a lot of 'trial and error'.
    – Michael
    Commented Aug 18, 2012 at 17:49

maybe a better/more simple approch is hooking in "wp_generate_tag_cloud_data" ;)

function tribalpixel_tag_cloud_class($tags_data) {

    foreach ($tags_data as $key => $tag) {
        $tags_data[$key]['class'] =  $tags_data[$key]['class'] ." myCustomClass";
    return $tags_data;

add_filter('wp_generate_tag_cloud_data', ' tribalpixel_tag_cloud_class');

in $tag you have [id], [url], [name], [title], [slug], [real_count], [class], [font_size]

So if you want a custom class for every tag you can use something like:

$tags_data[$key]['class'] = "tag-link-".$tag['slug'];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.