whalespine.org

I noticed this morning that the tag cloud on whalespine.org was looking a bit big. I’ve been adding more tags, so I guess that is to be expected. I figured I could adjust some setting or css and voila, the tags would be smaller. No go. The default WordPress tag cloud widget has no options and when the tag cloud is generated it explicit sets the font size in the html.

The internet, of course, helped me get started on my own solution. This post outlines what I thought I wanted which is to add css classes to the tag_cloud. First off, the solution presented doesn’t completely work because the WordPress tag cloud produces decimal font sizes, so the regex is broken. I’m assuming in a previous version of WordPress, the fonts were integer. Anyway, the fix for this is as follows:

function style_tag_cloud($tags)                                                                                       
{                                                                                                                     
   $tags = preg_replace_callback("|(class='tag-link-[0-9]+)('.*?)(style='font-size: )([0-9]+[\.?0-9]*)(pt;')|",       
                                 create_function(                                                                     
                                                 '$match',                                                            
                                                 '$low=1; $high=5; $sz=floor(($match[4]-8.0)/(22-8)*($high-$low)+$low); return "{$match[1]} tagsz-{$sz}{$match[2]}; ";'                                                                    
                                                 ),                                                                   
                                 $tags);                                                                              
   return $tags;                                                                                                      
}       

Once I fixed it, I realized I didn’t actually want to add CSS classes because now the font sizes will be integer and so subtle difference between tags will be lost. What I really wanted was to just scale the font sizes to a specific range. Using the above code as a base, I put the following in the functions.php file of my theme.

function style_tag_cloud($tags)                                                                                       
{                                                                                                                     
   return preg_replace_callback("/(class='tag-link-[0-9]+'.*?style='font-size: )([0-9]+[\.?0-9]*)(pt;')/",            
                                tag_replace, $tags);                                                                  
}                                                                                                                     
                                                                                                                      
function tag_replace($match) {                                                                                        
                                                                                                                      
   // New font bounds                                                                                                 
   $low = 8;                                                                                                            
   $high = 18;                                                                                                          
                                                                                                                      
   // Scale the size                                                                                                  
   $sz = ($match[2]-8.0)/(22-8)*($high-$low)+$low;                                                                    
                                                                                                                      
   return "{$match[1]} {$sz}pt;'";                                                                                    
}                                                                                                                     
// Hook into the rendering of the tag cloud widget                                                                    
add_action('wp_tag_cloud', 'style_tag_cloud');