ProgPress Setup & Customisation Guide

Today I came across an absolutely invaluable little widget that fits nicely into WordPress to show writers the fruits of their labours in the form of a progress meter, called ProgPress. There was just one problem; the tutorial for setting it up wasn’t available anymore.

After tinkering around for a while, I managed to get it working, and since the tutorial link provided isn’t available right now, it’s Super-Penrefe to the rescue!

I’ve no idea if I’ll do the original tutorial any justice, but if it gets it working, it’s godda be good enough, right?

(NOTE: This tutorial is designed for people using the hosted version of WordPress, and has been setup and tested working in WordPress 3.1)

Step 1: Installation

  1. Download the Addon. You can do this from within the WP Admin in Plugins > Add New > Search ProgPress and Install, or you can download manually from here and upload to your plugins directory on your site’s WordPress installation.
  2. Once it has been downloaded, activate it. If you’ve installed through the WP Admin, you will be prompted to activate it. If not, find the plugin within the list and click on Activate.

And we’re cooking on gas! But before the plugin will display in your posts or on a sidebar widget, you need to turn on some settings.

Step 2: Basic Setup

  1. Go into WP Admin Panel > Settings > ProgPress.
  2. If you want to be able to insert progress meters into your blog posts, tick the first box.
  3. If you want to be able to insert progress meters into a widget sidebar, tick the second box.
  4. To use the plugin’s in-built CSS style for the progress bar, tick the third box (It is generally a good idea to enable the Use Build-In Styles option in the first instance, for the simple fact that it allows you to see the CSS working in the bar [I’ll get to this in Step 4]).

Now all you need to do is add the progress bar(s) to your blog!

Step 3: Adding the Code*

  1. Go into WP Admin > Appearance > Widgets
  2. Drag a Text widget into your sidebar(s), or footer(s), depending on where you want the progress bar(s) to appear.
  3. In the content of the widget, enter the following code information:
    <!-- progpress|MeterTitle|MeterGoal|CurrentCount|PreviousCount|CountLabel -->
  4. Populate this code with information relevant to your project and update the widget (In my case, it’s <!--progpress|Divided They Fall|100000|41000|20000|words--> – note also that if you want to show the thousand commas, you have to enter them manually)
  5. Once saved, this code on the site looks something like this (will vary depending on your own sites’ inbuilt design, for example I use Century Gothic font in a mid grey colour, which has been picked up by the progress bar):

Ta da!

If you are happy with the result and do not want to further customise the look of your progress bar: Congraulations, you’re done! Otherwise, continue onto step 4:

* You can only add a progress bar in this way if you are using a theme that uses widgets.

Step 4: Customising with CSS

WARNING: This step involves editing your WordPress theme. Please backup your theme before making changes, as a wrong line of code can throw the entire system up the wall! Please do not conintue to carry out this step if you don’t have a backup or are confident with basic CSS/HTML code.

  1. Go into WP Admin > Tools > ProgPress
  2. Untick the Use Build-In Styles button. This tells the plugin to stop using its own CSS style to create the bar.
  3. Click Save.
  4. Go into Appearance > Editor. Down the right-hand side you should see a list of files, which are used to create your WordPress theme.
  5. Click on the file called style.css (should be somewhere near the bottom of the list – it may open automatically but click on it if not).
  6. Go to the bottom of this page, and paste the following code into a free space:

div.jcp_pp{margin:0 auto;padding:0;text-align:center;width:200px;}
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%;}

This code is essentially telling the plugin how you want the progress bars to be designed. Any changes you make to this code will affect the design of the bars.


Blue bar with a black background and a (rather hard to see) blue border:

div.jcp_pp{margin:0 auto;padding:0;text-align:center;width:200px;}
div.jcp_pp_meter{overflow:hidden;width:100%;height:10px;border:1px dotted #0f73ac;;padding:2px; background-color:#000000;}
div.jcp_pp_meter div{height:100%;float:left;background-color:#0f73ac;}
.widget_text div.jcp_pp{width:90%;}

Green bar with a light grey dotted border:

div.jcp_pp{margin:0 auto;padding:0;text-align:center;width:200px;}
div.jcp_pp_meter{overflow:hidden;width:100%;height:10px;border:1px dotted #999;;padding:2px;}
div.jcp_pp_meter div{height:100%;float:left;background-color:#090;}
.widget_text div.jcp_pp{width:90%;}

Red Title and Bar with Word Count Text “Hidden” (this isn’t really removing the text, it’s just making it the same colour as the background; if you highlight over it, the text will still be there, but still!):

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

Any questions, feel free to comment below, otherwise enjoy your new progress bar!