All the Billion Other Moments

Download & Installation

Download here

Upload the wp-progpress folder into your wp-content/plugins folder and activate the plugin from the admin panel. You can then configure the plugin options under Plugins -> ProgPress

Usage

You add a progress meter by including the following in a post or in a text widget:

<!--progpress|MeterTitle|MeterGoal|CurrentCount|PreviousCount|CountLabel-->

or, if you want to use it directly in one of your template files (thanks to Scott Phillips for pointing out I forgot this):

<?php if (function_exists('jcp_progpress_generate_meter')){
echo jcp_progpress_generate_meter("MeterTitle", MeterGoal, CurrentCount,
PreviousCount,"CountLabel");
}?>

Only MeterTitle, MeterGoal, and CurrentCount are required. The other arguments can be left off.

For example:

<!--progpress|defaults|180000|73023|71398|words-->

will produce:

Customization

The appearance of the meters are controlled via css, and can be customized accordingly to allow them to better fit the feel of your site. By default, the following css is included when the plugin is activated:


div.jcp_pp { margin: 0 auto; padding: 0; text-align: center; width:200px; }
div.jcp_pp_title { font-weight: bold; }
div.jcp_pp_meter { overflow: hidden; width: 100%; height: 20px; border: 1px solid #000; padding: 2px; }
div.jcp_pp_meter div {height: 100%; float: left; background-color: #000;}
.widget_text div.jcp_pp { width: 90%; }


You can disable the default css from the options panel, or add additional rules to your own stylesheet. Here are a few examples illustrating what can be done.

Blue meters without padding

div.jcp_pp_meter { padding: 0; }
div.jcp_pp_prog { background-color: #22a; }
div.jcp_pp_new { background-color: #22f; }
<!--progpress|style Test|50000|48000-->

Blue meters with 3D borders

div.jcp_pp { width: 400px; }
div.jcp_pp_meter { padding: 0;height: 30px; border: inset 4px #aaa; background-color: #aaa; z-index: 1; overflow: visible; }
div.jcp_pp_prog, div.jcp_pp_new { border: outset 4px red; margin-left: -4px; margin-top: -4px; z-index: 2; background-color: #22a; border-color:#22a;}
div.jcp_pp_new { border-color:#22f; background-color: #22f; border-left: none; z-index: 3; }
<!--progpress|style Test Too|100000|70000|67000-->

Image based meter

div.jcp_pp_meter { padding: 0; height: 33px; background-image: url(pp_bg_remain.jpg); }
div.jcp_pp_prog,div.jcp_pp_new {background-image:url(pp_bg_current.jpg); }
<!--progpress|style Test Also|500|350||pages-->

Give it a Try

Try it out, and please rate it. If you have any problems or suggestions leave a comment. I’ll do my best to respond. Feel free to leave a tip if you find it helpful.