ProgPress: A progress meter plugin for WordPress

Please use the support forum if you need assistance.

Current Version

1.2.2

Requires

2.2

Compatible up to

4.6.21

Download

progpress.1.2.2.zip

Downloads

Links

Description

ProgPress provides a simple
shortcode for creating
progress meters on your WordPress site. They can be used to track
just about anything where you count up towards a goal: word-count,
fundraising, etc. You can put them in individual posts and pages, or
include them in text widgets.

To insert a meter simply use the [progpress] shortcode:

[progpress title="My Project" goal="100000" current="1234"]

The [progpress] shortcode has the following options:

Required:
- title: A string containing The title for your meter.
- goal: A number. The one you are working towards.
- current: A number showing how far along you are.
Optional:
- previous: You can put your previous value of current here
  if you want to highlight your most recent progress update. It’s
  not visible using the default styling (but it doesn’t hurt
  anything).
- label: What it is that you’re counting, like "words" for
  example.
- separator: A character or string to display between
  current and goal. Defaults to "/".
- class: An extra CSS class to apply to the meter container.
  Useful if you track different projects with different styles.
- prefix: A character or string to display before each number
  (like ‘$’). Off by default.

ProgPress was designed to be customizable via CSS. I’ve provided
some examples in the Screenshots section.

NaNoWriMo Support

If you are participating in NaNoWriMo, ProgPress can automatically
track your progress. Just enable the additional ProgPress –
NaNoWriMo Support plugin (in addition to ProgPress), and set the
nanowrimo attribute to your NaNoWriMo username (this is a change
from last year where your user id was used).

[progpress title="My NaNoWriMo Progress" nanowrimo="jczorkmid" label="words"]

So as to not overload their servers, the plugin caches your word count
info, so it may not update immediately when you update your word count
at nanowrimo.org.

Note that as of November 10, 2011 the NaNoWriMo Word Count API is
not yet officially released. At times it seems to return invalid
errors saying your user doesn’t exist, or you don’t have a novel in
progress this year. In my testing this clears itself up after a bit,
and once some data has been loaded WordPress will cache it rather than
continue to display errors if it keeps going up and down.

More Info

Check out my other WordPress
plugins.
Check out this excellent ProgPress Setup & Customization
Guide
for some additional CSS examples.

Thanks

Special thanks to Kris Johnson,
K. L. Kerr, Chris
Miller, Debbie Ohi,
and Scott Philips for their feedback and
support.

Installation

Extract the zip file and just drop the contents in the
wp-content/plugins/ directory of your WordPress installation and then
activate the Plugin from Plugins page.

You can configure the options from the settings page.

FAQ

Q. I’m seeing the shortcode source when I try and use it in a text widget.
A. As of this writing WordPress does not support shortcodes in text
widgets. ProgPress has the ability to enable all shortcodes in
text widgets (not just [progpress]), but it is turned off by
default. It can be enabled on the ProgPress settings page.
The code is based on a proposed patch to WordPress core. Hopefully
this feature is added to WordPress itself at some later date. I’ve
tried to code defensively so if the feature is added to WordPress in
the future, having it enabled in the plugin should not have any negative
side effects.

Q. What are the default styles? What does the markup look like?
A. Please check out the Examples section on the settings page. It
will generate markup and display the default styles for the currently
installed version of ProgPress when you click “Load Examples”. I’ve
done this rather than put a static copy here that I might forget to
update in future.

Q. What’s all this about shortcodes? I’ve been using ProgPress in a different way for ages!
A. Since ProgPress pre-dates shortcodes being added to WordPress it
originally used an older syntax based on HTML comments. This syntax is
still supported (although newer features like label have not been
back-ported). It can be enabled on the ProgPress settings page.
You add a progress meter by including the following in a post or in a
text widget:

<!--progpress|title|goal|current|previous|label-->

Only these five options are supported, only the first three are
required.

Q. Besides shortcodes and HTML comments, is there any other way I can use ProgPress to generate meters?
A. Sure. You can call the jcp_progpress_generate_meter function
directly.

<?php if (function_exists('jcp_progpress_generate_meter')){  
       echo jcp_progpress_generate_meter("title", 100, 50, 25, "label");
}?>

The arguments to the function are:
title, goal, current, previous, label, separator, class,
and prefix (in that order).

Q. How will the meter show up in my RSS feeds?
A. Inline styles (based on the default styles) are used to ensure the
meters render in RSS readers.

Screenshots

This meter was generated using the default styles.

    [progpress title="defaults" goal="180000" current="73023" previous="71398" label="words"]

$Make the meter blue and remove padding. <pre><code>div.jcp_pp_meter { padding: 0; } div.jcp_pp_prog { background-color: #22a; } div.jcp_pp_new { background-color: #22f; } [progpress tile="Test" goal="50000" current="48000"] </code></pre>$

Make the meter blue and remove padding.

div.jcp_pp_meter { 
    padding: 0; 
}
div.jcp_pp_prog { 
    background-color: #22a; 
}
div.jcp_pp_new { 
    background-color: #22f; 
}


 [progpress tile="Test" goal="50000" current="48000"]

$Blue meters with 3D borders. <pre><code>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; } </code></pre> <blockquote> <code>[progpress title="Test Too" goal="100000" current="70000" previous="67000"]</code> </blockquote>$

Blue meters with 3D borders.

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 title="Test Too" goal="100000" current="70000" previous="67000"]

$Image Based <pre><code>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 title="Test Also" goal="500" current="350" label="pages"] </code></pre>$

Image Based

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 title="Test Also" goal="500" current="350" label="pages"]

Changelog

1.2.1

Fixed caching timeout (whoops)

1.2

Updated the ProgPress – NaNoWriMo Support plugin for 2011
Pretty printing of numbers now handled via number_format_i18n for better
international support.
Admin JavaScript should only load on the ProgPress admin page.

1.1

Added the ProgPress – NaNoWriMo Support plugin
Added jcp_progpress_shortcode_atts filter
Added phpdoc

1.0

Added the [progpress] shortcode.
Pretty print large numbers (inserting commas, etc).
Added class, prefix, and separator options
Added option to enable shortcodes in text widgets.
Rewrote the README (hopefully it’s more helpful now).
Added some extra tags to the markup to make it easier to style
individual sections.

0.8.6

fixed bug with width calculation
provide production and development versions of javascript and css

0.8.5

Migrated to new WordPress admin API.
Moved default styles to external style sheet.
Added ability to view default style sheet to settings page.
Added a bit more content to the README.

0.8.2

Use inline styles in RSS feeds.
Changed filter priorities to deal with WordPress changes.

0.8.1

Added title attributes to meter sections.
Better path determination logic.

0.8

Removed try/catch in place of PHP version detection.
Updated styles

0.1

initial release

54 thoughts on “ProgPress: A progress meter plugin for WordPress”

Pingback: Heart of the Hunter » Blog Archive » » Update on word count!
Debbie Ohi says:

6/18/2009 at 10:50 am

Love your plugin, Jason! I tried making a Paypal donation via your WordPress plugin page, but got an error message. :-(

Reply
Jason Penney says:

6/18/2009 at 1:50 pm

@Debbie Ohi – Yikes! Thanks so much for pointing that out. Not sure why that stopped working, but it should be all set now.

Reply
Lia Keyes says:

6/21/2009 at 6:47 pm

Any chance you could do one for blogger? I love what you’ve done here!

Reply
Pingback: “Miracles” Type-in Update (Late-July) | All the Billion Other Moments (Jason Penney)
Kristen says:

7/31/2009 at 6:36 pm

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!

Reply
Jason Penney says:

8/1/2009 at 7:14 am

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

Reply
Kristen says:

8/1/2009 at 11:13 pm

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.

Reply
Pingback: ProgPress 0.8.5 | All the Billion Other Moments (Jason Penney)
Jason Penney says:

8/6/2009 at 8:05 am

@Kristen – Please try the newest version. It should clear up the issue.

Reply
Luke says:

9/21/2009 at 3:15 pm

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

Reply
1. Jason Penney says:
  
  9/22/2009 at 1:26 pm
  
  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.
  
  Reply
  1. Luke says:
    
    9/22/2009 at 1:37 pm
    
    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!
    
    Reply
    1. Jason Penney says:
      
      9/22/2009 at 3:10 pm
      
      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’
      
      Reply
Pingback: Dark Rogue Chronicles » Blog Archive » Progress Meters
Rhapsody In Prose says:

11/9/2009 at 8:18 am

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.

Reply
1. Pedro says:
  
  10/7/2010 at 1:07 pm
  
  Why don´t you write down the modified/added code lines? Thanks in advance!
  
  Reply
Kassie says:

1/7/2010 at 6:51 pm

i cannot get the actual bar to show in my sidebar.. i don’t really get how to activate it to appear.. what am i not doing?

Reply
1. Jason Penney says:
  
  1/16/2010 at 8:33 am
  
  I apologize for the crummy documentation. It’s on the list. For now please check out this excellent walk through on getting the plug-in working and see if that helps.
  
  Reply
Shane says:

1/13/2010 at 3:32 pm

This is the second fundraiser meter I have tried to install into my sidebar. I even used the PHP Sidebar widget instead of the standard HTML one to insert the code. My stats are showing up in plain text with no progress bar. Please help.
http://www.stpatrickschurchrestorationfund.com

Thanks,

Shane

Reply
Shane says:

1/13/2010 at 4:08 pm

I seem to get it to work. Anyway to add in coma’s and $ signs in the numbers? I think it would look better to have $45,000 as oppose to 45000. Pretty cool plugin.. thanks!

Reply
1. Jason Penney says:
  
  1/16/2010 at 8:30 am
  
  I’m glad you got it working. Adding a label prefix and pretty printing the numbers are both good suggestions. I’ll look into them.
  
  Reply
Pingback: Sarah Ettritch » Fantasy Story Progress Meter
Cindi says:

2/20/2010 at 6:56 am

This looks like a great plugin – we’re going to use it for quilt progress on our blog! Just two questions – 1. Is there a way to add a picture of what we’re making progress on? 2. How do you change the color of the bar?

Reply
Cindi says:

2/20/2010 at 7:39 am

My apologies – I figured out how to get the picture in. Now just need to know how to change the color! Thanks so much – it looks great!!

Reply
Cindi says:

2/20/2010 at 10:09 am

See what happens when you leave me alone to experiment? Figured out how to change the color. Now the only thing we’d like to do is delete the “50/100% complete” line and just leave the meter. It’s the only thing I can’t figure out.

This is GREAT!!!! I’ve had to tweak it just a little but it’s going to work perfectly. There is nothing out there that allows us to monitor our craft. Thanks for developing this!

Reply
Angie says:

6/5/2010 at 1:10 am

Hey there, I just wanted to thank you for your plugin. I’ve modified it for use in a buddypress site I have going. I’m trying to figure out how to do a last bit of ui tweaking on the bp side of things, but I just wanted to say thanks for putting out such a great straight forward bit of code!

Reply
Raffi says:

7/14/2010 at 12:59 pm

The “excellent write up” is gone. Do you know a site where this is in action? There is a comment here from Dark Rogue and there is a progress bar in his left sidebar. Is that it? Can it run vertically or only horizontally?
Thanks

Reply
Penrefe says:

9/7/2010 at 2:09 pm

Hello! Absolutely love this little gem. I also noticed there’s no guide for setting it up, so I wrote on, hope it helps!

Reply
1. Jason Penney says:
  
  9/7/2010 at 5:01 pm
  
  Very nice! I used to have a similar page on this site, and I’ve been meaning to recreate it as part of the README.
  
  Glad you figured it out.
  
  Reply
Pingback: ProgPress Setup & Customisation Guide « Penrefe
Tudorminator says:

9/21/2010 at 3:30 am

Thank you for your great work. I like it even more after you have added the shortcode option and the separator parameter. I use it to display reading progress on my blog, so now it’s a breeze to have it display something like ”X pagini din Y” (X pages out of Y).

I do have a small suggestion which would benefit all of us non-native english speakers: please make the text localizable through gettext, so that I can change the $goal_label tooltip (I use the Codestyling Localization plugin) without modifying it in the plugin code after each update.

Thank you.

Reply
Tudorminator says:

9/21/2010 at 3:38 am

Sorry about double posting, one more thing: I think that $goal_label tooltip would be more useful if it would display the difference between goal and current values.

Thank you again for a great plugin.

Reply
Pingback: Helpful Hackery | All the Billion Other Moments (Jason Penney)
Pingback: NaNo Note « InkyBlots
Edwin says:

11/14/2010 at 8:53 pm

How do you set up different classes so that you can track different projects, as you have suggested in the text file. Thanks. I am a newbie, and need a push in the right direction.

So far I have taken the css style, modified it to suit my website, and ploncked it into my style.css, while disabling your default style in the plugin options.

Its great for now. But I would like to learn how to create different CLASS styles so I can portray mutiple different Progress bars on 1 website. Big thanks.

Edwin

Reply
1. Jason Penney says:
  
  12/14/2010 at 7:10 am
  Sorry for the delay in response. Let’s say you wanted to make your meters blue for a certain project.
  
  In your post/sidebar/whatever: [progpress class="project_foo" ... ]
  
  Then in your style sheet:
```
div.project_foo .jcp_pp_meter div {
    background-color: #00f;
}
```
  Reply
Pingback: Weekly Summary & Progress - Vicarious Thoughts
Angel says:

4/10/2011 at 2:59 am

I really like this plugin, however I was wondering if there was anyway you could modify it to work for those trying to lose weight? Please let me know if this is possible. Thanks!

Reply
Isak Krab Koed says:

6/24/2011 at 12:55 pm

Dear Jason

Thank you so much for this brilliant plugin. There’s just one thing I’m wondering: how can I change the , to a . in the numbers, for example:

From 10,000 to 10.000?

If I write 10000 in the shortcode, it shows up as 10,000 – which is not the way it should look in my country. If I write 10.000 in the shortcode, it shows up as just 10, which is not the right number :P

Can you help?

Kind regards
Isak

Reply
Pingback: Measuring Your Words – The Value of Word Counts | R-H Perspectives
Tudorminator says:

6/25/2012 at 4:09 am

Hi Jason,

Thanks again for your great work. I have taken the liberty to add the feature I was requesting a while ago, and I want to share my modifications with everybody. I would really love it if you could integrate this in a future version, no strings attached (I don’t even want you to mention my name or anything, do as you please).

So, in order to make the “Goal: ” label translatable through gettext() (and the Codestyling Localisation plugin), one needs to edit the wp-progpress.php file (plugin version 1.2.1) in 2 places:

– on line 113, change this:

$goal_label = "Goal: " . $goal;

to this:

$goal_label = __("Goal: ", 'progpress') . $goal;

– then add the following lines after line 426, inside the function jcp_progpress_init():

if ( !defined('WP_PLUGIN_DIR') ) { load_plugin_textdomain('progpress', str_replace( ABSPATH, '', dirname(__FILE__))); } else { load_plugin_textdomain('progpress', false, dirname(plugin_basename(__FILE__))); }

That’s all. After these modifications, ProgPress appears in the Codestyling Localisation’s list of translatable plugins and everything works smoothly. Note that I haven’t touched the strings that appear in the config page of the plugin, but the modifications are fairly similar and should be easy to implement.

Best regards,
(T)

Reply
Pingback: Otherwhere | Pretty Progress Bars for Your Challenges
Trevor says:

8/16/2012 at 8:35 pm

So from what I understand, you can’t change the color of the bar when it’s used in a widget.. correct? I’m wanting to have multiple bars in a widget each with a different colour based on how far along their progress is. Is it possible?

Reply
1. Jason Penney says:
  
  9/19/2012 at 3:05 pm
  
  You can have different colored bars. It’s controlled by your style sheet. Use the ‘class’ parameter to differentiate them.
  
  [progpress class="green_meter" ...]
  
  Then in your style sheet:
  
  .green_meter .jcp_pp_meter div {background-color: #0f0;}
  
  Reply
Pingback: Measuring Your Words: The Value of Word Counts | R-H Perspectives
Dale DeMarchi says:

9/19/2012 at 12:13 pm

Jason,
I’m tracking progress for fundraising for 3 phases of a playground for my kid’s school. I’d like to display 3 meters in three different colors – same background color, different progress color. If I use the info above, I think I would use the following in the widget:

[progpress class=”project_Phase1″ title=”Phase 1: Playground” prefix=”$” goal=”80000″ current=”3000″]
[progpress class=”project_Phase2″ title=”Phase 2: Field” prefix=”$” goal=”400000″ current=”0″]
[progpress class=”project_Phase3″ title=”Phase 3: Kickball/Softball Field” prefix=”$” goal=”100000″ current=”0″]

And this in the CSS:
div.project_Phase1 .jcp_pp_meter div {background-color: #00f;}
div.project_Phase2 .jcp_pp_meter div {background-color: #00f;}
div.project_Phase3 .jcp_pp_meter div {background-color: #00f;}

I need to determine colors (where do you find these codes?), but am I on track?

Thanks!

Reply
1. Jason Penney says:
  
  9/19/2012 at 3:00 pm
  
  Hi Dale. You’re on the right track! You need to use RGB color values, and add the entries to your sites style sheet. Let me know if I can help.
  
  Reply
  1. Dale says:
    
    9/19/2012 at 5:01 pm
    
    Jason,
    Thanks for your help! Ok, I have the colors loaded. Is there a control that lets me change the border of the meter?
    
    Thanks,
    Dale
    
    Reply
    1. Jason Penney says:
      
      9/19/2012 at 5:23 pm
      
      Sure, there are a lot of options as to what you can do with the border. The default is controlled by:
      
      div.jcp_pp_meter { border:1px solid #000; }
      
      That’s 1 pixel wide, solid, black. You can play with any of the border properties.
      
      The empty space between the border and the bar is controlled by:
      
      div.jcp_pp_meter { padding:2px}
      
      Which is 2 pixels of empty space between the meter and the border. You can set it to ‘0’ to get rid of that space.
      
      Reply
      1. Dale says:
        
        9/19/2012 at 7:15 pm
        
        One last question… how do I control the color of the title of the meter? Do I add the code to the widget or the css?
        
        Thanks!
      2. Jason Penney says:
        
        9/19/2012 at 7:22 pm
        
        In the CSS.
        
        .jcp_pp_title { color: pink; }
Pingback: Writing Progress Plugin for Wordpress | Jamie Godsafe – Writer and Wronger
Pingback: WordPress Plugins Revisited | On a Book Bender