jump to content

Category Clouds WordPress widget

Tag clouds are an effective way of conveying information about the popularity of key words where the size of the word corresponds to the importance of the word. It is also visually more interesting than a standard list and attracts attention.

On Super Fun Days Out we needed something similar to WordPress’s built in tag cloud using categories instead of tags. Fortunately WordPress has an active plugin community and developer Lee Kelleher had already written a Category Cloud widget. A couple of changes were needed to update it for multiple sidebars and to include or exclude specific categories.

Now hosted at WordPress.org at http://wordpress.org/extend/plugins/category-clouds-widget/stats/.

How to use

  1. Download Category Clouds and unzip
  2. Upload category_clouds folder to the /wp-content/plugins/ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress
  4. Add the widget to your sidebar through the ‘Appearance > Widgets’ menu

Widget options

Category Clouds plugin widget page

Title

This is the usual widget title that will appear in your theme’s sidebar.

Category font size

The minimum and maximum font sizes you want the cloud to show and their unit of measurement. For example, min: 50 max: 200 unit: % would show the smallest category at half your normal text size and the largest at double.

Order by

Choose between ordering by number of posts in a category, or alphabetically by category name.

Show by

Either the category with the most posts first or the category with the fewest posts first if using Order by: count, or A-Z or Z-A if Order by: name.

Minimum number of posts

Categories where the total number of posts is less than this number will not be shown. Set to 1 to hide empty categories.

Comma separated category IDs

If you only want to include specific categories, enter their IDs in a list. If you want to exclude a category, enter its ID as a negative number. Leave blank for all categories.

Example: 1,4,9,36,37,38
This will create a category cloud with only categories 1,4,9,36,37,38 in it.

Example: -1,-3
This will create a category cloud hiding categories 1 and 3.

Code breakdown

This section isn’t required to use Category Clouds, but discusses how it works.

The plugin comprises three main sections: using the widget class, getting the data from the database, and setting the font size.

Using the WP_Widget class

Category Clouds extends the WP_Widget widget class which already has the plumbing to work with multiple sidebars, display configuration options and save those options to the database. Justin Tadlock has a useful introduction guide on how to develop a basic widget using WordPress 2.8+.

Getting the data from the database

All the heavy lifting for database access for this widget is by using the WordPress query get_categories, which means most of the work is performed on the database server, not on the PHP server. This accepts a number of parameters and returns a collection of categories. Category Clouds conditionally builds the query parameters based on the saved options:

  1. <?php
  2. // build query
  3. $query = 'show_option_all=1&style=cloud&show_count=1&use_desc_for_title=0&hierarchical=0';
  4. $query .= '&order=' . $instance['order'];
  5. $query .= '&orderby=' . $instance['orderby'];
  6. if($instance['min_count'] > 0) { $query .= '&hide_empty=1';}
  7. ?>

Specific categories to include or exclude are added to the query as needed by checking the saved comma separated list of ID numbers:

  1. <?php
  2. // specified categories
  3. $inc_cats = array(); $exc_cats = array();
  4. foreach (explode("," ,$instance['cats_inc_exc']) as $spec_cat) {
  5.   if ($spec_cat < 0) { $exc_cats[] = abs($spec_cat); }
  6.   elseif ( $spec_cat > 0) { $inc_cats[] = abs($spec_cat); }
  7. }
  8. if(count($inc_cats) > 0) { $query .= '&include=' . implode(",", $inc_cats); }
  9. if(count($exc_cats) > 0) { $query .= '&exclude=' . implode(",", $exc_cats); }
  10. ?>

Finally, each category is checked to make sure it has the required number of posts:

  1. <?php
  2. // ensure minimum post count
  3. $cats = get_categories($query);
  4. foreach ($cats as $cat) {
  5.   $catlink = get_category_link( $cat->cat_ID );
  6.   $catname = $cat->cat_name;
  7.   $count = $cat->category_count;
  8.   if ($count >= $instance['min_count'])  {
  9.     $counts{$catname} = $count;
  10.     $catlinks{$catname} = $catlink;
  11.   }
  12. }
  13. ?>

Outputting the cloud

  1. <?php
  2. // font size calculation
  3. $spread = max($counts) - min($counts);
  4. if ($spread <= 0) { $spread = 1; };
  5. $fontspread = $instance['max_size'] - $instance['min_size'];
  6. $fontstep = $spread / $fontspread;
  7. if ($fontspread <= 0) { $fontspread = 1; }
  8.  
  9. echo '<p class="catcloud">';
  10.  
  11. foreach ($counts as $catname => $count) {
  12.   $catlink = $catlinks{$catname};
  13.   echo "\n<a href=\"$catlink\" title=\"view $count posts for $catname\" style=\"font-size:".
  14.     ($instance['min_size'] + ceil($count/$fontstep)).$instance['unit']."\">$catname</a> ";
  15. }
  16.  
  17. echo '</p>' . $after_widget;
  18. ?>

Tags:
Posted in Technical | 4 Comments »

Four responses to Category Clouds WordPress widget

  1. Jackie says:
    June 4, 2010 at 9:17 pm

    How do I change the font color for this cloud?

    Thanks,
    Jackie

  2. Hugh says:
    June 6, 2010 at 10:08 am

    You’ll need to do that in your theme’s CSS file. At the very bottom of /wp-content/themes/your-theme/style.css add this style:

    .catcloud a { color: green;}

  3. Oxana says:
    July 27, 2010 at 10:44 am

    Hi,

    it doesn´t work with wordpress 3.0. Can you fix it?

    Best regards
    Oxana

  4. Hugh says:
    July 31, 2010 at 8:43 pm

    Can you tell me more details about any error messages? I use the plugin successfully on SuperFunDaysOut.com and it’s currently running WordPress 3.01.

Any feedback or ideas for improvement?