LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials
LearnDash focus mode dark mode example

Create a Dark Mode for LearnDash Focus Mode

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

The Complete List of LearnDash Shortcodes and How to Use Them

LearnDash comes pre-packaged with a ton of shortcodes you can use to display various information. Many LearnDash shortcodes also come with a handful of options to customize how and which information is displayed.

If you’re using WordPress 5.0’s new content editor, all of these shortcodes have been transformed into LearnDash blocks, so you can insert them using Gutenberg.

Here is your comprehensive list of all LearnDash shortcodes (including Uncanny Owl shortcodes), along with how to use them.

Read More

How to Use & Customize the LearnDash Course Grid

You’ve decided to use LearnDash for your LMS (great choice 👌). And you realized that the default courses archive page looks pretty terrible. But thankfully, you’ve discovered the LearnDash Course Grid add-on. And now you want to take it to the next level.

This post will cover all the various ways you can customize the LearnDash course grid. There are around 20 different parameters you can use to make your course grid just right, along with various ways to improve your grid’s design. Follow along as I walk you through each one, along with code samples.

Read More

LearnDash post types in Elementor single template

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

The Elementor page builder recently passed the 3 million active install mark, 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.

Read More

Design Upgrade Pro: LearnDash 3.0 Compatibility Is Here 🎉

As most of you know by now, LearnDash 3.0 was released on May 28, 2019. Several of you have asked how Design Upgrade Pro for LearnDash works with the new version.

This article will answer that question, provide an update for what we’re planning in the coming weeks & months, and lay out a timeline for when it’s all happening.

UPDATE: June 23, 2019
Design Upgrade Pro is now 100% compatible with the LearnDash 3.0 active template, including 20+ new options for focus mode, profile, tooltips & more.

Don’t worry, you can continue using all the old options with the Legacy template. Our plugin automatically detects the template you’re using, and provides different Customizer options for each 🙌.

We’re still working on videos & updating our product page, but rest assured, there are TONS of awesome features available right now for 3.0 😀.

For the rest of this article, if I mention “3.0,” it is in relation to the “LearnDash 3.0” active template, NOT version 3.0 of the LearnDash plugin. You can safely update to version 3.0 of the LearnDash core plugin.

“Legacy” vs. “LearnDash 3.0” Active Template

  • If you’re upgrading from LearnDash 2.x, you will default to the Legacy template. You can continue to use Design Upgrade just like you always have. You shouldn’t notice any difference on the front-end of your site.
  • If you’re brand new to LearnDash, and starting with version 3.0+, you’ll default to the LearnDash 3.0 template. Design Upgrade works with either template, so feel free to switch back & forth to find the design you like best.

Good News!

  • Design Upgrade Pro is now fully compatible with the LearnDash 3.0 template.
  • We will continue to support those who want to remain on the Legacy template (for as long as LearnDash provides it as an option) 👊.
  • Because LearnDash 3.0 adds several new features, there are more opportunities for improved design. We’ll be releasing new features somewhat steadily over the next several months.

Phase 1

Our first step is to port over as many existing styles from the Legacy template as we can to the 3.0 theme. Because the 3.0 design is structurally unique, and outputs some different content than the Legacy template, not all current features will be available in 3.0 (but we’ll maintain Legacy support so you can continue to use the plugin exactly as you are today, if Legacy is your jam).

The 3.0 template still supports…

  • all progress bar styles
  • most course grid styles (ribbon colors were excluded in 3.0)
  • most course navigation widget styles
  • most course content table styles (and a bunch of new ones 😍)
  • all button styles (we added hover styles in 3.0 👍)

The course content table options will look different for users of the 3.0 template. That’s because the entire layout has changed, and the same options just don’t apply. But we have added options to customize the course content table, and they’re even better than in LD2.

Phase 2

Phase 1 is complete, and there are already more options for the LD3 template than there were for Legacy. But we’ll continue to add new features over the coming months.

FEATURE REQUESTS
If you have specific feature requests for design customizations you’d like to see with the 3.0 template, please leave them in the comments.

Possible New Features for 3.0

  • Breadcrumbs: hide them globally (you can already do this on focus mode pages), change the bg color
  • Alerts: several color options for alerts, broken down by type (regular, warning/error, success/completion, etc.)
  • Profile: possibly adding 1-2 different layouts for the top section
  • Status Labels: possibly adding color options for status labels
  • Login/Registration: colors, shadows, sizing options

When?

Phase 1: Completed on June 23, 2019

Phase 2: New features will begin rolling out for the 3.0 template gradually, based on user feedback (so please comment below what you’d like to see).

Help

As always, I’m here to help. If you have any questions at all, don’t hesitate to ask. [email protected]

Thank You 🙂

And a big thank you to all of those who have supported me so far by using and/or purchasing the plugin. The reaction was far better than I ever expected, and you have inspired me to continue innovating and building a better product. So thank you 🙏.

I also greatly appreciate your patience. I know many of you were eager to get your hands dirty with those new 3.0 features. I would’ve loved to have all this ready for the launch on May 28th, but I pride myself on remarkable craftsmanship, so the wait time ensured I could produce the same quality of work you’ve come to expect.

I have done everything in my power to over-deliver 👊.

FAQ

Will you continue to add new features to the Legacy template?
Probably not. The current feature set will remain, and we’ll continue to provide support if you have questions, but all future updates & features will be dedicated to the 3.0 template.

Design Upgrade for LearnDash 2.0 (Free) (Changelog)

A lot of work went into the free version of Design Upgrade for LearnDash 2.0, which brought about compatibility with the new “LearnDash 3.0” active template. We kept track of most of the noteworthy changes we made. It’s not 100% exhaustive, but if you don’t like surprises, you can read through this list to get an idea what will happen if you’re using the “LearnDash 3.0” template and upgrade to version 2.0 of our plugin.

If you’re still on LearnDash version 2.x, or using the “Legacy” template, you will not see any changes. Things will continue to work as they always have.

Global

  • Revert font sizes & line height to the theme’s default, instead of forcing 16px & 1.5em respectively.
  • Status Indicators: Remove letter spacing & adjust font size

Focus Mode

  • Focus Mode: Sidebar Tray: Adjusted spacing throughout
  • Focus Mode: Sidebar Tray: Larger clickable areas for lessons & topics
  • Focus Mode: Sidebar Tray: Reduced the overall vertical space that items occupy
  • Focus Mode: Sidebar Tray: Added hover effect to lessons & topics
  • Focus Mode: Sidebar Tray: Flip arrow based on collapsed or open status
  • Focus Mode: Sidebar Tray: Improve legibility of collapse arrow
  • Focus Mode: Sidebar Tray: Added shadow on mobile
  • Focus Mode: Sidebar Tray: Added bottom border to course title
  • Focus Mode: Sidebar Tray: Remove icon next to course title
  • Focus Mode: Sidebar Tray: Remove border when sidebar is collapsed
  • Focus Mode: Sidebar Tray: Added background color to section headings
  • Focus Mode: Sidebar Tray: Made the final quiz function like the lessons
  • Focus Mode: Avatar/Menu: Rounded corners on menu to match course content lists
  • Focus Mode: Avatar/Menu: Added drop shadow to menu
  • Focus Mode: Avatar/Menu: Removed opacity on hover; added highlight
  • Focus Mode: Avatar/Menu: Adjusted padding on items; added min-width
  • Focus Mode: Avatar/Menu: Removed bold from menu items
  • Focus Mode: Avatar/Menu: Added dividers between menu items
  • Focus Mode: Avatar/Menu: Capitalized user’s name
  • Focus Mode: Avatar/Menu: Added hover effect on avatar
  • Focus Mode: Top Bar: Improved Prev/Next navigation buttons; added hover effect
  • Focus Mode: Top Bar: Improved hover effect for Mark Complete button
  • Focus Mode: Logo: Reduced vertical padding so the logo image is displayed larger
  • Focus Mode: Increased font size of “Back to Course” link

Profile

  • Profile: Search: Improved font sizes & styles
  • Profile: Search: Improved <input> field styles
  • Profile: Course List: Removed extra space below “Course Progress” area
  • Profile: Course List: Removed “Course Progress” label; % & steps moved to the left
  • Profile: Course List: Adjusted spacing around assignment & quiz lists

Login & Registration Modal

  • Login/Registration: Added border-radius to input fields
  • Login/Registration: Changed font sizes & colors to theme defaults
  • Registration: Fixed up input fields & spacing as best I can

Assignments

  • Assignments: Added red hover color on delete icon
  • Assignments: Removed bold from uploaded assignment title
  • Assignments: Increased length of “status” column so status fits on one line
  • Assignments: Upload: Adjusted padding for filename to allow for more characters
  • Assignments: Upload: Several font adjustments

Breadcrumbs

  • Breadcrumbs: Removed bold font weight
  • Breadcrumbs: Increased font size
  • Breadcrumbs: Mobile: Remove 100% width of status indicator

Tooltips

  • Tooltips: Styles: removed bolding, adjusted border & font size
  • Tooltips: Added a slide-up effect

Pagination

  • Pagination: Styles: Removed bolding, adjusted font size
  • Pagination: UX: Larger clickable area for prev/next arrows
  • Pagination: Center align all instances
  • Pagination: Make width consistent across all instances, and expandable to account for infinite number combinations

Progress Bar Widget

  • Progress Bar: Increased font size
  • Progress Bar: Moved stats to the left

Course Status Area

  • Course Status: Not Enrolled: Mobile: Reduced spacing

Course Content

  • Course Content: Increase font size in a few spots
  • Course Content: Mobile: Improved styles (reduced spacing, full-width clickable areas)
  • Course Content: Remove unnecessary bolding & capitalization (% complete)
  • Course Content: Added background color on hover (topics)
  • Course Content: Reduce size of grey footer area when there’s nothing in it
  • Course Content: Removed extra space above/below assignment file uploads
  • Tabs: Added hover color

Widget: User Status

  • Adjusted spacing & font sizes

Course Grid

  • Course Grid: Improved spacing throughout
  • Course Grid: Updated some text colors to inherit theme styles
  • Course Grid: Standardized border style & radius throughout
  • Course Grid: Standardized buttons to match LD3 buttons
  • Course Grid: Bolded course titles
  • Course Grid: Faded short description text color
  • Course Grid: Removed spacing/margin from empty <p> tags
  • Course Grid: Equal height columns
  • Course Grid: Buttons & progress bar aligned at bottom of grid items

Uncanny LearnDash Toolkit

  • Resume Button: Inherits default LearnDash button styling

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

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.

17 LearnDash Examples & Inspiration to Get Some Ideas Flowing

I’m still in the early stages of collecting the best LearnDash example sites, but here are some to get you started.

I hope to be expand upon this collection, and maybe even do a few mini video-style podcasts with some of these creators. I’ve tried to include important tools, themes & plugins they used, but a video walkthrough/explanation would be even more badass. One day, perhaps.

Until then, please enjoy this collection of LearnDash inspiration.

Read More

Redirect Clicks on Course Content Table for Logged-Out Users

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 by Shea Bunge 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

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

How to Clone LearnDash Courses, Lessons, Quizzes & More (Create Templates!)

Do you offer a lot of similar courses? Wouldn’t it be great if you could just clone one and start from a template? Well, thanks to a few different LearnDash add-ons, now you can.

There are 3 plugins that offer the ability to clone LearnDash content, and each one provides a different set of features. One plugin can do it all, but it’s not free. The other 2 options are free, but each have some drawbacks. I’ll evaluate the options & help you choose the best one for your situation.

Read More

Uncanny LearnDash Toolkit 3.0 Gets Major Facelift, Updates to Login Form & Transcripts

The popular Uncanny LearnDash Toolkit just released version 3.0 with an all-new admin design. Not only did they improve the design, but they worked hard on making it much easier to use, find tutorials and request support.

Uncanny Owl logo

In addition to the sexy settings panel, they’ve added new design options for the front-end login form, as well as a revamped printable transcript design.

Read More

Page 1 of 3

Powered by WordPress & Theme by Anders Norén