Creating A Donation Meter With Donate Plus

February 1, 2010 / Wordpress / by Paul Robinson / 31 Comments

This post was published back on February 1, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

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;
    }

$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>

</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;
}

.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.

Donate Plus Donation Meter Wordpress

Paul Robinson

WordPress plugin & theme developer, user of Laravel and learner of React.js. Can usually be found listening to Japanese, and Korean Pop or Vocaloid music while developing.

31 Comments

Hi Paul,

first of all, Brilliant work! I’ve been trying to find something like this that will hook into an already functioning paypal system.

So my question is, just where do I put these sections of code? I would like to have my donation meter sitting in the side bar, but where about do I put these exerpts of code?

Thanks.
William

author

Yep, that’s a bit of a cock-up isn’t it. 😆

You just put the code where ever you would like the donation bar to appear. Also the do_shortcode('69'); should say do_shortcode("[donatetotal prefix='0' suffix='0' type='0']"); I’ll change it now.

I’ve no idea what I was doing when I wrote that… What in Dante’s 7th circle of hell has 69 got to do with shortcode. Sorry about the mistakes & I hope that helps clear up where to put the code.

Thanks for that Paul.

So I can just stick the PHP into the sidebar.php code? What about the HTML? I realize that the .css will be its own file.

Sorry for all the questions, Still new to the whole coding world.

author

The CSS goes in your style file, as you said, the HTML goes in the exact location you want your donation bar to appear (in your case sidebar.php) and the PHP can go anywhere on the same file as long as it is before the HTML code.

No problems, we all have to start somewhere. 😉

I cant get this working, how do i add the PHP code, when i copy and paste above the html code it does not work.?

please help.

author

Hey there.

Sorry for not getting back to you sooner, I’ve been really busy (hence there not being many updates to the blog).

The HTML is just for styling, without the PHP it won’t work. You need to put the PHP just above the HTML.

Hi Paul

I added the php code above the HTML as below:

$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;
}

£ / £

but its not working

author

$total = do_shortcode("[ donatetotal prefix='0' suffix='0'  type='0' ]"); //remove the spaces…

1	$total = do_shortcode("[ donatetotal prefix='0' suffix='0' type='0' ]"); //remove the spaces…

You haven’t removed the spaces as said in the comment. It should be:

$total = do_shortcode("[donatetotal prefix='0' suffix='0'  type='0']"); //remove the spaces…

1	$total = do_shortcode("[donatetotal prefix='0' suffix='0' type='0']"); //remove the spaces…

HI Paul

Sorry for the trouble, this is exactly my code and nothing appears on the website:

$target = 1200;
$total = do_shortcode(“[donatetotal prefix=’0′ suffix=’0′ type=’0′]”);
$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;
}

£ / £
<div class="inner_bar" style="width:px;”>

author

Can you put the code between

tags. If you don’t WP will strip the code or break it (as it has done). Remember to take the spaces out.

Yes i have done that, it doesnt display, i have added

and

and

around the PHP section of the code. still nothing appears on my website.

author

Not around the code on your website, the code that you paste in here. If you don’t I won’t be able to see what is going wrong as WordPress strips code that looks like PHP.

sorry here it is….

 $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;
 }



<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>

$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;

}

</div>

author

You’ve missed your PHP tags out. I can’t put them in as WordPress doesn’t like them, and I kind of assume you’ll know to put them in.

The code should be in:

<? php
code is here
?>

<? php

code is here

Take out the space from between the ? and the php.

im getting the following error now:

Fatal error: Call to undefined function do_shortcode()

<? php
 $target = 1200;
 $total = do_shortcode("[donatetotal prefix='0' suffix='0' type='0']"); 
 $total = intval($total);



 //Add any fund additions here

 if($total != 50) {
   $percent = ($total / $target) * 100;
   $fill = round((132 / 100) * $percent);
 } else {
   $percent = 0;
   $fill = 0;
 }
?>


<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>

<? php

$target = 1200;

$total = do_shortcode("[donatetotal prefix='0' suffix='0' type='0']");

$total = intval($total);

//Add any fund additions here

if($total != 50) {

$percent = ($total / $target) * 100;

$fill = round((132 / 100) * $percent);

} else {

$percent = 0;

$fill = 0;

}

</div>

author

That means the function do_shortcode() has not been defined.

Since it is a primary WordPress function I can only think that you are either running an exceptionally old version of WordPress that doesn’t have shortcode support, or you aren’t running WordPress?

This tutorial is designed for Donate Plus which is a plugin for the blogging application WordPress.

ok i was trying to add this to my html website.

Hi Paul, I am in Mexico working on a project and campaigning for funding. Congrats on putting this together it is a terrific code and if I can get it to work it will perfectly solve my needs. Upfront I am a new to code so please bear with me. I have entered the following into my sidebar.php file:

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

<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>

<?php

$target = 3000;

$total = do_shortcode("[donatetotal prefix='0' suffix='0' type='0']"); //remove the spaces...

$total = intval($total);

$total = $total + 230 //Add any fund additions here

if($total != 0) {

$percent = ($total / $target) * 100;

$fill = round((132 / 100) * $percent);

} else {

$percent = 0;

$fill = 0;

}

</div>

And am receiving this warning on my site:
Parse error: syntax error, unexpected T_IF in /home/***/***/wp-content/themes/themes/paragrams/sidebar.php on line 9

From what I can add up line 9 is this one: if($total != 0) {

As I mentioned I am in the middle of funding campaign so any assistance provided ASAP would be GREATLY appreciated!!!

author

I have replied to the email you sent me, but for reference the error is on line 5 of the code (line 8 on your site) and is caused by the semi colon being missing from the end of the line.

How do I go about adding in “,” commas for $1,000 instead of having $1000 ? Any ideas?

author

Hi Marc,

Thankfully PHP has a built in method for that. Simply hand the number to the number_format() function like:

echo number_format($total);

1	echo number_format($total);

That should work. 🙂

Your code works out of the box as far as I can tell. Thank you for this simple add-on 🙂
I will let you know if I run into any trouble.

Now that “ChipIn” is closing it looks like your code will let me do what I need to come up with something that looks and functions like the “ChipIn” widget

Here is a sample of my code that I added to donate-plus/donate-plus.php starting at line 408

Php code
$donationtarget = 1000; $donationtotal = do_shortcode("[donatetotal prefix='0' suffix='0' type='0']"); //remove the spaces $donationtotal = intval($total); //Add any fund additions here if($donationtotal != 0) { $percent = ($donationtotal / $donationtarget) * 100; $donationfill = round((180 / 100) * $percent); } else { $percent = 0; $donationfill = 0; }


				$output .='

			Sample Project
Raised $'.$donationtotal.'

Goal $'.$donationtarget.'

Your Donation Amount:('.__('Currency: ','dplus').$cur.')';

Css
.donation_text_container { width:180px; } #donation_raised { display:inline; } #donation_goal { float:right; } .donation_outer_bar { height:20px; width:180px; border:1px solid black; } .donation_total_display { position:relative; left:30%; height:20px; width:180px; color:#999; } .donation_inner_bar { height:20px; background:#444; }

This way the goal is stated then the user can type in there amount and hit the donate button.

During testing tho the total amount is not showing any data. I went in using PHPMyAdmin and added a line directly to the DB. Still the total will not reflect the update? Any idea how I can manually add donations to the DB and have them correctly tallied to the sites total?

I also tested with the built in Donation Plus widget and still got a $0 instead of the correct data?

Thank you in advance for any advice.

author

Hi Alex,

This is a really old post & I don’t use Donate Plus any more so sadly I can’t provide much support for it. Also the Donate Plus plugin looks to not have been updated in over a year.

If you still want to work with the plugin my only advice would be to open up the plugin & see if you can trace back the part that returns the total & see if you are able to find why it returns 0.

Sorry I’m not able to help further.

Alex, what was your simple spelling that you found to make it work?

author

Hi Tony,

I’d love to know myself as I can’t find any errors in the code. Maybe a spelling problem in the shortcode? I haven’t used DonatePlus for ages so don’t know if the shortcode has changed.

Thank you Paul for your response. I was able to find my problem (a one letter spelling mistake) lol. Everythings working like a charm now.

author

Ahh, no worries then. Glad you managed to fix the problem. 🙂

Older Comments

Newer Comments

A Donation Meter?

Donate Plus

HTML & CSS

Follow Me

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.