Show LOCK icon for protected lessons in course outline

Note: This is an advanced article for users or developers familiar with PHP. It only applies to lessons created in MemberPress Course Add-on when the Courses Pro template is enabled in MemberPress → Settings → ReadyLaunch tab.

If you'd like to show a LOCK icon next to your protected lessons in the course outline on the main Courses page or lesson page, you can do so by following the instructions below.

First, you'll want to go to your server, copy the wp-content/plugins/memberpress-courses/courses/courses_classroom_section_lessons.php file and edit it in your file editor.

In your file, you need to replace this code:

<div id="mpcs-lesson-<?php echo esc_attr($lesson->ID); ?>" class="mpcs-lesson <?php
  if($has_completed_lesson) {
    echo "completed ";
  } else if(!$lesson_available || (get_post_type() == models\Quiz::$cpt && $lesson->ID != get_the_ID())) {
    echo "locked ";
  }

with this one:

<?php
$post = get_post( $lesson->ID );
$lesson_protected = MeprRule::is_locked( $post );
?>
<div id="mpcs-lesson-<?php echo esc_attr($lesson->ID); ?>" class="mpcs-lesson <?php
  if($has_completed_lesson) {
    echo "completed ";
  } else if(!$lesson_available || (get_post_type() == models\Quiz::$cpt && $lesson->ID != get_the_ID())) {
    echo "locked ";
  }
  echo $lesson_protected ? ' mpcs-lesson-protected ' : '';

Once it's done, navigate to the wp-content/themes/YOUR-CURRENT-THEME/ folder and create a new folder called memberpress and inside it another folder called courses. After that, paste the file you've just edited into that folder. The folder structure where your file is placed should look like this: wp-content/themes/YOUR-CURRENT-THEME/memberpress/courses/courses_classroom_section_lessons.php.

Next, go to WordPress Dashboard → Appearance → Customize section and add the code below:

.mpcs-lesson-protected {
  background-color: whitesmoke;
  position: relative;
}

.mpcs-lesson-protected:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(255, 255, 255, .6);
}

.mpcs-lesson-protected:hover {
  background-color: whitesmoke;
}

.mpcs-lesson-protected .mpcs-circle-regular:before,
.mpcs-lesson-protected .mpcs-lesson-link .mpcs-lesson-icon:before {
  content: '\e812'
}

That's it! Your protected lessons should now show a lock icon before their title instead of the default document icon on the course outline. Additionally, the link to the protected lesson will be disabled.

TROUBLESHOOTING:

If it's not working, you may need to check your browser's developer tools to see if any errors appear in the console.