Easily insert progress meters into your content and/or sidebars.
I’m seeing the shortcode source when I try and use it in a text widget.
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.
What are the default styles? What does the markup look like?
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.
What’s all this about shortcodes? I’ve been using ProgPress in a different way for ages!
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.
Besides shortcodes and HTML comments, is there any other way I can use ProgPress to generate meters?
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).
How will the meter show up in my RSS feeds?
Inline styles (based on the default styles) are used to ensure the
meters render in RSS readers.
![<p>This meter was generated using the default styles.</p>
<pre><code> [progpress title="defaults" goal="180000" current="73023" previous="71398" label="words"]
</code></pre>](https://ps.w.org/progpress/trunk/screenshot-1.png?rev=1567419)
![<p>Make the meter blue and remove padding.</p>
<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>](https://ps.w.org/progpress/trunk/screenshot-2.png?rev=1567419)
![<p>Blue meters with 3D borders.</p>
<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>
<p><code>[progpress title="Test Too" goal="100000" current="70000" previous="67000"]</code></p>
</blockquote>](https://ps.w.org/progpress/trunk/screenshot-3.png?rev=1567419)
![<p>Image Based</p>
<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>](https://ps.w.org/progpress/trunk/screenshot-4.png?rev=1567419)