> **[An updated version of the plugin is now available](http://www.andydickinson.net/wp-content/uploads/2009/08/fancycatlist1.zip) with the links fixed**

I’m in the process of putting together websites for the students to use this coming academic year and one of the things I wanted to try was a beatblog similar to the Everyblock style of site. So I’ve been playing around with wordpress and various plugins to build a site that is organised by ward and displays stories on a map. The idea being that it gets students playing with tags, geotags etc as well as helping them see how this kind of thing can be helpful for finding stories within their community (a skill much desired by the industry)

I’ll post more about my thinking and the practical process of the site as it beds in. But in the process of putting the site together I had a go at building a plugin (extra functionality for wordpress) which I thought I would share.

I’m a fan of the layout of Everyblock. It’s a great design. I particullay like the way they display the number of posts as a percentage of the total in a section with a neat bar graph kind of thing. It’s a quick way to pick out busy sections.

[![A visual guide to popular sections](https://i2.wp.com/www.andydickinson.net/wp-content/uploads/2009/08/boston-business-licenses-everyblock-boston-499x280.jpg?resize=499%2C280 "boston-business-licenses-everyblock-boston")](https://i0.wp.com/www.andydickinson.net/wp-content/uploads/2009/08/boston-business-licenses-everyblock-boston.jpg)
A visual guide to popular sections from everyblock
So I thought *‘I’d like a bit of that kind of thing on the beatblog’. *

With a bit of digging around I found a great tutorial by Wilson Miner, designer and co-founder of EveryBlock, on how those lists where made using CSS and ordinary html lists. Worth a look.

Having got it working within WordPress (a good deal of template bashing later) I thought it would be a perfect snippet to try and make in to a widget so that I didn’t need to hard code it in to the pages. Which, thanks to a great tutorial by Tim Trott on how to make wordpress widgets, I have done.

[![The fancy category list widget](https://i1.wp.com/www.andydickinson.net/wp-content/uploads/2009/08/widgets-e280b9-prestonbeat-e28094-wordpress-1-254x300.jpg?resize=254%2C300 "widgets-e280b9-prestonbeat-e28094-wordpress-1")](https://i2.wp.com/www.andydickinson.net/wp-content/uploads/2009/08/widgets-e280b9-prestonbeat-e28094-wordpress-1.jpg)
The fancy category list widget
And in the spirit of these things,  here it is for you to try if you want to**.**

You can see it in action here (warning:this site is under development so don’t be alarmed if it looks odd)

How to install

The file contains a folder called fancycatlist. Put the whole folder and its contents to the plugin directory of your wordpress isntall and then activate the plugin in your wordpress back-end.

The folder contains two files. The actual plugin file (fancycatlist.php) and the style sheet that does most of the layout work for the list (fancycatlist.css). If you want to make major changes to the look and feel it’s the css file you want to be tweaking

Once it is installed you’ll find that you have a new widget called Fancy category list.  It’s meant to be used in the sidebar.


The widget has a number of settings

  • List title: This appears above the list in the Leave it blank and nothing is displayed.
  • **Parent category ID: **This restricts the list to show the categories in a parent category. So in my install I have all the ward categories under a parent category called Wards. Leaving this blank will list all the categories on the site that have a post assigned. Empty categories don’t show up.
  • **Style information: **These boxes allow you to customise some of the look and feel. You can change the colour of the category text, the bar behind , the number of posts and the roll-over colour.

Pretty straightforward I think.

The result is something like this

[![The fancy Category list](https://i2.wp.com/www.andydickinson.net/wp-content/uploads/2009/08/prestonbeat-1.jpg?resize=340%2C255 "prestonbeat-1")](https://i2.wp.com/www.andydickinson.net/wp-content/uploads/2009/08/prestonbeat-1.jpg)
The fancy Category list
**How it works**

The plugin works by counting the number of posts published on your blog and then working out what percentage each category accounts for to generate the bar.  It then generates a standard list of the results and applies the CSS required to make it look nice. So the truth is that its not entirely accurate to the section (especially if you use the parent setting) but I needed a ‘grand total number’ to work with.

What’s next

To be honest probably nothing. If I was to take it any further it would probably be to give the option of it displaying little sparkline style graphs. It could also do with setting up so that you could have multiple instances of the list and a few more settings. I’m also sure that the CSS would have some proper hackers spinning on their chairs. But it works for me and it looks not-to-bad on most installs.

If you get some use out of it or change it, let me know. It may not say it in the files but the stuff is there for you to do with what you will. If you make millions off of it then rememeber me in your will.

*Notes etc: *

*Notice I said ” can be helpful” when talking about using the web to help cover communities. I don’t think it’s a replacement. No one in their right mind does. So please don’t hassle me about killing traditional reporting. *

If enough people are interested I can write a post about how I made the actual plugin. But I have to say that everything I learned came from Tim’s post.