This article will provide you with rather basic WordPress shortcode that'll permit you to include a rudimentary progress bar in your post or page representing a percentage value. While we have our own graphing API for internal use, we occasionally use variations of this function to track sales, performance, or whatever else. This shortcode is somewhat of a precursor to several others that show a horizontal bar graph in WordPress (such as showing a change.org progress graph).
In the former Internoetics version of this article we shared shortcode that would render a series of bar graphs when a pie chart would have been far more effective. For that reason, we've stepped back from the previous version and instead focused on sharing just a simple and single graph (intending to show the percentage of a target value). The other post will find its way here sometime soon.
The Result
The simple shortcode of [progress percentage="65" text="Sample progress bar"] will return the following:
The idea is that a dynamic value will be represented (as is the case in upcoming articles).
The HTML Alternative
The HTLM5 
progress tag 
will render an indeterminate or determinate bar on your website (indeterminate doesn't have a value). Usage is easy: <progress value="70" max="100">70 %</progress>. For your specific browser it will display as follows:
Using PHP, of course, makes altering the value a piece of cake: <progress value="<?php echo $value;>" max="<?php echo $max; ?>">70 %</progress>. Sadly, however, the tag is unpredictable without copious amounts 
of CSS or JavaScript includes to normalise the behaviour and cosmetics. For that reason it may be best to steer clear of the tag until it's further developed.
WordPress Shortcode
Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.
If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.
A number of the attributes can be altered with most of them relating to the basic style/color of the progress bar.
Considerations
- While the application of the graph is useful, most of the graphing we work with internally is via our own Graphing API. There are dozens of different image, CSS, and JavaScript-based libraries available if you use graphing regularly.
