Skip to main content

LearnDash LMS ‘Focus Mode’ provides a small number of handy menu items in a dropdown menu. These become visible when the user hovers their mouse over the top-right corner profile image. It’s super easy to add your own custom links to this dropdown menu. In this week’s tutorial post for LearnDash Focus Mode, we’ll walk you through the steps to fully customise this user interface element for the benefit of your learners.

What Is Focus Mode In LearnDash LMS?

The LearnDash LMS Focus Mode setting was introduced with version 3.0’s release of the Learning Management System plugin for WordPress.

LearnDash developers can activate Focus Mode in order to remove peripheral elements of a WordPress theme. This can help make the user experience more streamlined, so they can concentrate better on the learning content within the lesson or topic page. Doing this makes the view more focused, with fewer distractions around the screen.

LearnDash Focus Mode provides a standard layout for all users. This includes a left-hand navigation widget and a header bar that runs along the top of the screen, known as the ‘Masthead’.

The PHP Masthead file provides plenty of customisation opportunity for LearnDash developers. It can be seen across all lesson, topic, and quiz pages running inside a course, so it’s the perfect place to provide additional links that may be required throughout the learning journey.

How To Add More Links To The LearnDash Focus Mode Menu Dropdown

Customising the menu dropdown in the Focus Mode masthead provides a great opportunity to make your most important pages available to access in just one click from their current lesson or topic page.

When you view the menu item list by default, you’ll see 2 default links. This includes a link to the course homepage, and a link to log out of the platform:

LearnDash Focus Mode Menu Dropdown

In our example, we’re going to add in a new link between these two default links which will take the user straight to their Learner Profile page on the LearnDash platform.

1. Download the ‘Focus Mode’ masthead.php template file from LearnDash

The PHP file you’ll need to edit in order to customise the masthead can be found in the ‘themes/ld30/templates/focus’ folder on LearnDash. Download the file in order to edit it.

When you’ve finished creating the custom elements in step 2, you’ll upload the file to your child theme folder, in the directory ‘learndash/ld30/focus‘.

2. Customise the masthead.php file to include a new dropdown menu item

Let’s go ahead and add in the new menu item link. To do this, you need to navigate to the area of the masthead PHP file where the links are being generated. Scroll down to line 280 and you will find a line of code that starts $menu_items[‘logout’] = array(. This is the code block that generated the logout link within the menu item dropdown. You can create your own ‘menu_items’ code block directly above this in order to create a new link.

Paste in the following code directly above the logout array:

$menu_items['profile'] = array(
'url' => 'https://www.example.com/learner-profile/',
'label' => __( 'My Learner Profile', 'learndash' ),
);

You’ll need to set your own item name specifically for this link. You can also adjust the URL so it links to the correct page. In order to change the link text in the menu itself, just change the ‘My Learner Profile’ string to whatever you wish.

3. Upload your customised masthead.php file to your Child Theme folder

Follow the directory path (outlined in step 1) to upload the updated masthead file to the child theme folder. When you refresh the page on the front end learner view, you will now see this:

The job is now complete! You can add further links if you wish to do so, or even use the dropdown menu list in other creative ways. For example, you could load additional resources in a new browser tab, or launch a UI element in a modal lightbox. This would be great for course evaluation forms!

Need some assistance with customising your LearnDash LMS? We’ve helped lots of clients create a bespoke LMS, so get in touch to see how Discover eLearning can help. You can also reach out to us on LinkedIn for more eLearning assistance.

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports organisations of all sizes to implement engaging, meaningful, and impactful eLearning solutions. Chris has over 15 years’ experience working in both private and public sector learning and development.

5 Comments

  • Aex says:

    Hi Chris, great article. The focus mode offers two links by default: 1- the course page and 2. Logout – both cannot be removed from the wordpress menu, how can I remove the link to the course at home? Can you add a snippet to hide this link ?. I tried to do it via css but got no results.

    Your time is appreciated

    Aex

    • Chris Hodgson says:

      Hi Aex,
      I’m not sure why you had no success targeting that link with CSS, it should work.
      As the Course Home link is typically the first anchor link in the list under the ld-user-menu-items span class, we should be able to target it using an ‘nth-child’ selector.

      Try:

      .ld-user-menu-items a:nth-child(1) {
      display: none!important;
      }

  • Aex says:

    It works perfect: I did not know the ‘nth-child trick’, I had never applied it.

    Best.

  • Caroline says:

    I follow your instructions to ad a third item to the LD menu and it works fine but… i did that directly in LD file (without child theme)
    Could you please explain How to create a child theme for LD ? I’m Using Divi as principal theme and I’m a little bit confused with 2 themes working together…
    Thx a lot !!!
    Caroline

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.