Add Your Own Custom Buttons To The LearnDash ‘Focus Mode’ Header Area

Adding custom navigation buttons to your LearnDash LMS ‘Focus Mode’ header area (or Masthead) is easy and effective. It’s especially useful if you want to link to resources made available throughout a course, or your FAQ page. Let’s look at how we can customise the header area in Learndash LMS by adding our own custom navigation buttons.

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.

Focus Mode allows course designers to strip away many of the peripheral elements of a WordPress theme. This can include the menu navigation, sidebar widgets, footer widgets and copyright areas. This makes the view much more ‘focused’ on the learning content of the user’s course.

The Focus Mode layout is fixed for all users to a standard format, which includes a left-hand navigation widget and a header bar that runs along the top of the screen, known as the ‘Masthead’.

The Masthead provides plenty of customisation options for LearnDash developers, as it can be seen across all lesson, topic, and quiz pages running inside a course. It’s the perfect place to provide additional links to users that may be required at any point during the learning journey.

How To Customise Your Focus Mode Masthead

We’ve recently worked with a client to solve this problem by customising their Masthead. They wanted to move their FAQ page out of the learning plan itself, since the FAQ page was set up as an additional lesson page for the course. Instead, we used the customisable Masthead to make the FAQ page accessible throughout the course. Here are the steps we took to make this happen:

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. Go ahead and 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 button

For this example, we’re going to add a custom button between the green ‘Mark Complete’ button and the ‘Hello, Username’ image.

To do this, scroll to line 205 of the file and add the following code just before the user dropdown div begins:

<div class="faq-button-masthead"><a href="FAQ PAGE URL" target="_blank">Course FAQ</a></div>

We are applying our own class name, which we will hook into later with some basic CSS. Your href link should point to the page your own button needs to link to. Using  _blank as the target will ensure that the learner doesn’t accidentally click away from their current position in the course if they use the button.

With this code in place, you can upload the file to your child theme folder as detailed above. Refresh the view in Focus Mode:

That has worked great! But the link doesn’t look too good right now, sandwiched between the other masthead elements like this. So for our final step…

3. Let’s apply some styling!

For this step, you can borrow much of the CSS already used for the user dropdown element. If you’re confident using CSS styling, you can also make some additional changes to the styling of your button in order to match the branding of the overall site. (I’ve added some extra styling elements to match the blue in this site.) Here’s the final CSS code I used for the custom class:

.faq-button-masthead {
border-left: 1px solid #e2e7ed;
padding-right:1em;
padding-left:1em;
font-size: 14px;
font-weight: bold;
}
.faq-button-masthead a {
color:#00adef;
}

Here’s the final result:

You can use this simple hack to create your own Focus Mode navigation buttons to link to any page or resource – whether it’s on the site itself or anywhere else on the web!

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.