Home Blog Create Simple Horizontal CSS Progress Bar in WordPress

Create Simple Horizontal CSS Progress Bar in WordPress


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.

Create Simple Horizontal CSS Progress Bar in WordPress

The 2016 Internoetics article applied a progress bar when a pie chart was better suited.

The Result

The simple shortcode of [progress percentage="65" text="Sample progress bar"] will return the following:

Sample progress bar (65%)

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:

70 %

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.


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


Title: Create Simple Horizontal CSS Progress Bar in WordPress
Description: Include a rudimentary horizontal progress bar in WP representing a percentage value.
Download: Shortcode (V0.2) | Plugin Page

■ ■ ■

Interested in WordPress and Web Design? Subscribe to our list and we'll send you subscriber-only tools and plugins

Short URL for this post: http://shor.tt/Jnm


Please enter your comment!
Please enter your name here