View Categories

Focus Mode

NOTE: This feature was introduced in LearnDash 3.0 and works with the LearnDash 3.0 template. This feature does not work with the Legacy template.

Focus Mode aims to eliminate distractions and streamline your user’s learning experience – increasing learning retention and completion rates.

Where It’s Applied #

Focus Mode is applied to the following types of LearnDash pages:

Your Course page will not change. It will continue to use the layout that you have chosen for your WordPress theme.

What It Does #

When you enable Focus Mode, here is what will change on your site:

  • Focus Mode is applied on all screen sizes (desktop, tablet and mobile)
  • Main navigation and footer elements are removed from the page
  • Any sidebars, if present, are also removed from the page
  • Course navigation is always visible in a sidebar tray
  • Course progress is always visible at the top of the screen
  • Next/Previous lesson and topic navigation is always available at the top of the screen
  • Mark Complete button is always visible at the top of the screen
  • User’s avatar is shown in the top navigation, along with Course Home and Logout links

Here’s what Focus Mode looks like on a desktop:

LearnDash Focus Mode, desktop example
Example of Focus Mode applied on desktop

Here’s what it looks like on a mobile device:

Focus Mode applied on mobile
Example of Focus Mode applied on mobile
Focus Mode mobile menu tray
Focus Mode’s mobile menu tray

Enable Focus Mode #

There are three important steps in order to enable focus mode:

  1. You must be using LearnDash 3.0 or higher
  2. You must be using the LearnDash 3.0 template
  3. You need to enable the Enable Focus Mode option in the LearnDash General Settings

Focus Mode Content Width #

When Focus Mode is enabled you have the option to specify the width of the content container. This refers to the width of the actual lesson content and not the width of Focus Mode itself, which will still take up the full screen.

The options include:

  • Default (960px) –Recommended
  • Narrow (768px)
  • Wide (1180px)
  • Extra-wide (1600px)
  • Full-width

Focus Mode Sidebar Position #

Introduced in version 4.1.0, you can choose to have the sidebar in Focus Mode set to either the left or right side of the screen.

While not required, we recommend uploading a logo to use with Focus Mode. This logo will appear in the top-corner of all lesson, topic and quiz pages when focus mode is enabled.

To upload a logo:

  1. Navigate to LearnDash LMS > Settings
  2. In the Design and Content Elements section, look for Logo Upload
  3. Click the Select Image button
  4. Choose an image from your Media Library, or upload a new one
  5. Click Use This Image at the bottom
  6. Be sure to save your changes

You can remove your image by clicking the X, or upload a new one by repeating the steps above.

Logo used in focus mode

Focus Mode Menu #

At the top-right of Focus Mode there is a custom menu that appears when hovering over the profile image (NOTE: the image that is displayed is taken from Gravatar). By default there are two menu choices:

  • Course Home – this takes the user back to the course page
  • Logout – this logs the user out of the site

Adding Menu Items #

You can add as many custom menu items as you want to the Focus Mode Menu:

  1. Navigate to Appearance > Menus
  2. Click the Create a New Menu link
  3. Under Menu Settings, select LearnDash: Focus Mode Dropdown
  4. Create/add your new menu items
  5. Click Save Menu

NOTE See the WordPress Menu User Guide if you do not already know how to create a menu in WordPress. Any menu item that you add to the Focus Mode Menu will display between the default Course Home and Logout menu options. For example, if you added two new menu items then they would look like this:

At this point, when using Focus Mode, we don’t recommend adding sub-menu items since this mode does not support a hierarchical display unlike the usual navigation menus. The Focus Mode Menu does not distinguish between Parent Items and Child Items, i.e., main menu items and sub-menu items.

For example, if you add one menu item and a sub-menu item below that:

Both items will display on the same level, one on top of the other, as shown below:

FAQs #

The logo in Focus Mode links to my homepage, can I change this?

Yes. You can use these filters for modifying the Focus Mode logo URL.

How do I enable comments for Focus Mode?

If you want WordPress comments to be visible in LearnDash Focus Mode, then you can enable them by following these steps:
1. Navigate to LEARNDASH LMS > COURSES > SETTINGS
2. Scroll down until you come to the Course Custom Post Type settings
3. Under Editor Supported Settings, select Comments

4. Click Save
5. Navigate to SETTINGS > DISCUSSION in WordPress to verify comments are enabled there as well
6. Add the code below to your theme’s functions.php file:

/*** Code to activate comments for LearnDash elements.*/
add_filter( 'learndash_focus_mode_comments', 'learnwithbisht_learndash_focus_mode_comments', 10, 2 );
function learnwithbisht_learndash_focus_mode_comments( $closed, $post ) {
/** * Code to activate comments for course. */
if( 'sfwd-courses' === $post->post_type ) { $closed = 'open'; }
/** * Code to activate comments for lesson. */ if( 'sfwd-lessons' === $post->post_type ) { $closed = 'open'; } /** * Code to activate comments for topic. */ if( 'sfwd-topic' === $post->post_type ) { $closed = 'open'; } /** * Code to activate comments for quiz. */ if( 'sfwd-quiz' === $post->post_type ) { $closed = 'open'; } return $closed;
}

Updated on December 18, 2024