Its everything that a good eLearning System (LMS) should be. I may write more about it soon, but basically it does exactly what is says – providing a focused browsing experience when viewing Lessons and Topics, as well as improving the look and feel of the Course lists and pages.

LearnDash say that Focus Mode was based on extensive UX evaluation, which as a certified UX professional, I love.

Here’s an example of the same content viewed without and with Focus Mode – you can see that the legacy layout includes all of the site navigation and headers, and basically just looks like the rest of the site. With Focus Mode turned on the user gets a streamlined, focused view which makes the course content pop:

You need to be on LearnDash v3 – if you are not and you are going to upgrade PLEASE take a backup of your site first, and ideally try this in a test environment .

(If you are serious about running a successful business online you should be using a host that providing fast one click backups and staging environment. We use Kinsta who do both of theses perfectly.)

In LearnDash 3 under Settings you need to set Active Template to LearnDash 3.0 (if you upgrade by default you will be using Legacy). Once you switch will see the Focus Mode options. Then you just turn it on and pick some colours and a logo.

I started looking at LearnDash Focus Mode for a client. At first everything looked great – so much better than the legacy view. But then my client pointed out that the featured images set on lessons and topics were missing. These were an important part of the ascetic of the courses, and my client definately did not want to have to go through all the content adding the images inline. They also had some videos on the site that were added using the Avada Theme video embed option, and these were also missing.

Raising a support ticket with LearnDash gave little joy – after waiting several days for a reply, we were told that there was no way to turn featured images back on. I assumed that meant no way within the LearnDash settings, and started digging into the code. Here’s what I found:

• When you switch LearnDash Focus Mode on, the system switches to using different templates found in

  /wp-content/plugins/sfwd-lms/themes/ld30/templates/focus/

• Course and Topic content are displayed by the index.php template
• I assume this template could be overriden, but I didn’t try because…
• … the template is nicely populated with WordPress Action Hooks around key elements

In this case I wanted the featured images to be displayed within the content wrapper, so rather than using the actions, I added a filter to the WordPress the_content filter.

You just need to add this code to your functions.php file:

[php]/********LD Focus Mode Featured Images ********/
function ld_add_featured_image( $content )
{
if(is_singular(array(‘sfwd-lessons’,’sfwd-topic’)))
{
$image=get_the_post_thumbnail(null,’medium’);
return $image.$content;
}
else
{
return $content;
}
}
add_filter( ‘the_content’, ‘ld_add_featured_image’, 10);[/php]

You could tweak the code to add the image after the content, add a div with a class to wrap the image, change the image size and more.

Using the same technique, getting the video back just needed this code in functions.php:

[php]/********LD Focus Mode Featured Images ********/
function ld_add_embedded_video( $content )
{
if( is_singular(array(‘sfwd-lessons’,’sfwd-topic’)) && $post_video = get_post_meta( get_the_ID(), ‘pyre_video’, true ))
{
return ‘<div class="iajw_fusion_video">’ . $post_video . ‘</div>’ . $content;
}
else
{
return $content;
}
}
add_filter( ‘the_content’, ‘ld_add_embedded_video’, 10);[/php]

The good news here is that focus mode can still be tweaked – the actions in the template files mean you can add content in without even overriding the templates – so if you love LearnDash focus mode, but need a bit more, now you know where to start.