Show “X out of Y steps completed” under 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.

The LearnDash progress bar does an OK job at visually representing a student’s progress, but there are ways to improve it. If you have 50 or more steps in your course, the progress bar itself might not be the best indicator.

LearnDash progress bar with steps shownHere’s how I did it.

" data-medium-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar-300x67.png" data-large-file="https://ldx.design/wp-content/uploads/2019/01/learndash-show-steps-completed-progress-bar.png" tabindex="0" role="button" >

Like the stripes? 😍 Here’s how I did it.

In this tutorial, I’m going to show you how to use a little CSS to display “X out of Y steps completed” below (or above) your LearnDash progress bar.

If you want to see how you can do this without any coding, PLUS spice up your entire progress bar with custom colors & styles, check out this video.

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

Before we get into the CSS, you might be wondering…

Where do you find the “X out of Y steps completed” language? I don’t see it anywhere on the page.

Well, if you look in the source code, LearnDash hides it in the title attribute of the outer progress bar wrapper (<dd>). Most browsers will display the title attribute if you hover your mouse over the element for about 2 seconds. That’s all fine and dandy, but we want to actually display it!

Here’s the HTML code I’m referring to. See the steps listed in there?

<dd class="course_progress" title="3 out of 8 steps completed">
	<div class="course_progress_blue" style="width: 37%;"></div>
</dd>

Now we’re going to use a little CSS trickery to extract the steps from the title attribute and display them right on the page itself. 🤯

NOTE
The following CSS should be placed in the style.css file of a child theme, or the “Additional CSS” area of the WordPress Customizer.

1. Allow Content to Overflow Outside the Progress Bar

The first thing we need to do is allow content to overflow outside of the progress bar area. To do this, we’ll use overflow property, and set it to visible. We do this on the <dd> element, which is the element that contains the title attribute that we need to tap into.

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 →

dd.course_progress {
	overflow: visible;
}

2. Display the Steps

Now we’ll use the CSS pseudo-element :after, along with the CSS content property, to actually output the content.

The CSS content property can accept the value of any HTML attribute. In this case, we’re using the title attribute. That’s where attr(title) comes from. “attr” is for attribute, and “title” tells CSS which HTML attribute to grab.

dd.course_progress:after {
	content: attr(title);
}

Technically, that will output “X out of Y steps completed,” but it’s not at all positioned where we want it. Let’s position it nicely under the progress bar.

3. Position the Steps

Since the progress bar wrapper already has a CSS position of relative, we can use absolute positioning on the :after pseudo-element to place our steps exactly where we want them. We use left and bottom values to move the text, and set it to display: block; so that it starts fresh on its own line.

dd.course_progress:after {
	position: absolute;
	left: 0;
	bottom: -22px;
	display: block;
}

You might need to adjust the bottom value slightly. This will depend on some of your theme’s styles, as well as which font you are using. Move it up or down a few pixels until it’s just right.

TIP
To move the steps above the progress bar, simply change the word bottom to top.

Speaking of getting it just right…

4. Finishing Touch

We’ll add a few more styles to finish it off. I’ve reduced the font-size to 80% and given it a left & right padding of 2px, which moves it just slightly in from the edges of the progress bar.

Recommended ProductIntuitive way to create websites with Elementor
dd.course_progress:after {
	font-size: 80%;
	padding: 0 2px;
}

5. The Complete Code

Here’s the code in its entirely:

dd.course_progress {
	overflow: visible;
}
dd.course_progress:after {
	position: absolute;
	content: attr(title);
	left: 0;
	display: block;
	font-size: 80%;
	padding: 0 2px;
	bottom: -22px;
}

Is there anything else you’d like to do with your progress bar? Please let us know in the comments.


The following example uses our Design Upgrade Pro for LearnDash plugin.

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

Previous

2 Ways to Manually Enroll Users into a LearnDash Course

Next

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

1 Comment

  1. Miko

    Well done, thank you!

Leave a Reply

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