56 | Advanced Filter for Tag Cloud Widget Css Classes

tag cloud widget colored with css

tag cloud widget advanced color styling

The default tag cloud widget does not offer a lot of formatting possibilities, partly because it only outputs one css class with a reference to the tag ID.
It uses an inline style, which outputs the font-size, to distinguish the tags according the number of post they belong to.

This filter function is coded to add a css class with the tag slug .tag-slug-{slug} and with a rounded tag size .tag-size-{number}, and to remove the inline style.

add_filter ( 'wp_tag_cloud', 'tag_cloud_widget_advanced_classes' );  

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

For the code, also see the pastebin.

The added css classes can for instance be used to color the tags according to the number of appearance; as you can see here in the tag cloud when you scroll down on the left.

This entry was posted in Tips & Tricks, WordPress and tagged , , , , , . Bookmark the permalink.

2 Responses to Advanced Filter for Tag Cloud Widget Css Classes

  1. Hortensia comments:


    I pasted your code for the tags widget and it works! The only problem that I have is that I do not know where or how to place the font sizes .tag-size-{number}? If it is in the child css, can you please give me an example of what the code looks like? And if it is in the function.php could you give me an example aswell?


    • alchymyth replies:

      the styles belong into style.css (of your child theme);
      general examples:
      a.tag-size-8 { font-size: 8px; color: #CC3366; }
      a.tag-size-9 { font-size: 9px; }

      if your theme uses formatting on the links in the sidebar or widget areas (such as my theme in this site), you might need to use more specific styles;
      more specific examples:
      .widget-area a.tag-size-8:link { font-size: 8px; color: #CC3366; }
      .widget-area a.tag-size-9:link { font-size: 9px; color: #D8648B; }

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.