Overview
We often find that it’s easy for learners on LearnDash sites to lose course context and get buried inside large courses. LearnDash content can go pretty deep— from courses, to lessons, to topics, to quizzes— and sometimes when people are deep in a course it’s not always easy to get back out and navigate elsewhere in a course or across courses. Breadcrumb links are a great and easy way to provide that context and set of links to other levels of a LearnDash course, but most themes don’t understand the LearnDash hierarchy and so can’t generate breadcrumb links properly.
That’s where the LearnDash Breadcrumbs module in the Uncanny LearnDash Toolkit comes in. Here’s a video that explains our breadcrumb links in more detail:
Live Demo
See this module in action on our LearnDash demo site!
Usage
To get started, enabled the Breadcrumb Links module in the Uncanny Toolkit settings page of your WordPress site. Once enabled, you can use the [uo_breadcrumbs] shortcode in any page, post or widget to display a LearnDash (and WooCommerce) aware set of breadcrumbs. If you want to incorporate breadcrumbs into your theme, like in a header templates, add <uo_breadcrumbs()> to the associated PHP file.
[uo_breadcrumbs]
Settings
Out of the box, breadcrumbs for LearnDash are displayed in the following format: Home > (Course Archive Page) > (Course Name) > (Lesson Name) > (Topic Name). Since most LearnDash users will prefer a dashboard (like a page with a profile shortcode, course grid or something custom), we added fields in the Settings panel for this module that allows you to define the dashboard page name as well as the page to use. When these 2 values are set, the dashboard will replace the course archive page in the breadcrumb links. You can also change the separator in the settings (and even include HTML if you want to use Font Awesome or something similar).
How did you get the home link to show up as a house image?
The house icon is actually a customization we had done for a specific client. However, you could try this CSS on your site, which should work as long as the FontAwesome font is loaded:
.breadcrumb-trail span:first-child a span {display: none;
}
.breadcrumb-trail span:first-child a:before {
content: "\f015";
font-family: fontawesome;
}
Hi there,
I’m having a slight issue with the plugin. I’ve activated the Breadcrumbs tool, and created a shortcode in a widget.
All works well, except for its display on a “quiz” CPT. For some reason the “topic” link on the breadcrumbs is shown twice:
https://imgur.com/a/etvwg
Any ideas on a CSS code that will hide the copy of the “topic” link?
Thanks