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

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.

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

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.

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.

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.