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 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
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:
Copy and paste the WordPress function into your theme's
functions.php file or, if you sensibly have one installed, your custom functions plugin.
A number of the attributes can be altered with most of them relating to the basic style/color of the progress bar.