LDX Design - LearnDash Design & Tutorials

By default, LearnDash loads all of its CSS files on every single page of your WordPress site. But many of your pages don’t include any LearnDash elements, and therefore don’t need this CSS.

This article will explore a few different ways to conditionally load LearnDash styles only on the pages that need it.

IMPORTANT
This is highly dependent on your specific setup, and may not work for everyone. Particularly, if you’re using shortcodes and/or Gutenberg blocks on non-LearnDash pages, the default code here will cause problems. You’ll need to customize it to also include those other pages where you’re using shortcodes, blocks or widgets in a sidebar.

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

By Dave Warfel

On December 26, 2019

In Opinion

I recently crafted some CSS to automatically number lessons and/or topics and/or quizzes on LearnDash course & focus mode pages. The code works great, but Antonio from the LearnDash Facebook group pointed out one problem—it doesn’t work when using pagination.

This got me thinking… is pagination even a good idea? If you have 50+ lessons, surely breaking them up with pagination must be the way to go, right? What about courses with over 100 lessons?

I have a clear opinion on this, but I also did some research to back me up.

Here are the 3 reasons why I don’t recommend pagination for any course, no matter the length.

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

By Dave Warfel

On December 24, 2019

In Tutorials

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.

How to Change the LearnDash Focus Mode Logo URL

By Dave Warfel

On November 24, 2019

In Tutorials

When Focus Mode first came out in LearnDash 3.0, you could add your logo to the header of Focus Mode, but it didn’t link anywhere. It was just a static image.

Starting in LearnDash 3.1, the logo now automatically links back to your site’s homepage. Personally, I see this as an improvement, but… what if you want it to link somewhere else? Or remove the link entirely and go back to how it was prior to 3.1 (not recommended)?

I’ll walk you through the steps on how to change the URL of the LearnDash Focus Mode logo, as well as provide a few examples.

LearnDash Content Width & Page Builders

By Dave Warfel

On November 23, 2019

In Tutorials

If you’re using a page builder like Elementor or Beaver Builder with LearnDash, you might be having an issue with your LearnDash course page. The content you add via Elementor is centered on the page, but the LearnDash progress bar at the top, and the “Course Content” table at the bottom, are stretched out to 100% of the screen.

Take a deep breathe. I’ll show you a really simple fix that takes under a minute.

Create a LearnDash Course Page Template with Elementor Pro

By Dave Warfel

On November 23, 2019

In Tutorials

If you’re using Elementor with LearnDash, and you like to tinker with your layouts, this one’s for you. We’re going to walk you through setting up a course page template using Elementor Pro’s Theme Builder. This only works with the Pro version, so if you’re still on free and want to give this a try, upgrade to Pro →

Hide Course and/or Topic Name in LearnDash Breadcrumbs

By Dave Warfel

On November 19, 2019

In Tutorials

If you have really long course names, it can cause an issue when they are displayed in the LearnDash breadcrumbs, especially in focus mode. And since you can get back to the course page by clicking on the course title in the sidebar navigation, you might want to remove the course name from the breadcrumbs. This article will show you how to do that with CSS.

Example of long course name in LearnDash breadcrumbs

Build Custom Styles for LearnDash Quiz Questions

By Dave Warfel

On September 21, 2019

In Tutorials

Have you ever wanted your answers displayed inline (next to each other) instead of stacked? How about using an actual blank line for fill-in-the-blank questions?

In this tutorial, I’ll explain how you can use custom CSS to design your quiz questions in various ways.

Create a Dark Mode for LearnDash Focus Mode

By Dave Warfel

On August 27, 2019

In Tutorials

A few people have asked me if I could create a “dark mode” for LearnDash’s focus mode. The answer is yes, but it does come with a few caveats. Overall though, I was able to replicate the same colors in YouTube’s dark mode and apply them to the LearnDash Focus Mode experience.

LearnDash focus mode dark mode example

If you’re interested in using a dark mode with LearnDash, I’ll provide you with the custom CSS below.

LearnDash post types in Elementor single template

How to Enable Elementor Templates for LearnDash Courses, Lessons & Topics

By Dave Warfel

On August 27, 2019

In LearnDash Setup

The Elementor page builder has now surpassed 5 million active installs, making it arguably the most popular WordPress page builder out there. And for good reason.

It can be a powerful tool for designing beautiful landing pages, including those used in your online courses. Since LearnDash doesn’t provide much in the way of design for course, lesson & topic pages, Elementor is a great tool to use alongside LearnDash.

The Big Problem: Why can’t you select the course, lesson or topic post type when creating a “Single” Elementor template with the Theme Builder?

Thankfully, there’s a fairly easy solution. I’ll explain the two main steps below.