WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to implement a progress bar to wordpress. Exactly this one : http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/

php shortcodes

function progress_bar(  $atts, $content = null ) {
    global $progress, $pbar_class;
    extract( shortcode_atts( array(
        'title' => '', //additional text
        'progress' => '', //progress %
        ), $atts) );
    $pbar_class = '.progressBar'.rand(100,999);
    return '<div class="' . $pbar_class . '"><div></div></div>';

add_shortcode( 'pbar', 'progress_bar' );

function pbar_script() {
    global $progress, $pbar_class;
    foreach($pbar_class as $pb_class) {    
    echo '<script type="text/javascript">jQuery(document).ready( function() { progress('.$progress.', $("' . $pb_class . '"))});</script>';   

add_action( 'wp_footer', 'pbar_script' );


function progress(percent, $element) {
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').delay(500).animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");

I have no idea how to make it work.

share|improve this question
Where is the progress bar getting its updates from? Do you just want a random 0-100 animation or are you trying to get the page to send Ajax to the bar as it loads a large object? – Imperative Ideas Oct 10 '13 at 7:14
I just want to make the shortcode work. This is whole code I'm using. Js code is placed in my js file "scripts.js" and the shortcode in "shortcodes.php". For example when I type [pbar progress="50"] in WP editor i would like to receive a progress bar with 50% ; pbar_script() function is not working as i want to. Foreach give me an error. I'm new to php that's why i really need your help ;) – user2587741 Oct 10 '13 at 12:49
You're implementing the bar just fine. You aren't giving it data. It's like getting on a bus with no driver and asking why it hasn't taken you downtown yet. – Imperative Ideas Oct 10 '13 at 20:42
Ignore the additional text for now. It works when i use the shortcode once per page, if i try to use more bars then just one of two stay "alive" :) – user2587741 Oct 11 '13 at 12:49

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.