Overriding LearnPress Templates

This guide provides detailed instructions on how to customize LearnPress templates to match your website’s design without modifying the core plugin files.

Understanding Template Structure

LearnPress uses a template system similar to WordPress, allowing you to override the default templates by copying them to your theme.

Template Locations

LearnPress templates are located in the /learnpress/templates/ directory of the plugin. The main template folders include:

• content-course – Templates for displaying course content
• content-lesson – Templates for displaying lesson content
• content-quiz – Templates for displaying quiz content
• profile – Templates for user profiles
• checkout – Templates for the checkout process
• single-course – Templates for single course pages
• archive-course – Templates for course archive pages
• loop – Templates for course loops in archives and shortcodes

How to Override Templates

To override a LearnPress template:

1. Create a folder called learnpress in your theme directory
2. Copy the template file you want to modify from /wp-content/plugins/learnpress/templates/ to /wp-content/themes/your-theme/learnpress/
3. Maintain the same folder structure as in the original plugin
4. Modify the copied template file as needed

Template Hierarchy

LearnPress follows a template hierarchy similar to WordPress:

1. First, it looks for a template in /wp-content/themes/your-child-theme/learnpress/ (if using a child theme)
2. Then, it looks in /wp-content/themes/your-theme/learnpress/
3. Finally, it uses the default template from /wp-content/plugins/learnpress/templates/

Common Templates to Override

Course Archive Templates

To customize how courses are displayed in archive pages:

• archive-course.php – Main template for course archives
• loop/course/loop-begin.php – Beginning of course loop
• loop/course/loop-end.php – End of course loop
• loop/course/content.php – Content of each course in the loop

Single Course Templates

To customize how a single course is displayed:

• single-course.php – Main template for single course
• single-course/title.php – Course title
• single-course/content.php – Course content
• single-course/tabs/tabs.php – Course tabs
• single-course/tabs/overview.php – Course overview tab
• single-course/tabs/curriculum.php – Course curriculum tab
• single-course/tabs/instructor.php – Course instructor tab
• single-course/price.php – Course price
• single-course/buttons.php – Course action buttons

Profile Templates

To customize user profile pages:

• profile/profile.php – Main profile template
• profile/tabs/courses.php – User’s courses tab
• profile/tabs/quizzes.php – User’s quizzes tab
• profile/tabs/orders.php – User’s orders tab

Practical Examples

Example 1: Customizing Course Grid Layout

To change how courses are displayed in a grid:

1. Copy /wp-content/plugins/learnpress/templates/loop/course/content.php to /wp-content/themes/your-theme/learnpress/loop/course/content.php
2. Edit the file to modify the HTML structure

<?php
/**
 * Template for displaying course content within the loop.
 *
 * @author  ThimPress
 * @package LearnPress/Templates
 * @version 4.0.0
 */

defined( 'ABSPATH' ) || exit();

$course = learn_press_get_course();
if ( ! $course ) {
    return;
}
?>

<div class="custom-course-card">
    <div class="course-thumbnail">
        <a href="<?php echo esc_url( get_the_permalink() ); ?>">
            <?php echo $course->get_image( 'large' ); ?>
        </a>
        <div class="course-price">
            <?php echo $course->get_price_html(); ?>
        </div>
    </div>
    
    <div class="course-content">
        <h3 class="course-title">
            <a href="<?php echo esc_url( get_the_permalink() ); ?>">
                <?php echo $course->get_title(); ?>
            </a>
        </h3>
        
        <div class="course-meta">
            <span class="course-instructor">
                <i class="fas fa-user"></i> 
                <?php echo $course->get_instructor_name(); ?>
            </span>
            
            <span class="course-students">
                <i class="fas fa-user-graduate"></i> 
                <?php echo $course->get_users_enrolled(); ?> students
            </span>
        </div>
        
        <div class="course-excerpt">
            <?php echo $course->get_short_description(); ?>
        </div>
        
        <div class="course-footer">
            <a class="course-detail-link" href="<?php echo esc_url( get_the_permalink() ); ?>">
                View Course
            </a>
        </div>
    </div>
</div>

Example 2: Customizing the Course Curriculum

To change how the course curriculum is displayed:

1. Copy /wp-content/plugins/learnpress/templates/single-course/tabs/curriculum.php to /wp-content/themes/your-theme/learnpress/single-course/tabs/curriculum.php
2. Edit the file to modify the curriculum display

Example 3: Customizing the Profile Page

To change the layout of the profile page:

1. Copy /wp-content/plugins/learnpress/templates/profile/profile.php to /wp-content/themes/your-theme/learnpress/profile/profile.php
2. Edit the file to modify the profile layout

Using Custom CSS with Templates

In addition to modifying template files, you can use custom CSS to style LearnPress elements:

// Add to functions.php
function add_learnpress_custom_css() {
    wp_enqueue_style('learnpress-custom', get_stylesheet_directory_uri() . '/css/learnpress-custom.css');
}
add_action('wp_enqueue_scripts', 'add_learnpress_custom_css');

/* Custom LearnPress Styles */
.course-curriculum ul.curriculum-sections .section-content .course-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.learn-press-courses .course {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.learn-press-courses .course:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

Best Practices

1. Use a child theme for your customizations to prevent losing changes during theme updates
2. Only override the templates you need to change, not all templates
3. Keep track of your changes so you can reapply them after LearnPress updates
4. Check for template changes after updating LearnPress
5. Use version control (like Git) to manage your template customizations

Conclusion

By overriding templates, you can extensively customize the appearance of LearnPress without modifying the core plugin files. This approach ensures that your customizations will not be lost when updating the plugin.