Like the blog? Get the book »

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

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">
      $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> ';

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!

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.

  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. thanks for sharing this wonderful tip. its works for me. great!

Comments are closed for this post. Contact us with any critical information.
© 2009–2024 Digging Into WordPress Powered by WordPress Monzilla Media shapeSpace