LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Category: Tutorials Page 2 of 4

How to Change the LearnDash Focus Mode Logo URL

By

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.

LearnDash Focus Mode header image example

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.

Read More

LearnDash Content Width & Page Builders

By

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.

Read More

Create a LearnDash Course Page Template with Elementor Pro

By

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 →

Read More

Hide Course and/or Topic Name in LearnDash Breadcrumbs

By

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

Read More

Build Custom Styles for LearnDash Quiz Questions

By

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.

Read More

LearnDash focus mode dark mode example

Create a Dark Mode for LearnDash Focus Mode

By

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.

Read More

How to Award a Certificate on Completion of Multiple Courses (Certification Track)

By

On February 1, 2019

In Tutorials

I’ll briefly outline below how I made this happen, but here’s a video explaining how I set up a certification track in LearnDash. If you need to offer a certificate after the completion of multiple courses, this is for you.

Award a certificate after completing multiple courses in LearnDash

With LearnDash, it’s easy to award a certificate upon completion of one course. You can also easily provide a certificate upon completion of a quiz.

However, if you need to award a certificate upon completion of multiple courses, it’s not as easy. Here’s the best way I found how to award a certificate after completing several courses.

Creating a New Course for Just the Quiz

  1. Create a new course that just contains one quiz
  2. Set the course to FREE (this makes the course page viewable to everyone, but you have to be logged in to access it)
  3. Set course prerequisites for this course (in my case, 3 courses had to be completed in order to take a final exam to get the certificate)
  4. Apply your certificate to this course

Creating the Quiz

  1. Now create the quiz and place it within this course
  2. No prerequisites for the quiz
  3. DO NOT apply any certificates to the quiz
  4. (optional) Add in a completion percentage in order to pass the quiz (ex: they need to score a 70% or higher to pass the quiz)

This prevents them from accessing the certificate until they have scored a 70% or higher.

Use Shortcodes to Enhance the Experience

I also used some shortcodes & messages to help enhance the experience.

Place a message at the top of each prerequisite course that only shows up for those who have completed it [course_complete] message [/course_complete].

I provided a link to the final exam course, as well as a link to purchase any other courses that they might not have bought yet (example: If they only bought 1 of the 3 courses in the certificate track, they’ll have a link to buy the other 2).

If you have another way of setting this up, or any creative idea for achieving the same thing, I’d love to hear it. Please share in the comments.

Redirect Clicks on Course Content Table for Logged-Out Users

By

On January 18, 2019

In Tutorials

By default, when a visitor—anyone not logged in to your site—lands on a LearnDash course page and tries to click a link in the course content table (it could be to a lesson, topic or quiz)… the page just reloads.

LearnDash has built-in course protection, so this is in place to stop a random visitor from accessing a course that they don’t have access to. The problem is that it redirects them back to the same page they are already on, essentially just reloading the course page.

This is less than ideal. But there’s a simple way to redirect these clicks on the course content table to any page of your choice:

  • a login page
  • a sales page powered by an ecommerce or membership plugin
  • your favorite cat video (probably not the best marketing strategy 😉)

This does involve a little PHP code, but don’t let it intimidate you. I’ll walk you through it.

Use the Code Snippets Plugin

The Code Snippets plugin is an alternative to adding code to your theme’s functions.php file. I believe it’s a much safer and more organized way to maintain code, especially for beginners and non-coders.

We’ll be using this plugin to implement the code to redirect clicks on the course content table.

NOTE
It’s a good idea to use this plugin for ALL future PHP code snippets that you would otherwise put in your functions.php file. And please don’t worry about plugin overload or “Ugh, I really don’t want to add another plugin to my site…” Code Snippets will not slow down your site.

Install & Activate the Plugin

  1. In your WordPress admin area, navigate to Plugins > Add New
  2. Search for “code snippets”
  3. Install & activate the plugin (author: Shea Bunge)

WordPress Code Snippets plugin card

Code for Course Content Table Redirects

Now that you’ve got the right tool in place, let’s add the code to actually implement our redirect.

  1. Navigate to Snippets > Add New
  2. Give your snippet a title. This is just internal naming, so choose anything you’d like.
  3. In the “Code” section, we’re going to add the following:
add_filter( "learndash_access_redirect", "ldfb_content_table_redirect", 10, 2 );

function ldfb_content_table_redirect() {

	$link = "https://learndash.com/";
	return $link;

}

Where it says https://learndash.com/, you would change that to the page on your site that you want to redirect people to. For example, it could be:

  • https://yoursite.com/login/ – if you’re using a custom login page
  • https://yoursite.com/product/name-of-product/ – if you’re using an ecommerce platform like WooCommerce
  • https://courses.yoursite.com/enroll-today/ – if you have one general sales page for all of your courses (perhaps you used a page builder to create a custom landing page, and are hosting your courses on a sub-domain)

The possibilities are endless. You can use any URL in the world! 🌏

(Optional) Description & Tags

It’s totally optional, but you can give your code snippet a description and/or some tags. These are just for internal organization, so use them as you’d like… or not at all.

Run on Front-end Only

The final option is WHERE you’re going to allow this code to run. You can run it in the admin area, the front-end of your site, or both.

  • Choose Only run on site front-end

Code snippets run on front-end only checkbox

Because this code only applies to site visitors accessing your LearnDash course content table, there is no need to have it executed in the admin area. So just choose to run it on the front-end only.

Save & Activate

The final step is to click the “Save Changes and Activate” button at the bottom. Then navigate to a course page in a private browsing window (or logout of your current session) and click a link in the course content table. It should redirect you to the URL that you specified.

Customize the “Return to Course” Link in the LearnDash Navigation Widget

By

On January 12, 2019

In Tutorials

When you use the LearnDash course navigation widget, and navigate to a lesson, topic or quiz page, you’ll see a “Return to [Course]” link appear at the bottom. No surprise, this brings you back to the course page.

But what if you wanted to customize the “Return to [Course]” link?

  • 🚫 Hide the “Return to” part and just display the course title?
  • 👈 Add a back arrow before the course title?
  • 👆 Move the entire link to the top of the navigation?
  • Or just completely remove the link all together?!

You’ve come to the right place!

Read More

Page 2 of 4

← Previous

Next →

Powered by WordPress & Theme by Anders Norén