The original plugin is already configurable allowing you to modify the colours used in the graph so that it matches that of your site. That’s all very nice, but I wanted to add something more graphical to the display. This is actually a very simple modification to the plugin. Using the PHP Image functions it was possible to achieve this affect with just 20 extra lines of code.
I would have left it at that, but it occurred to me that this was a potentially useful mod for people such as yourself. So, in the spirit of old fashioned goodness I’ve made it available for download for you to add to your own site.
Once you’ve got that, you’ll need to know how to set it up. The original plugin doesn’t come with any installation instructions, so here’s some help in getting it running.
The .zip file contains 4 files:
the plugin file, copy this to your /wp-content/plugins/ directory
the image file, an example of the output, copy this to /wp-images/ and make world-writeable (chmod 666)
the icon to overlay the image with for each post, put it in /wp-images/
the post-icon used on this page, just for fun
Once you’ve copied the files to the specified directories you’ll need to log into the WordPress admin area & activate the plugin.
Now you need to choose somewhere to put the produced graph on your website. I’d recommend somewhere in the footer file (/wp-content/themes/default/footer.php) e.g.
<img xsrc="/wp-images/blogtimes.png" mce_src="/wp-images/blogtimes.png" alt="blogtimes"/>
And, jobs a good ‘un. Note the image won’t display the real state of your posting until you make your first post. However, you can force it to refresh by uncommenting the bottom line in blogtimes.php as follows:
#add_action('wp_head', 'updateBlogTimePNG'); into..
Which refreshes the image on page reload rather than each post.
Note: this is a bad idea for a running site – it’ll slow down the page reload quite a bit. Just do this when you’re setting up / changing the image icon so you don’t have to keep making fake posts to check the results. Once finished, comment the line again (put the # back).
If you want to change the icon to something a little bit more interesting, there are a few things to remember.
First up, it needs to be the right dimensions (20×65 pixels). The easiest way to do this is to use one of the existing images and modify it, then you will also be able to vertically align the image correctly so it sits on the graph correctly.
Once you’ve created your masterpiece just make sure to save it in PNG format, indexed/palette based and with single-colour transparency. Save it with the blogtimes_icon.png filename, upload it into place and add a post. Your new icon should now appear.