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:
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.
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
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;
}
It works perfect: I did not know the ‘nth-child trick’, I had never applied it.
Best.
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
Hello Caroline.
If you need to set up a child theme for your Divi installation I’d recommend checking out this article: https://www.elegantthemes.com/blog/divi-resources/divi-child-theme