Category Clouds WordPress widget
- Updated March 24th, 2010 in Technical
- Add a comment
- 14 comments
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/.
- Download widget3k zip file
- View source8k text file of PHP
New in version 2!
Added [categoryclouds] shortcode to use the category cloud on a post or page.
How to use
- From the Administration Panels in your WordPress site, click on the Plugin tab
- Search for Category Clouds Widget
- Activate the plugin
- Add the widget to your sidebar through the Appearance > Widgets menu
Shortcode examples
[categoryclouds][categoryclouds order="DESC"][categoryclouds min_size="8" max_size="24" unit="px"]
Widget options
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:
[codesyntax lang="php"]
<?php
// build query
$query = 'show_option_all=1&style=cloud&show_count=1&use_desc_for_title=0&hierarchical=0';
$query .= '&order=' . $instance['order'];
$query .= '&orderby=' . $instance['orderby'];
if($instance['min_count'] > 0) { $query .= '&hide_empty=1';}
?>
[/codesyntax]
Specific categories to include or exclude are added to the query as needed by checking the saved comma separated list of ID numbers:
[codesyntax lang="php"]
<?php
// specified categories
$inc_cats = array(); $exc_cats = array();
foreach (explode("," ,$instance['cats_inc_exc']) as $spec_cat) {
if ($spec_cat < 0) { $exc_cats[] = abs($spec_cat); }
elseif ( $spec_cat > 0) { $inc_cats[] = abs($spec_cat); }
}
if(count($inc_cats) > 0) { $query .= '&include=' . implode(",", $inc_cats); }
if(count($exc_cats) > 0) { $query .= '&exclude=' . implode(",", $exc_cats); }
?>
[/codesyntax]
Finally, each category is checked to make sure it has the required number of posts:
[codesyntax lang="php"]
<?php
// ensure minimum post count
$cats = get_categories($query);
foreach ($cats as $cat) {
$catlink = get_category_link( $cat->cat_ID );
$catname = $cat->cat_name;
$count = $cat->category_count;
if ($count >= $instance['min_count']) {
$counts{$catname} = $count;
$catlinks{$catname} = $catlink;
}
}
?>
[/codesyntax]
Outputting the cloud
[codesyntax lang="php"]
<?php
// font size calculation
$spread = max($counts) - min($counts);
if ($spread <= 0) { $spread = 1; };
$fontspread = $instance['max_size'] - $instance['min_size'];
$fontstep = $spread / $fontspread;
if ($fontspread <= 0) { $fontspread = 1; }
echo '<p class="catcloud">';
foreach ($counts as $catname => $count) {
$catlink = $catlinks{$catname};
echo "n<a href="$catlink" title="view $count posts for $catname" style="font-size:".
($instance['min_size'] + ceil($count/$fontstep)).$instance['unit']."">$catname</a> ";
}
echo '</p>' . $after_widget;
?>
[/codesyntax]