LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

How to Programatically Number LearnDash Sections, Lessons & Topics with CSS

Justin from the LearnDash Facebook group asked if there was a way to automatically add numbers before each lesson using the BuddyBoss theme + platform. I was pretty confident the answer was yes, so I rolled up my sleeves and got to work.

Not only can we do this for BuddyBoss, but I’ll provide you with the CSS to do this for all themes using the LearnDash 3.0 template, as well as those using the Legacy template. I’ll even throw in some code to auto-number lessons & topics in the Uncanny LearnDash Toolkit Dashboard.

This is the perfect solution for those who want to display lesson/topic numbers in navigation & course lists, but not include the number in the actual lesson or topic title. This way, the numbers don’t show up at the top of each individual page. They only appear when viewing lists & navigational elements 👍.

It also works great for those who switch lessons & topics around or use them in multiple courses with shared course steps.

Jump right to the section that applies to your LearnDash setup:

Caveat

There is one downside to using this method if you have a ton of lessons or topics.

❌ This will not work if you’re using pagination

Because of how CSS counters are implemented, this only works if you’re displaying all of your lessons and/or topics on the same page, without any pagination.

👉 Why you shouldn’t use pagination to display course content

LearnDash 3.0 Template

If you’re using the LearnDash 3.0 active template, you can add lesson & topic numbers in a few ways.

Course Page

To automatically add sequential numbers to your LearnDash course page, use the following CSS. Feel free to just use the lesson numbering, or both lesson & topic numbering.

NOTE
This does not affect quizzes. See below if you also want your final quiz to be numbered.

Update: 23 Feb 2020: Added Section numbering

/**
 * SECTION NUMBERS
 */
.learndash-wrapper .ld-item-list-items {
	counter-reset: ld-section-counter;
}
.learndash-wrapper .ld-item-list-items .ld-lesson-section-heading {
	counter-increment: ld-section-counter;
}
.learndash-wrapper .ld-item-list-items .ld-lesson-section-heading::before {
	content: counter(ld-section-counter) ". ";
}

/**
 * LESSON NUMBERS
 */
.ld-lesson-list {
	counter-reset: ld-lesson-counter;
}
.ld-lesson-list .ld-item-lesson-item .ld-item-name .ld-item-title {
	counter-increment: ld-lesson-counter;
}
.ld-lesson-list .ld-item-lesson-item .ld-item-name .ld-item-title::before {
	content: counter(ld-lesson-counter) ". ";
}

/**
 * TOPIC NUMBERS
 * This REQUIRES the above code for lesson numbers.
 */
.ld-lesson-list .ld-topic-list {
	counter-reset: ld-topic-counter;
}
.ld-lesson-list .ld-topic-list .ld-topic-title {
	counter-increment: ld-topic-counter;
}
.ld-lesson-list .ld-topic-list .ld-topic-title::before {
	content: counter(ld-lesson-counter) "." counter(ld-topic-counter) " ";
}

Lessons + Final Quiz Numbered

If you want all your lessons AND your final quiz to be numbered, replace the “LESSON NUMBERS” code above with this CSS. You can still optionally use the “TOPIC NUMBERS” code if you’d like.

/**
 * LESSON & FINAL QUIZ NUMBERS
 */
.ld-lesson-list {
	counter-reset: ld-lesson-counter;
}
.ld-lesson-list .ld-item-list-item .ld-item-name .ld-item-title {
	counter-increment: ld-lesson-counter;
}
.ld-lesson-list .ld-item-list-item .ld-item-name .ld-item-title::before {
	content: counter(ld-lesson-counter) ". ";
}

I have not found a way to number lesson or topic quizzes. I actually don’t think it’s possible with the current HTML that LearnDash uses.

Start Numbers at 0

If you want your first lesson to be lesson 0, you can adjust the counter-reset line above. Simply add a space and then a -1. It will look like this:

.ld-lesson-list {
	counter-reset: ld-lesson-counter -1;
}

Hide the First Number

You could take this a step further and hide the first lesson number. You might still want to use the CSS above to start your numbering at 0, but you can then hide the 0. so it doesn’t show up to the user, and then your 2nd lesson will start with a 1., and count incrementally from there.

NOTE
This is additional CSS you have to add after all the CSS you have used above. Only use one or the other snippet below, depending on whether or not you’re using a Section heading.

If you’re using a Section heading at the very beginning of your course…

.ld-lesson-list .ld-item-lesson-item:nth-child(2) .ld-item-name .ld-item-title::before {
	content: "";
}
/* This is only needed if you have topics within your lesson */
.ld-lesson-list .ld-item-lesson-item:nth-child(2) .ld-topic-list .ld-topic-title::before {
	content: "";
}

If you’re NOT using a Section heading at the very beginning of your course…

.ld-lesson-list .ld-item-lesson-item:first-of-type .ld-item-name .ld-item-title::before {
	content: "";
}
/* This is only needed if you have topics within your lesson */
.ld-lesson-list .ld-item-lesson-item:first-of-type .ld-topic-list .ld-topic-title::before {
	content: "";
}

All of the above examples will apply to all courses on your site. It is possible, however, to apply numbering only to a specific course or courses.

You’ll need to locate the unique class name that your theme applies to the <body> tag. This is different from theme-to-theme, and might not exist for all themes.

Code showing the unique class name on <body> tag

Example class name used by the Astra theme on the <body> tag

Once you’ve found that, simply add .postid-7  to the beginning of each line of CSS found above. Change the 7 to match the post ID of your course, and the postid- part might be different as well.

.postid-7 .ld-lesson-list {
	counter-reset: ld-lesson-counter;
}

If you want to apply numbering to multiple courses, follow the same instructions, but add a comma & a new line between each course. Again, these unique class names that you’re adding must be added to every line of CSS that you’ve used above.

.postid-7 .ld-lesson-list,
.postid-8 .ld-lesson-list,
.postid-9 .ld-lesson-list {
	counter-reset: ld-lesson-counter;
}

Focus Mode Sidebar Navigation

This works for both the Focus Mode sidebar navigation, as well as the Course Navigation Widget. It will also add a number to the final quiz, if you have one. That’s because in the code, LearnDash treats the final quiz the same way it treats all lessons.

Update: 23 Feb 2020: Added Section numbering

/* SECTIONS */
.learndash-wrapper .ld-lesson-items {
	counter-reset: fm-sections;
}
.learndash-wrapper .ld-lesson-items .ld-lesson-section-heading {
	counter-increment: fm-sections;
}
.learndash-wrapper .ld-lesson-items .ld-lesson-section-heading::before {
	content: counter(fm-sections) ". ";
}

/* LESSONS */
.ld-lesson-navigation {
	counter-reset: fm-lessons;
}
.ld-lesson-navigation .ld-lesson-item {
	counter-increment: fm-lessons;
}
.ld-lesson-navigation .ld-lesson-item .ld-lesson-title::before {
	content: counter(fm-lessons) ". ";
	margin-right: 4px;
}

/* TOPICS */
/* Requires the code above */
.ld-lesson-navigation .ld-topic-list {
	counter-reset: fm-topics;
}
.ld-lesson-navigation .ld-topic-list .ld-topic-title {
	counter-increment: fm-topics;
}
.ld-lesson-navigation .ld-topic-list .ld-topic-title::before {
	content: counter(fm-lessons) "." counter(fm-topics);
	margin-right: 4px;
}

The 4px is for spacing after the period. You can adjust it as needed. If your site is in an RTL language, change margin-right to margin-left.

Numbered lessons & topics in LearnDash focus mode

NOTE
This looks best when using Design Upgrade Pro to show all lessons/topics by default.

Lesson Page (Number Topics & Quizzes)

If you want to number the topics and/or quizzes in the “Lesson Content” area of your LearnDash lesson pages, you can do that too. There are two things to keep in mind:

  • Choose only one of the two options below (topics or topics & quizzes), not both.
  • We can only show a single number here, which will reflect either the total topics or the total topics & quizzes (1. Topic Name, 2. Topic Name, etc.). We cannot include the lesson prefix (2.1 Topic Name, 2.2 Topic Name, etc.).
/* Only Topics */
.ld-lesson-topic-list {
    counter-reset: fm-lesson-topics;
}
.ld-lesson-topic-list .ld-topic-title {
    counter-increment: fm-lesson-topics;
}
.ld-lesson-topic-list .ld-topic-title::before {
    content: counter(fm-lesson-topics) ". ";
}

/* Topics & Quizzes */
.ld-lesson-topic-list {
    counter-reset: fm-lesson-topics;
}
.ld-lesson-topic-list .ld-table-list-item {
    counter-increment: fm-lesson-topics;
}
.ld-lesson-topic-list .ld-topic-title::before,
.ld-lesson-topic-list .ld-item-title::before{
    content: counter(fm-lesson-topics) ". ";
}

LearnDash Lesson Content with automatic numbering

BuddyBoss Theme + Platform

If you’re using the newest version of the BuddyBoss Theme, which pairs with the free BuddyBoss Platform plugin, you can use this CSS to auto-number all lessons on the LearnDash course page. This does not affect topics or quizzes, and only works on the course page.

.ld-lesson-list .ld-item-list-items {
    counter-reset: lessons;
}
.ld-lesson-list .ld-item-lesson-item {
    counter-increment: lessons;
}
.ld-lesson-list .ld-item-lesson-item .ld-item-list-item-preview .ld-item-title > span:first-of-type::before {
    content: counter(lessons) ". "; 
}

LearnDash lesson numbers added in BuddyBoss

If you want to auto-number lessons in the BuddyBoss sidebar navigation on lesson, topic & quiz pages:

.bb-lessons-list {
    counter-reset: bb-lessons;
}
.bb-lessons-list .lms-lesson-item {
    counter-increment: bb-lessons;
}
.bb-lessons-list .lms-lesson-item .bb-lesson-title::before {
    content: counter(bb-lessons) ". ";
}

NOTE
This requires the newest version of the BuddyBoss theme. It does not work with the deprecated Social Learner package or old “Boss.” theme.

Uncanny Owl Course Dashboard

If you’re using the Uncanny LearnDash Toolkit Pro, you can use the [uo_dashboard] shortcode to display a unique course dashboard for each student. By default, the this dashboard does not show lesson or topic numbers, but you can use the following CSS to add them.

Once again, you can choose to only number lessons, or both lessons and topics.

/* LESSONS */
.ultp-dashboard-lessons {
	counter-reset: uo-dash-lessons;
}
.ultp-dashboard-lesson__name > a::before {
	counter-increment: uo-dash-lessons;
	content: counter(uo-dash-lessons) ". ";
}

/* TOPICS */
/* Requires the code above */
.ultp-dashboard-lesson__topics {
    counter-reset: uo-dash-topics;
}
.ultp-dashboard-topic__name a::before {
    counter-increment: uo-dash-topics;
    content: counter(uo-dash-lessons) "." counter(uo-dash-topics) " ";
}

LearnDash lesson/topic numbering in Uncanny Course Dashboard

LearnDash “Legacy” Template

If you’re using the LearnDash “Legacy” active template, you can add sequential numbering to lessons & topics in a few places.

Course Content Table on Course Page

This will show both lesson AND topic numbers in your course content table. Lessons will have a single number before them, and topics will start with the lesson number, then have a decimal point, and then contain the topic number.

.learndash #lessons_list {
	counter-reset: lesson-counter;
}
.learndash #lessons_list div[class^="post-"] {
	counter-increment: lesson-counter;
}

.learndash #lessons_list .learndash_topic_dots ul {
	counter-reset: topic-counter;
}

.learndash #lessons_list .learndash_topic_dots .topic_item span {
	display: flex;
}

.learndash #lessons_list .learndash_topic_dots .topic_item span::before {
	counter-increment: topic-counter;
	content: counter(lesson-counter) "." counter(topic-counter);
	margin-right: 10px;
}

Course Navigation Widget

If you’d like to add lesson numbers to the Course Navigation Widget, you can use the following CSS. This works best when using the Design Upgrade Pro plugin to show all lessons/topics/quizzes by default (removing the open/close arrows).

Feel free to just use the lesson numbering, or both lesson & topic numbering.

/* ALWAYS REQUIRED */
.learndash_navigation_lesson_topics_list {
	counter-reset: nav-lesson-counter;
}
.learndash_navigation_lesson_topics_list .list_lessons {
	counter-increment: nav-lesson-counter;
}

/* LESSONS */
.learndash_navigation_lesson_topics_list .lesson a {
	display: flex;
}
.learndash_navigation_lesson_topics_list .lesson a:before {
	content: counter(nav-lesson-counter) ". ";
	margin-right: 5px;
}

/* TOPICS */
.learndash_navigation_lesson_topics_list .learndash_topic_widget_list ul {
	counter-reset: nav-topic-counter;
}
.learndash_navigation_lesson_topics_list .learndash_topic_widget_list .topic_item span {
	display: flex;
}
.learndash_navigation_lesson_topics_list .learndash_topic_widget_list .topic_item span:before {
	counter-increment: nav-topic-counter;
	content: counter(nav-lesson-counter) "." counter(nav-topic-counter);
	margin-right: 8px;
}

And that’s how you automatically add lesson & topic numbers to your LearnDash content, in a variety of applications. Please let me know if you’ve successfully used this on your LearnDash site, and send me a screenshot if you can. I’d love to include some examples.

Examples

JTT Academy

Justin from the JTT Academy was kind enough to share how he’s using the code with LearnDash 3.0 on both the course page & in the Focus Mode sidebar. He’s also utilizing our Design Upgrade Pro plugin 😍.

JTT Academy site, numbered lessons on course page

JTT Academy’s course content listing

JTT Academy site, numbered lessons & topics in Focus Mode

JTT Academy’s Focus Mode sidebar

Previous

How to Change the LearnDash Focus Mode Logo URL

Next

Course Pagination vs. All Lessons on One Page: Which is Best?

8 Comments

  1. Hi Dave,
    thank you very muck for this trick, I can’t say you how much your free advice encourage me to purchase your awesome plugins 🎉
    https://i.imgur.com/tGWmI9C.png

  2. Awesome stuff! Heading over to buy the plugin.

    Q: Appears from JTT Academy example that numbering changes between course content listing and Focus Mode sidebar depending on steps completed?

    If that is accurate, is there a way to retain initial numbering on course content listing as it does in Focus Mode?

    Thanks, Dave!!

    • Dave, it might depend on which numbering approach you took. But generally speaking, the numbering should be applied the same way for both. The CSS looks at how many elements are in each list, and assigns numbers (in order) to each one. So if there are 5 sections and 10 lessons, the numbers should be the same for both course content lists and focus mode sidebar.

      Can you post a screenshot of what you’re seeing that is different? And what all are you numbering?

  3. Thanks, Dave!

    I’m actually commenting on the screenshot that *YOU* posted above from JTT Academy. See how the numbering changes between content listing and Focus Mode?

    • Sorry Dave, I misread your comment. You clearly stated that 🤦‍♂️.

      I don’t have time to go back through all the code to check, but I think LearnDash uses a different format for the course content lists as they do for the Focus Mode. That’s why quizzes are numbered in Focus Mode but not in the course content lists.

      I don’t believe there’s a way around that (if there was, I probably would’ve mentioned it or posted code for it when I published this).

      UPDATE: I stand by my above statement. I just found this line that I wrote when I published the article. This confirms it. “I have not found a way to number lesson or topic quizzes. I actually don’t think it’s possible with the current HTML that LearnDash uses.”

    • My use case is to discuss courses with students using the numbering. I don’t much care about how it shows in focus mode, but can it be made to not skip over completed sections in the course content listing?

    • Apologies, you reply wasn’t made visible until I made mine. So apparently the items changing their numbering are quizzes.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén