LearnDash - Link Course Image to First Lesson | Reign Theme Fix v1.2 | JavaScript solution for direct image output

README.md

LearnDash - Link Course Image to First Lesson (Reign Theme Fix)

Makes the course featured image clickable, linking directly to the first lesson. Specifically fixed for Reign theme's .lm-course-thumbnail implementation.

Installation

Add this code to your child theme's functions.php file or use a code snippets plugin like WPCode.

What This Fixes

Reign theme outputs the course image as:

<div class="lm-course-thumbnail">
    <img src="...">
</div>

This snippet makes that entire thumbnail div clickable and links to the first lesson.

Features

• ✅ Reign Theme Specific Fix - Targets .lm-course-thumbnail div directly
• ✅ JavaScript Solution - Works even when PHP filters don't catch the image
• ✅ Access Control - Only adds link if user has access to the course
• ✅ Visual Feedback - Adds hover effect and play button overlay
• ✅ Clean UX - Cursor changes to pointer on hover

How It Works

1. Detects single course pages
2. Gets the first lesson URL
3. Checks if user has access
4. Makes the .lm-course-thumbnail div clickable via JavaScript
5. Adds hover effects and play button overlay

Requirements

• WordPress 5.0+
• LearnDash LMS
• Reign Theme
• jQuery (included in WordPress)

Version History

• v1.2 - Fixed for Reign's direct image output
• v1.1 - Added access control
• v1.0 - Initial release

License

Free to use and modify.

learndash-course-image-link.php

<?php
/**
 * LearnDash - Link Course Image to First Lesson (Reign Theme Fix)
 *
 * Add this code to your child theme's functions.php or use a code snippets plugin.
 * When users click on a course featured image, they'll be taken to the first lesson.
 *
 * @version 1.3
 * @compatibility LearnDash 3.x/4.x, Reign Theme
 */

// Add JavaScript to make Reign's course thumbnail clickable
add_action( 'wp_footer', 'reign_course_image_click_to_first_lesson' );

function reign_course_image_click_to_first_lesson() {
    // Only on single course pages
    if ( ! is_singular( 'sfwd-courses' ) ) {
        return;
    }

    $course_id = get_the_ID();
    $target_url = '';

    // Try to get first lesson
    if ( function_exists( 'learndash_get_course_steps' ) ) {
        $lessons = learndash_get_course_steps( $course_id, 'sfwd-lessons' );
        if ( ! empty( $lessons ) && is_array( $lessons ) ) {
            $target_url = get_permalink( $lessons[0] );
        }
    }

    // Try alternative method if no lessons found
    if ( empty( $target_url ) && function_exists( 'learndash_get_lesson_list' ) ) {
        $lesson_list = learndash_get_lesson_list( $course_id );
        if ( ! empty( $lesson_list ) ) {
            $first_lesson = reset( $lesson_list );
            if ( $first_lesson ) {
                $target_url = get_permalink( $first_lesson->ID );
            }
        }
    }

    // If still no URL, link to course content section
    if ( empty( $target_url ) ) {
        $target_url = get_permalink( $course_id ) . '#ld-course-content';
    }

    // Check user access
    $user_id = get_current_user_id();
    $has_access = sfwd_lms_has_access( $course_id, $user_id );
    
    // Get course price type
    $course_price_type = learndash_get_course_meta_setting( $course_id, 'course_price_type' );
    
    // Only proceed if user has access or course is free/open
    if ( $course_price_type !== 'open' && $course_price_type !== 'free' && ! $has_access ) {
        return;
    }

    ?>
    <script>
    jQuery(document).ready(function($) {
        // Target Reign's course thumbnail div
        var $thumbnail = $('.lm-course-thumbnail');

        if ($thumbnail.length) {
            // Check if it's not already wrapped in a link
            if (!$thumbnail.find('a').length && !$thumbnail.parent('a').length) {
                // Make the entire thumbnail clickable
                $thumbnail.css({
                    'cursor': 'pointer',
                    'position': 'relative'
                });

                // Add click handler
                $thumbnail.on('click', function(e) {
                    e.preventDefault();
                    window.location.href = '<?php echo esc_js( $target_url ); ?>';
                });

                // Add hover effect
                $thumbnail.on('mouseenter', function() {
                    $(this).find('img').css('transform', 'scale(1.03)');
                }).on('mouseleave', function() {
                    $(this).find('img').css('transform', 'scale(1)');
                });

                // Add title for accessibility
                $thumbnail.attr('title', '<?php echo esc_js( sprintf( __( 'Start Course: %s', 'reign' ), get_the_title( $course_id ) ) ); ?>');

                // Optional: Add play button overlay
                $thumbnail.append('<div class="course-play-overlay"><span>►</span></div>');
            }
        }
    });
    </script>
    <?php
}

// Add CSS for styling
add_action( 'wp_head', 'reign_course_image_styles' );

function reign_course_image_styles() {
    if ( ! is_singular( 'sfwd-courses' ) ) {
        return;
    }
    ?>
    <style>
    /* Make thumbnail image responsive to hover */
    .lm-course-thumbnail {
        position: relative;
        overflow: hidden;
    }
    
    .lm-course-thumbnail img {
        transition: transform 0.3s ease;
        display: block;
        width: 100%;
        height: auto;
    }

    /* Style for clickable thumbnail */
    .lm-course-thumbnail[style*="cursor: pointer"] {
        overflow: hidden;
    }

    /* Play button overlay */
    .course-play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.9);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .course-play-overlay span {
        font-size: 24px;
        color: #333;
        margin-left: 3px;
    }

    .lm-course-thumbnail[style*="cursor: pointer"]:hover .course-play-overlay {
        opacity: 1;
    }
    </style>
    <?php
}