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:

• LearnDash 3.0 (course page & focus mode nav)
• BuddyBoss (course page & sidebar nav)
• Uncanny Owl Course Dashboard
• LearnDash Legacy Template

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.

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.

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) ". ";
}

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) ". "; 
}

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 “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 😍.