Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggregation Enquires Welcome

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.

1
<?php 
2
/*
3
 Create Simple Horizontal CSS Progress Bar in WordPress
4
 http://www.beliefmedia.com/progress-bar-wordpress
5
*/
6
 
7
function beliefmedia_percentage_div($atts) {
8
 
9
  $atts = shortcode_atts(array(
10
 
11
    'percentage' => '50',
12
    'text' => 'Progress',
13
 
14
    'width' => '400',
15
    'height' => '30',
16
    'lineheight' => '30',
17
 
18
    /* Default values. Don't use in shortcode. Just set here once.. */
19
    'borderwidth' => '1',
20
    'bordertype' => 'solid',
21
    'bordercolor' => 'black',
22
    'backgroundcolor' => '#cccccc',
23
    'font' => 'normal 12px verdana',
24
    'margin' => '10',
25
    'bgcolor' => '#FB7D00',
26
    'textcolor' => 'black',
27
  ), $atts);
28
 
29
  $return .= '<div style="border: ' . $atts['borderwidth'] . 'px ' . $atts['bordertype'] . ' ' . $atts['bordercolor'] . '; max-width: ' . $atts['width'] . 'px; height: ' . $atts['height'] . 'px; background: ' . $atts['backgroundcolor'] . '; position: relative; margin: ' . $atts['margin'] . 'px auto;">
30
<div style="max-width: ' . $atts['percentage'] . '%; background: ' . $atts['bgcolor'] . '; text-align: left; height: ' . $atts['lineheight'] . 'px;  font: ' . $atts['font'] . ';"><span style="display: inline-block; position: absolute; width: 100%; margin-left: ' . $atts['margin'] . 'px; line-height:' . $atts['height'] . 'px; vertical-align: middle; color: ' . $atts['textcolor'] . ';">' . $atts['text'] . ' (' . $atts['percentage'] . '%)</span></div>
31
</div>';
32
 
33
 return '' . $return . '';
34
}
35
add_shortcode('progress', 'beliefmedia_percentage_div');

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.

Download


Title: Create Simple Horizontal CSS Progress Bar in WordPress
Description: Include a rudimentary horizontal progress bar in WP representing a percentage value.
  Download • Version 0.2, 808.0B, zip, Category: WordPress Shortcodes

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  AUS Eastern Standard Time (Virginia)

  Want to have a chat?
 

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment