Breadcrumb Navigation for LearnDash

Topic_A___LearnDash_DevOut 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.

19 replies
  1. Bridie
    Bridie says:

    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!

    Reply
    • Steve
      Steve says:

      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.

      Reply
  2. katie
    katie says:

    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?

    Reply
  3. Chris
    Chris says:

    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.

    Reply
    • Ken Young
      Ken Young says:

      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 [email protected].

      Thanks,
      Ken

      Reply
  4. Milena Ruman
    Milena Ruman says:

    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.

    Reply
  5. Mark
    Mark says:

    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.

    Reply
    • Ryan Moore
      Ryan Moore says:

      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.

      Reply
  6. Saurabh
    Saurabh says:

    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?

    Reply
    • Ryan
      Ryan says:

      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.

      Reply

Comments/Questions

Please note that this is not a support forum. If you are experiencing issues on your site, please open a support ticket instead. Site-specific support questions submitted as comments will be unanswered.

Leave a Reply

Your email address will not be published. Required fields are marked *