Just a small note first. I have created the iMac fund you can see in the sidebar. A lot of people have been asking me if I planned to develop iPhone/iPod apps after my post about it and the answer was yes, until I realized I needed a Mac, as the SDK is limited only to Mac’s running Snow Leopard (unless you have a Hackintosh). So because my computer becoming a Hackintosh is a now go (due to incompatible hardware) I have decided to start a fund. I will try and add money to it myself whenever I can, but unfortunately I barely get enough money to keep this site up & survive so I’m relying on you guys & gals being generous. I know it’s a bit cheeky, but it’s the only way I’m ever going to afford a Mac. A huge thank you to anyone who donates.

A Donation Meter?

Anyway onwards & upwards. I noticed a few people asking on the WordPress forums if a donation meter could be added to the Donate Plus plugin. Well I’m going to show how to make one yourself using Donate Plus. I hope the author of the plugin doesn’t mind. ;)

First what is a Donation Meter? Well it is like the bar in my sidebar, it shows the progress towards your goal in a nice visual format. This is handy because it allows visitors to see how close you are to your goal at a glance.

Donate Plus

Donate Plus has a very handy piece of shortcode that gives you the amount you have received in total. To make a donation meter you need three things, your target, your current total & the maximum percentage. Obviously the maximum percentage is 100%. Place the code where ever you would like your donation bar to appear.

Let’s get started with some code. Shortcodes are generally used in posts, but using do_shortcode(); they can be used in templated too. The best thing about that is that the information from the parsed shortcode is returned to a variable & can therefore be manipulated, ideal for what we are about to do. Here is the basic PHP to get a donation meter, we’ll add the HTML shortly.

    $target = 1200;
    $total = do_shortcode("[ donatetotal prefix='0' suffix='0' type='0' ]"); //remove the spaces...
    $total = intval($total);
    //Add any fund additions here
    if($total != 0) {
      $percent = ($total / $target) * 100;
      $fill = round((132 / 100) * $percent);
    } else {
      $percent = 0;
      $fill = 0;
    }

Let’s go through the code a little. First we set a target amount, this is obviously the amount you want to raise. Next we get our current total amount donated using the shortcode provided by Donate Plus. Prefix, Suffix & type are to stop Donate Plus from adding any currency symbols to the returned amount. We then convert the total to a integer, it’s generally a good rule to convert numeric values to integers before doing any mathematical calculations to them. If you have any funds of your own to add to your donations, such as money already in your PayPal account, you can add it here just by writing $total = $total + //amount here.

Next we check if the total is 0. If it is we can’t do any divisions to it. Why? Well apart from a black hole being formed, it will cause PHP to throw a division by zero error. I have used a if not zero so you could just leave out the else, but I’ve added it for the sake of it. If the value is not 0 we can do our calculations. We get our percentage, by dividing our $total by our $target & multiplying it by 100 (the max percent). Now to make our colored bar that fills we need to figure out the width based on the total donations. That is done with this sum round(($width /100) * $percent). $width is the width of your bar when filled (mine is 132).

HTML & CSS

Now we can move on to our HTML & CSS. This is just my version. You can probably do anything you like and the math PHP code would still be the same as above for a bar anyway. Here is my code, first HTML:

<div class="outer_bar">
  <div class="total_display">£<?php echo $total; ?> / £<?php echo $target; ?></div>
    <div class="inner_bar" style="width:<?php echo $fill; ?>px;"></div>
</div>

Now the CSS:

.outer_bar {
  height:20px;
  width:132px;
  border:1px solid black;
  position:relative;
  margin-left:150px;
  margin-top:84px;
}
.total_display {
  position:absolute;
  top:12%;
  left:29%;
  height:20px;
  width:132px;
  color:#999;
}
.inner_bar {
  height:20px;
  background:#444;
}

As you may have noticed the inner bar has a hardcoded style. This is the only way to increase the width of the bar & is perfectly valid (as far as I’m aware). The HTML & CSS are pretty easy to understand & can easily be customised. I guess the only thing of note is the positioning of the text. It is floated over the bar by setting the position of the outer bar to relative & the text to absolute. This then makes the text position absolutely, but relatively to the outer box… Confusing I know, but the important thing is that it seems to work well in IE.

Anyway I hope that helps some of your, even if you aren’t creating a donate meter with Donate Plus, it still shows how to create a dynamic bar that fills based on a percentage of a value. ;) I was planning on trying to create a circular one meter, but CSS can’t seem to do that so I’m not sure if it’s possible. Won’t stop me from trying though. :) Enjoy, good luck, and if you’ve any questions leave them in the comments.