Breadcrumb Navigation for LearnDash
Out of the box, navigating complex courses in LearnDash can get confusing. With potentially dozens of topics, lessons and courses, it’s easy to get lost. Sidebar navigation helps, but it’s mainly for navigating within the same level rather than getting back to higher levels. What’s missing for some courses is context and being able to go up levels easily.
We ran into this challenge with a recent LearnDash project. What it needed were breadcrumb links, but without customization, theme breadcrumb generation is broken for LearnDash. The problem is WordPress usually thinks that the parent of every course, lesson and topic is “Home”. For most applications, this makes breadcrumbs almost useless.
To address this shortcoming, we created a plugin that makes it easy to navigate up levels by using breadcrumb links. Just as you would expect, every topic rolls up to a hyperlinked lesson, which rolls up to a hyperlinked course, which rolls up to a course dashboard. And at the top level is, of course, the homepage.
We know breadcrumb navigation for LearnDash would be useful to a lot of learning projects, so we’re making the plugin we created available below. There’s no cost to use it, but there’s also no support!
If you happen to use the Total theme, you’re in luck! The plugin below replaces the built-in theme breadcrumb code with custom breadcrumbs that work with LearnDash. Don’t worry, they’ll work with your other pages, posts and other content too!
For anyone not using Total, a generic plugin is available. For that version, just insert a [sfwd-breadcrumbs] shortcode wherever you want your breadcrumbs to appear. You can also hook it into your theme header, but we’ll leave it to you to figure out how to do that. The plugin should at least save you a few hours of work getting custom header breadcrumb links set up.
We hope you enjoy the plugins!
May 2016 Update: The plugins are no longer available. Please use the Uncanny LearnDash Toolkit instead.
Outstanding! Thanks so much for making this available.
Wonderful, works as expected. For those who are not too code-savvy, add to your header.php something like this:
<div id="breadcrumbs"><?php learndash_breadcrumbs() ?></div>And write some CSS for the ID if you need to.
Also I’d suggest adding some spaces into the separators at line 280:
// Separator HTML$separator = '<span class="sep">' . " <span class="fa fa-angle-right"></span> " . '</span>';
All in all though – fantastic!
Great code thanks,
You can also space out the breadcrumbs by adding some margins to the seperators
.single-sfwd-lessons .sep {margin: 0 10px}
The css class is sep so by targeting .sep with the above code I have added 10px margin to the left and right.
can someone help me out? Learndash recommended this. However I have installed both plugins and neither of them update the current breadcrumbs. I see the shortcode and have tried the php code but both of those dont replace the current one that doesn’t work as well as I dont want to put code on every single page/course/lesson/quiz if possible. any suggestions?
Hi Katie,
There may be conflict in your theme that is preventing the plugin from displaying. Are you able to turn debug on on your site (https://codex.wordpress.org/WP_DEBUG) and check for error messages?
Ken
Hi Ryan,
thanks for sharing this information.
Do you know where I can change the */course/* path.
We set LD-Courses to a different URL, tho the actual trail-anchor is not the correct one anymore.
I’ve searched everywhere but can’t find the location where to change it.
If you know where I could find it you would really help me out.
Thanks in advance.
Hi Chris,
Can you provide a bit more detail on your problem or provide a link? Is the course link that’s appearing in the breadcrumb trail not taking you to the correct course page? If that’s the issue, can you tell me what page it’s taking you to, and what page you want it to take you to? If you prefer, you can email me at ken@uncannyowl.com.
Thanks,
Ken
Hi Ken,
Thank you for building this plugin, much needed.
I also need to change the */course/* path, from the default archive page to a dedicated grid page with all the courses. I think this is one of the commands that needs to be altered
$trail[] = lms_build_anchor_links(get_post_type_archive_link( ‘sfwd-courses’ ),’courses’);
but I am not sure about what code to enter (it’s a regular page and it’s called online-workshops).
I also tried styling the breadcrumbs, but could not locate the right classes (beside the code you gave in one of the comments, which worked great). I need to style the breadcrumbs’s text and separator icon.
Thank you.
Ken, hi again 🙂
found the classes and it works great, so just the first question. thank you!
Hi Milena! To change the course path, you could do something like this:
$trail[]=lms_build_anchor_links("/mycoursedashboard","My Courses");That will insert a link to http://[yoursite]/mycoursedashboard with the text “My Courses” in the breadcrumb trail.
thank you, that worked :))
Where would you input this code?
Hi Robert! That code is no longer necessary with the Uncanny LearnDash Toolkit. You can now set the “My Courses” link text and URL from the settings panel of the LearnDash breadcrumbs module.
Huge thanks!
Thank you very much for plugin! You made my day!
Greets from Poland 🙂
Is there a way to modify the breadcrumb when just using the shortcode? I also need to change the default courses top level to a specific page, add some space, and remove or rename the Home link and maybe remove the topic name.
Hi Mark,
We really just released that code to save a few steps when creating your own breadcrumb plugin. Right now there aren’t many features and it expects customization. For anything you mentioned your best bet is to modify the code directly.
Having said that, you may see a modified version in the Uncanny LearnDash Toolkit in the next month or so that is a bit more flexible.
hi! My learndash does not allow to create child theme and therefore i cannot add uo_breadcrumbs() function in parent theme as these change will be gone once the theme is updated. I do not want to add [uo_breadcrumbs] on each and every post. Is there any other way in which it will be dynamic?
If you can’t use a child theme (which is unusual), you could potentially add the breadcrumb shortcode to something global instead (like a sidebar). Alternatively, you could create a new plugin that would allow you to override the theme without actually changing theme files.