Rounded Font-Sizes (with Colors!) for Tag Clouds

Tag clouds accomplish their varied font sizes by applying inline styling to each tag. The resulting font sizes can be really weird with values like font-size: 29.3947354754px;.

Of course, there is nothing inherently wrong about that, but it feels a bit unsettling and less controllable. Awesomely, Mike Summers sent in a solution he uses on his own site..

Template Code

Here is the template code:

<div id="tagCloud">
  <ul>
    <?php
      $arr = wp_tag_cloud(array(
        'smallest'   => 8,          // font size for the least used tag
        'largest'    => 40,         // font size for the most used tag
        'unit'       => 'px',       // font sizing choice (pt, em, px, etc)
        'number'     => 200,        // maximum number of tags to show
        'format'     => 'array',    // flat, list, or array. flat = spaces between; list = in li tags; array = does not echo results, returns array
        'separator'  => '',         //
        'orderby'    => 'name',     // name = alphabetical by name; count = by popularity
        'order'      => 'RAND',     // starting from A, or starting from highest count
        'exclude'    => '',         // ID's of tags to exclude, displays all except these
        'include'    => '',         // ID's of tags to include, displays none except these
        'link'       => 'view',     // view = links to tag view; edit = link to edit tag
        'taxonomy'   => 'post_tag', // post_tag, link_category, category - create tag clouds of any of these things
        'echo'       => true        // set to false to return an array, not echo it
      ));
      foreach ($arr as $value) {
        $ptr1 = strpos($value,'font-size:');
        $ptr2 = strpos($value,'px');
        $px = round(substr($value,$ptr1+10,$ptr2-$ptr1-10));
        $value = substr($value, 0, $ptr1+10) . $px . substr($value, $ptr2);
        $ptr1 = strpos($value, "class=");
        $value = substr($value, 0, $ptr1+7) . 'color-' . $px . ' ' . substr($value, $ptr1+7);
        echo '<li>' . $value . '</li> ';
      }
    ?>
  </ul>
</div>

The result turns this:

<a href='url' class='tag-link-66' title='6 topics' style='font-size:29.3947354754px;'>Tag Name</a>

..into this:

<a href='url' class='color-29 tag-link-66' title='6 topics' style='font-size:29px;'>Tag Name</a>

Class names for colors

Notice in the above output that the link has a class name of color-29 now that it didn’t before. Now you have a hook to colorize tag names based on their size.

.color-29 {
   color: red;
}

Thanks for sharing your solution, Mike!