Blog Overcast: Tagclouds

One thing I’ve been fiddling around with lately in the WordPress default theme Kubrick is navigation. I have enhanced the Archives navigation in the sidebar and split up what used to be Categories into “Sections” and “Topics”, and finaly restyled “Topics” into a tagcloud.

Widget Plugin: TagCloud is now available as a sidebar widget that can be downloaded as tagcloud_v12.zip. Just unpack the zip archive and move the content of tagcloud_v12/ into the plugin/widgets/ directory of your WordPress installation.

This version is fully localized, even if you use english on your blog you can modify the wording in the tagcloud title attribute by editing en_US.po and regenerate the MO file.

The reason for the split is so I can assign each post to a specific section of the site, for instance this post is assigned to the Tutorials section, but tag it with several topics, in this case WordPress among others.

To achieve it two “meta categories” was created, named “Sections” and “Topics”, that act as parents to other categories and do not have any posts assigned to them directly. The old category part of the sidebar.php was then replaced with:


<li><h2>Sections</h2>
  <ul>
  <?php
   wp_list_cats('sort_column=name&optioncount=0&child_of=21');
  ?>
  </ul>
</li>

This new sections code will just fetch the categories being children to the “Sections” category with “21” as id. The same was originally also done for the Topics. But no longer! And this will bring us on topic (sic) …

Listing the topics like the sections is just a waste of space, especially when the number of topics can grow quite large on a personal blog. So I decided to restyle it into a tagcloud.

It is really simple, just one SQL query and some conditionals to assign the “weight”. Just stick the code below into the functions.php file in the theme directory.


function dahn_get_tagcloud($child_of=0)
{
   global $wpdb;
   $categories = $wpdb->get_results(
      "SELECT cat.cat_ID, cat.cat_name, cat.category_count,
      MAX(stat.category_count) AS max, MIN(stat.category_count) AS min,
      MAX(stat.category_count) - MIN(stat.category_count) / 3 AS distribution
      FROM $wpdb->categories AS stat, $wpdb->categories AS cat
      WHERE stat.category_parent = '$child_of' AND stat.category_count > 0
      AND cat.category_parent = '$child_of' AND cat.category_count > 0
      GROUP BY cat.cat_name"
      );
 
  $thelist = '';
  foreach ($categories as $category)
  {
      if ($category->category_count == $category->min)
         $class = "tag-smallest";
      elseif ($category->category_count == $category->max)
        $class = "tag-largest";
      elseif ($category->category_count > ($category->min + ($category->distribution*2)))
         $class = "tag-large";
      elseif ($category->category_count > ($category->min + $category->distribution))
          $class = "tag-medium";
      else
          $class = "tag-small";
 
      $thelist .= '<li><a href="'.get_category_link($category->cat_ID).'" rel="tag" class="'.$class.'">'.$category->cat_name.'</a> <span class="tag-freq">('.intval($category->category_count).')</span></li>';
   }
   echo $thelist;
}

By the way, “inspiration” to the code above came from How To Make a Tag Cloud, where Pete Freitag implemented it in ColdFusion.

Call the dahn_get_tagcloud function from your sidebar.php just like the sections code. However, the tagcloud function only takes one argument, the parent category id (anything else won’t make any sense), and need the “tag-cloud” class:


<li><h2>Topics</h2>
  <ul class="tag-cloud">
  <?php dahn_get_tagcloud(18); ?>
  </ul>
</li>

The code above will just output a list very similar to the regular category list unless we style it. But unlike regular categories the links have all been assigned different “tag classes” depending on their weight, making styling and fine tuning easy with CSS.

The code below goes into the style.css and assign as new font size and color to each tag weight (I’ve used Eric Meyer’s Color Blender to calculate the midpoints) in addition to collapsing the list and hiding the post count in paranthesis.


a.tag-smallest {
        font-size: 0.9em;
        color: #66A3E0;
}
a.tag-small {
        font-size: 1.1em;
        color: #448FD9;
}
a.tag-medium {
        font-size: 1.2em;
        color: #227AD3;
}
a.tag-large {
        font-size: 1.3em;
        color: #0066CC;
}
a.tag-largest {
        font-size: 1.4em;
        color: #0066BB;
}
.tag-freq {
        display: none;
}
.tag-cloud li {
        list-style-type: none;
        display: inline;
}
#sidebar ul ul.tag-cloud li:before {
        content: "";
}

Semanticaly speaking I decided to keep the list as an unordered list (well, it’s still sorted alphabeticaly) and just style it as a cloud. Removal of the styling will gracefully degrade the cloud back to a list with the number of posts in paranthesis.

Update: Since the tagcloud links to pages listing all posts for each tag/category, thus acting as “tag space” a place that collates or defines tags, we can then adopt the rel-tag microformat to indicate the tags relation and purpose.

In this post I just wanted to show a simple way to take advantage and “style” WordPress own category functionality. If you something more fancy, take a look at Christine Davis plugin Ultimate Tag Warrior.

This entry was posted in Tutorials and tagged , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

One Comment

  1. Posted September 1, 2007 at 02:58 | Permalink

    thanks for this good plugin

5 Trackbacks