Pledge Drive

Referring back to the previous article, you might ask how are snippets used in Pledge Drive 2? You simply paste the snippet inside a Pledge Drive 2 Progress Meter widget as in the picture below (click to enlarge). Go to the WordPress Admin “Presentation” menu and select the “Widgets” tab.

What if you don’t use WordPress sidebar widgets? No problem, we still have you covered. Just paste your snippet into the Admin Options Pledge Drive form (or edit the default Schlomo Simpleton mentioned above) and insert the following PHP code anywhere in your theme’s template files (most likely in your own “sidebars” or, perhaps, a header). This will output your snippet, after the Pledge Drive plugin replaces all the variables in you snippet with their current values based on your supporters donations and subscriptions.

<?php print pd2_progress_meter() ?>

Our original progress meter example used a template that was pure CSS colors. The new one (in the sidebar currently), uses two small gifs as CSS background images instead of background colors. I really like the improved look and it was a minor change to the snippet used to create the meter. Alicia is creating some even more fun graphics and snippets (she inspired me to post this example so she and other could start building from it. Below is the snippet for the new one.

Eventually, I would like to establish a gallery or garden of snippets that people can choose from. In that case, we will have to name each one so that they can be listed in drop-down, combo boxes (I like saying that). I’d like to christen the first one with a classic name and for a classic vlogger. This is the “Schlomo Simpleton” (sans the example descriptive text below the meter).

<style>
.pd2_progress {font-family: arial;
  font-size: 12pt;
  font-weight: bold;
  margin: 5px 20px 0 0;
  padding: 10px;
  text-align: center;
  width: 50px;
  color: white;
  background-color: #c7c9f3;
  border: thick solid #9d9fca;}
.money, .percentage, .contributions {padding: 3px;}
.meter {height: 200px;}
.money:before {content: "$";}
.percentage:after {content: "%";}
.contributions:after {content: " gifts";}
.remaining {min-height: %percentremaining%%;
  background:
    url(/wp-content/plugins/pledgedrive2/images/blue_v.gif);}
.achived {min-height: %percentraised%%;
  background:
    url(/wp-content/plugins/pledgedrive2/images/green_v.gif);}
</style>
<center>
<div class="pd2_progress">
  <div class="money">%goal%</div>
  <div class="meter">
    <div class="remaining">&nbsp;</div>
    <div class="achieved">&nbsp;</div>
  </div>
  <div class="percentage">%percentraised%</div>
  <div class="money">%amountraised%</div>
  <div class="contributions">%contributions%</div>
</div>
</center>

Rules for customizing snippets:

• Change anything except the names of the %variables%.
• It’s ok to use the %variables% in both HTML content and CSS styles.
• Ok to move CSS to your own stylesheet as long as it has no %variables% in it.
• %variables% are only replaced in snippets inside Pledge Drive 2 Progress Meter widgets.

Thanks to tipClique Counter Bar (GPL) for the background graphics.