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:
<!--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.
16 Comments
Leave a Reply
Entries,%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D84549293.-%3B)
![[RSS: Posts]](http://jasonpenney.net/wp-includes/images/rss.png)
![[E-Mail: Postsl]](http://jasonpenney.net/wp-content/images/email-icon-16x16.png){kind=icon}
Amphigorey Again
Peter Pan
E. C. Segar’s Popeye Vol. 2: Well Blow Me Down!
E. C. Segar’s Popeye Vol. 1: I Yam What I Yam
Living Dead in Dallas (Southern Vampire Mysteries, Book 2)
![[twitter]](http://jasonpenney.net/wp-content/images/icons/twitter-favicon.png "[twitter]"){kind=icon}
Just finished something I thought was going to take half the day in about 15 minutes. Whoo hoo!
[...] thanks to Jason Penney’s wonderful plugin, ProgPress for providing the [...]
Love your plugin, Jason! I tried making a Paypal donation via your Wordpress plugin page, but got an error message. :-(
@Debbie Ohi – Yikes! Thanks so much for pointing that out. Not sure why that stopped working, but it should be all set now.
Any chance you could do one for blogger? I love what you’ve done here!
[...] directly, but are seeing it some other way, I’m testing an update to my ProgPress plug-in that should make the progress meter show up at the top of this post. I know it works in Google [...]
Hi Jason,
I tried to activate the plugin and got an error message in Wordpress:
“Plugin could not be activated because it triggered a fatal error.
Parse error: syntax error, unexpected ‘{’ in wp-content/plugins/progpress/wp-progpress.php on line 114 ”
I’m running Wordpress v2.8. Is this error due to a problem with one of the settings on my server?
Thanks in advance for your help!
@Lia Keyes – I wish I could, but I’d have no idea where to begin.
@Kristen – Is your hosting provider running php4? I’m not sure I ever tested ProgPress on php4, but looking at it now I think it might not work. I think I need to make a few other adjustments for WP 2.8.1+, so I’ll see what I can do about fixing your issue at the same time.
Hi Jason,
In the server specs, it says my host is running PHP 4.4.9. It also said “You can enable PHP 5.2.5 as CGI binary using FastCGI”. I tried enabling PHP 5.2.5 and was able to activate the ProgPress plugin but unfortunately the switch caused other problems, like not even being able to login to Wordpress at all through Firefox and not being able to perform some of the other functions in Wordpress through IE 7 either. So it looks like the problem is due to the PHP version my host is running.
[...] updated my ProgPress Plug-in. This version should (hopefully) solve the issue with php4 that recently came to light. It [...]
@Kristen – Please try the newest version. It should clear up the issue.
Hello!
Where do I edit the css for the plugin? I want to do some custom css, but when I added the css lines above to my theme style sheet, the progress meter didn’t change at all?
Thanks!
Luke
Adding it to your theme’s site style sheet is the way to go. If you have a link I’d be glad to take a look.
Here is a link to the site: http://santaclarachurch.com/youth/
Here is a link to the style sheet: http://santaclarachurch.com/youth/wp-content/themes/church_40/style.css
I added some text from this page at the very bottom of the style sheet.
Thanks again for making the plugin, and being willing to help with it!
Aha!
You’re theme’s style sheet is being included before the ProgPress styles, meaning they override your custom styles. Hmm…
The easiest fix would probably be:
* Go to the ProgPress Options Page
* Click ‘View Default Styles’
* Copy the styles shown, paste them into your theme’s style sheet before your customizations
* uncheck ‘Use build-in styles’
* click ‘Save Changes’
[...] ProgPress is an awesome tool for us you like to see our progress in visual detail. Nicely done Jason Penny. So, ignore the post below with the other Progmeter in it…that will be the last [...]
Hello, sailor! I love what you’ve done here — it’s the most straightforward and easy-to-use progress bar plugin for WP out there. I even hacked it a bit to display percents the way that I like (number %, instead of 5/100 %). It wasn’t anything difficult, but I can send you the code if you like.