LifterLMS Focus Mode: Distraction-Free Lessons Explained

A lesson page that carries your full website header, a blog sidebar, a newsletter pop-up and a footer full of links is a lesson page that invites students to wander off. LifterLMS focus mode strips that away and gives enrolled students a clean, app-like learning view with the course outline beside the content.

Focus mode arrived in LifterLMS 10.0 and is part of the free core plugin. This guide explains how to enable it for the whole site or a single course, what it changes, how it gets along with your theme and page builder, and what developers can customize. Labels and behaviour were checked against the LifterLMS 10.3 source.

What LifterLMS focus mode changes

With focus mode on, lessons and quizzes no longer load inside your theme's page layout. LifterLMS uses its own full-page template instead. The student sees:

• A slim header with a Back to Course link (on quizzes, a link back to the lesson), a course progress bar, and Previous Lesson and Next Lesson buttons. If the next lesson is locked by drip or prerequisites, the button is shown as locked with the reason in a tooltip.
• A Lessons sidebar with the course outline, sections collapsible, so students can see where they are and jump around. A toggle collapses the sidebar, and the browser remembers the choice.
• The lesson title and content in a centred column.
• A footer with the Mark Complete button, with a separate footer layout on small screens so the button stays easy to reach.

What disappears is your theme's header, navigation menu, sidebars, widgets and footer. Your theme's stylesheet still loads, so fonts and button styles carry through, but the page structure is LifterLMS's.

The LifterLMS focus mode documentation describes it as removing navigation, headers, footers and unrelated widgets so the lesson is the only thing on screen. That is accurate, with one caveat covered in the compatibility section below: things that other plugins print into every page footer can still appear.

How to enable focus mode for all courses

1. Go to LifterLMS > Settings > Courses.
2. In Course Settings, tick Focus Mode.
3. Choose a Focus Mode Content Width: Full Width, Extra Wide (1600px), Wide (1180px), Default (960px) or Narrow (768px).
4. Choose a Focus Mode Sidebar Position: Left or Right.
5. Save.

Default (960px) suits text and video lessons. Narrow works well for reading-heavy courses, because long lines are harder to read. Wide and Full Width are for lessons with large diagrams, code or embedded tools.

How to enable or disable it for one course

Each course can override the global setting.

1. Edit the course and find the Course Options box.
2. On the General tab, set Focus Mode to Enable, Disable or Inherit Global Setting. The inherit option shows whether the global setting is currently enabled or disabled.
3. When focus mode is enabled or inherited, you can also set the course's own content width and sidebar position, or leave them to inherit.
4. Update the course.

This makes gradual rollouts easy: leave the global setting off, enable focus mode on one course, and compare completion rates. Our article on improving course completion in LifterLMS covers what else moves that number.

Who sees focus mode

Focus mode applies to lessons and quizzes, and only to people who are actually taking the course:

• Enrolled students see the focus mode layout.
• Visitors and non-enrolled users see the normal theme layout, including on free preview lessons. That is deliberate: the preview page is a sales page, and it should keep your navigation and calls to action.
• Administrators and LMS Managers see focus mode whether or not they are enrolled, so you can check it while building.

When testing, use a real student account in a private window. Previewing as an admin shows the layout, but not what a non-enrolled visitor sees.

Theme and page builder compatibility

Because focus mode replaces the page template, compatibility questions are different from usual.

Classic themes

Your theme's header, footer and sidebars are not used. The page still calls the standard WordPress head and footer hooks, so the theme's CSS loads and theme typography and button styles apply. Occasionally a theme styles elements in a way that clashes with the focus mode layout, for example forcing a background colour on the body. A few lines of CSS scoped to the llms-focus-mode body class fix this.

Block themes

Focus mode always uses LifterLMS's PHP template, not a block template, for a stable layout. Any single lesson template you designed in the Site Editor is ignored while focus mode is on. Blocks inside the lesson content render normally, and LifterLMS 10.2.1 fixed interactive blocks such as tabs not working in focus mode, so keep LifterLMS up to date.

Page builders

Content built with a page builder inside the lesson itself is output through the normal WordPress content filter, so it generally displays. Theme-builder templates that wrap lessons (a custom header or a single lesson layout designed in a builder) are bypassed. If your lessons depend on a builder template for structure, test carefully or keep focus mode off for those courses. For builder-specific advice, see LifterLMS with Elementor.

Things that still appear

Anything a plugin adds to every page through the footer hook can still show: cookie banners, chat widgets, pop-ups, accessibility toolbars. Most of those tools let you exclude URLs or post types. Decide which ones belong in a lesson. A cookie banner does; a sales pop-up does not.

Customizing focus mode (for developers)

Focus mode is built to be adjusted without editing core files.

• Template override. Copy templates/single-lesson-focus.php from the plugin into your-theme/lifterlms/single-lesson-focus.php and edit it there. Overrides need maintenance when LifterLMS updates the template; the 10.2.1 release changed it, for example.
• Turning it on or off by rule. The llms_is_focus_mode_enabled filter receives the result and the post ID.
• Adding post types. The llms_focus_mode_post_types filter lists the post types that can use the template (lessons and quizzes by default). Add-ons can use it for their own content.
• Classes and content. llms_focus_mode_content_classes and llms_focus_mode_lesson_content_classes change wrapper classes, and the llms_focus_mode_the_content action outputs the content, so a theme can replace the renderer.

For example, to keep focus mode for lessons but show quizzes in the normal theme layout, add this to a small custom plugin:

<?php
add_filter( 'llms_is_focus_mode_enabled', 'llmsx_no_focus_mode_on_quizzes', 10, 2 );

function llmsx_no_focus_mode_on_quizzes( $enabled, $post_id ) {
	if ( 'llms_quiz' === get_post_type( $post_id ) ) {
		return false;
	}
	return $enabled;
}

Our guide on customizing LifterLMS without breaking updates explains where code like this should live.

Common mistakes and troubleshooting

• "Focus mode is not working." You are probably testing as a non-enrolled user or on a free preview lesson. Enroll a test student.
• Turned it on, nothing changed. The course has Focus Mode set to Disable in Course Options, which overrides the global setting. Or a full-page cache is serving old pages; clear it.
• Students cannot find the menu. That is the point, but give them a way out. Back to Course is always there; add a link to the student dashboard in the course content or the lesson itself if your students expect one.
• Lesson layout looks squeezed. Content designed for a full-width theme layout may need Wide or Full Width.
• Custom lesson template disappeared. Focus mode bypasses theme and Site Editor lesson templates by design.

Frequently asked questions

Is focus mode a paid add-on?

No. It is included in the free LifterLMS core plugin from version 10.0.

Does focus mode work on mobile?

Yes. The layout is responsive, the sidebar can be collapsed, and the Mark Complete button has its own footer on small screens.

Can I use focus mode on some courses only?

Yes. Leave the global setting off and set Focus Mode to Enable in each course's Course Options, or the other way round.

Does focus mode hide the WordPress admin bar?

No. The admin bar follows the user's WordPress profile setting. Students normally do not see it unless your site shows it to all logged-in users.

What to do next

Enable focus mode on one course, take three lessons as a test student on desktop and phone, and check that every plugin overlay you see belongs there. If it looks right, roll it out globally.

If you want a focus layout that matches your brand more closely, with your own header, extra navigation or a different outline, that is a template customization worth doing properly once. Our LifterLMS customization service builds update-safe overrides. Send us a screenshot of your lessons and we will suggest what to change.