Show LOCK icon for protected lessons in course outline
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.
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.