DiggingIntoWordPress

by Chris Coyier & Jeff Starr

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

Posted by on

Tag clouds accomplish their varied font sizes by applying inline styling to each tag. The resulting font sizes can be really weird like style='font-size:29.3947354754px;'. There is nothing inherently wrong about that, but it feels a bit unsettling and less controllable. Mike Summers sent in a solution he uses on his own site. Let’s check it out.

<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;
}

7 Responses

  1. Nice trick. I think that’s the way it should be in WP out of the box.

  2. Great concept,

    Just a side-note though: Maybe it’s easier to use one or two preg_match/regex’es instead of the strpos and substr’s.

    Thanks again, I’ll use this for sure the next time I’m gonna make a tag-cloud. Especially the CSS-hook will come in handy. (/me’s thinking of a jQuery script to color them automaticly from green to red (hot -> not) for example.


    TeMc

  3. Do you think that this will fit into a blog made only in 2 or 3 colors ? How can we select the colors ?

  4. Glad to see that people like this. : )

    I think in terms of strpos and substr so I naturally go there. Perhaps not the best method but for me it is the most readable.

    @Lucian: To change the colors, just add some css:

    .color-n { #123456; }

  5. Really like this. Sensible – as Teofilm says: why isn’t it like this out of the box? Good one Mike.

  6. palPalani February 15, 2010

    thanks for sharing this wonderful tip. its works for me. great!

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry