How to Show Percentage (%) Complete in the LearnDash Progress Bar

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

By default, the LearnDash progress bar only displays a colored bar to indicate a student’s progress in the course. There is no text-based example of what percentage they have completed.

LearnDash progress bar with percentage complete

Sweet lookin’ bar, man! How’d you do that? With this →

I’ve previously covered how to show “X out of Y steps completed” beneath the progress bar, but if you are trying to display a percentage instead, this article is for you.

There are multiple variations on how to achieve this. I’ll explain which method I recommend depending on your circumstances.

Recommended Product

Uncanny Automator logo
Automate your LMS site with over 150+ plugins & apps. Uncanny Automator is the perfect no-code automation tool to replace dozens of WordPress plugins.

 • Supports LearnDash, Tutor LMS, LifterLMS, and most membership plugins
 • Trusted by 30,000 companies

Get 10% OFF with code affiliate10-dwarfel

Each method involves making a copy of one of LearnDash’s template files, modifying it, and including it in your child theme. I’m going to write an entire tutorial on this at some point, but for now, I’ll include a basic overview.

NOTE
This process will likely change when LearnDash 3.0 comes out. I’ll try my best to update this post when that happens.

Modifying a LearnDash Template File

In this example, I’ll be using the template file that determines the output of the LearnDash progress bar widget, as well as the shortcode [learndash_course_progress].

  1. On your server, navigate to your site’s /wp-content/plugins/sfwd-lms/ folder
  2. Copy the course_progress_widget.php file
  3. Now create a new folder in your child theme called “learndash”
  4. Paste this file into that folder. For example:

/child-theme/learndash/course_progress_widget.php

Now this file will be used to display the LearnDash progress bar, instead of the file in the LearnDash plugin folder (/sfwd-lms/ is the name of LearnDash’s plugin folder).

NOTE
When LearnDash releases new updates, IF they add any code or functionality to the progress bar widget, you will not receive it. This can be both good & bad. Good because it means your custom code will not be overwritten. Potentially bad if LearnDash adds some cool new functionality. But you can always check the plugin file and port over any new code updates by hand.

Modify the Progress Bar Output

Now that we have our own template file to experiment with, let’s modify the code to show a percentage.

Recommended Product

Rapyd WordPress Hosting
Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.

Get 25% OFF Rapyd Today →

How to Get the Percentage

Luckily, it’s super-easy to find the code that grabs the percentage of a course a student has completed. It’s actually already in that file! Just not in the spot we want it.

Here’s the code we need. See if you can spot it in the template file:

<?php echo esc_attr( $percentage ); ?>

It’s being used as a CSS width value to create the actual bar itself.

It needs to stay there, otherwise we’ll destroy our bar. But we can copy it and reuse it! 🙌

Here’s where things go two separate ways. If you’re using the Design Upgrade Pro for LearnDash plugin, and want to maintain the ability to show, hide & change the position (above or below the bar) of your “% complete” message in the Customizer, see method 1.

If you’re not using the plugin, or just want to build your own custom progress bar, see method 2.

Method 1: Using Design Upgrade Pro for LearnDash

We’re going to use the code above to give us the percentage, add “% Complete” to the end of it, and then use it to replace the text for our current title attribute of the progress bar. It’ll look like this:

<dd class="course_progress" title='<?php echo esc_attr( $percentage ); ?>% Complete'>
	<div class="course_progress_blue" style='width: <?php echo esc_attr( $percentage ); ?>%;'>
</dd>

The reason we replaced the title attribute is because the Design Upgrade Pro plugin uses CSS to actually output the title attribute text on the page. If you’d rather output the percentage complete in the actual HTML markup, continue reading.

Recommended Product

Uncanny Owl logo
Uncanny Owl has been making the best LearnDash plugins since the day LearnDash was born. Their LearnDash Toolkit is used on over 30,000 sites and adds 20+ features specifically for LearnDash. They also sell the popular plugins:
Uncanny Groups - group/corporate sales, group reporting & more.
Tin Canny Reporting - one of the best reporting plugins for LearnDash
Uncanny Automator - automate LearnDash & connect with 150+ WordPress plugins & third-party services

Method 2: Build a Custom Progress Bar

This time we’re going to use the same code to get the percentage, but we’re going to add it to the actual markup. This will output it as actual text on your page.

We’ll just wrap it in a <span> tag and place it below the <dd> element which contains the progress bar container.

<dd class="course_progress" title='<?php printf( esc_html_x( '%1$d out of %2$d steps completed', 'placeholder: completed steps, total steps', 'learndash' ), $completed, $total ); ?>'>
	<div class="course_progress_blue" style='width: <?php echo esc_attr( $percentage ); ?>%;'>
</dd>
<span><?php echo esc_attr( $percentage ); ?>% Complete</span>

You’ll notice this time we left the “X out of Y steps completed” in the title attribute. That means it will show up if you hover your mouse over the progress bar for a few seconds.

You could completely remove the title attribute if you don’t want anything to show up.

Quick Styling Tips

If you are proficient with CSS, you can add a class to your new HTML and style it however you wish.

If you’re using the FREE Design Upgrade plugin, it should already be aligned properly beneath your progress bar. But you could add some simple styling directly to your <span> tag if you’re in a hurry.

<span style="color:#999; font-size:95%;"><?php echo esc_attr( $percentage ); ?>% Complete</span>

That would change the color to a light grey and make the font size just a tad smaller.

This method of customizing your LearnDash progress bar can be used in a lot of different ways:

  • Move the “% Complete” above the progress bar
  • Display steps completed and % complete
  • Style the percentage one way & the word “complete” a different way
  • Add icons, images or other elements
  • Use PHP math functions with if/else statements to output various messages based on completion status (advanced)

Regardless of which method you choose, be sure to upload the final template file to your server when you’re finished.

If you’ve implemented a custom LearnDash progress bar, I’d love to see it. Post a link to a screenshot in the comments, or feel free to share your code.

Previous

Show “X out of Y steps completed” under the LearnDash Progress Bar

Next

Uncanny LearnDash Toolkit 3.0 Gets Major Facelift, Updates to Login Form & Transcripts

13 Comments

  1. Kakybat

    Five Star!!! very useful. Thanks!!!

  2. Miko Belludo

    Awesome thank you exactly what I needed. Salute.

  3. How do you turn the progress bar off?

    • There are no settings for this. You could either customize LearnDash template files and remove it from the HTML (more technical) or use CSS to hide them.

      .learndash-wrapper .ld-focus .ld-focus-header .ld-progress-heading,
      .learndash-wrapper .ld-focus .ld-focus-header .ld-progress-bar,
      .learndash-wrapper .ld-progress {
          display: none;
      }

      Add that to the “Additional CSS” area of the Customizer.

  4. Marcus davey

    Hello, Great write up, Thanks for sharing.

    Would you happen to know how i can enable a progress bar on my quiz? I do not have any courses on my website.

    Would really appreciate if anyone knew how to do this as i am totally stuck!

    • Hi Marcus — There is no progress bar for quizzes. Are you trying to show users the progress of how many questions they’ve answered compared to how many total questions there are?

      That will require custom programming, and likely be very difficult to do.

  5. What if I only want to remove the progress bar from one module? Is this possible?

    • Yes, it’s possible.

      You’ll need to find the module ID, and then see how your theme uses it on the <body> tag as a class name. For example, in some themes, you’ll see a class of postid-1234. In this case, you’d use the following CSS:

      .postid-1234 .ld-progress {
      	display: none !important;
      }

      That may or may not work, depending on your theme. I can’t give you a definite answer without looking at your site and also seeing exactly which instance of the progress bar you want to hide.

  6. Hey I just wanted to know that for method 2 where I have to paste the code?

    • Hi Bilal. Method 2 is done by modifying LearnDash template files, as I outlined at the top of the article. You’d find the appropriate template file in the LearnDash plugin folder (/sfwd-lms/), copy it, and paste it into the proper folder in your child theme.

      However, keep in mind, the files I mention above are in very different locations now if you’re using the LearnDash 3.0 active template (which you should be). The code itself is also likely different.

      If you plan to try something like this, I recommend you hire a LearnDash developer.

  7. I have for example… syllabus, assignment, reading, and exam… but my progress bar only says 1/2 tasks required… how do I get all 4 to be included 1/4

    • Hi Tanya – I’m not sure what you mean by “syllabus, assignment, reading, and exam.” That is not default LearnDash terminology. LearnDash only counts lessons, topics, and quizzes for completion status. Each one of those things is a step, and that’s how LearnDash calculates completion.

      If it’s not working properly, I would reach out to LearnDash support.

Leave a Reply

Your email address will not be published. Required fields are marked *