Individual css class for each tag in wp_tag_cloud

Question

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.

Answer 1

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.

Answer 2

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'];