ProgPress: A progress meter plugin for WordPress

Download & Installation

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:

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:

defaults

73023/180000 words

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

style Test

48000/50000

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

style Test Too

70000/100000

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

style Test Also

350/500 pages