Course Layouts

BuddyX Pro transforms LearnDash courses with modern, customizable layouts. Create stunning course pages with cover images, custom features, instructor profiles, and flexible content areas.

What You Can Do

Customize every aspect of your course appearance:

• Add Cover Images - Beautiful header backgrounds for courses and groups
• Highlight Features - Icon-based feature lists with custom text
• Showcase Instructors - Multiple instructor profiles with avatars
• Display Progress - Show enrollment counts and completion status
• Customize Cards - Control course card appearance in grids
• Style Headers - Rich course headers with breadcrumbs
• Control Layouts - Grid, list, or custom column layouts
• Show Participants - Display enrolled students with avatars

Single Course Page Layout

BuddyX Pro completely redesigns the single course page for better visual appeal and information hierarchy.

Course Header Components

The enhanced course header includes:

Element	Description	Customizable
Cover Image	Full-width background image	Yes - per course
Breadcrumbs	Navigation path to course	Yes - global toggle
Course Title	Large, prominent heading	Automatic
Short Description	Brief course overview	Yes - per course
Enrollment Count	Number of enrolled students	Automatic
Instructor Profiles	Avatars and names with links	Automatic
Last Updated Date	Most recent modification	Automatic

Header Layout Structure

┌─────────────────────────────────────────────┐
│                                             │
│            [Cover Image Background]          │
│                                             │
│  Breadcrumbs > Courses > Web Development    │
│                                             │
│  Web Development Fundamentals               │ ← Title
│                                             │
│  Learn HTML, CSS, and JavaScript from       │ ← Short Description
│  scratch to build modern websites           │
│                                             │
│  👥 247 students                            │ ← Enrollment
│                                             │
│  [Avatar] [Avatar] John Doe, Jane Smith     │ ← Instructors
│                                             │
│  🏆 Last updated January 25, 2026           │ ← Updated Date
│                                             │
└─────────────────────────────────────────────┘

Adding Cover Images

Cover images create visual impact and help students identify courses.

For Courses

1. Edit Your Course

   • Go to LearnDash LMS → Courses
   • Click on course to edit

2. Find Cover Image Meta Box

   • Look in the right sidebar
   • Find Course Cover Image box

3. Upload Image

   • Click Set cover image button
   • Choose from Media Library or upload new
   • Click Set cover image again to confirm

4. Save Course

   • Click Update button
   • View course page to see cover

For LearnDash Groups

1. Edit Your Group

   • Go to LearnDash LMS → Groups
   • Click on group to edit

2. Find Cover Image Meta Box

   • Right sidebar
   • Find Group Cover Image box

3. Upload Image

   • Click Set cover image button
   • Select or upload image
   • Confirm selection

4. Save Group

   • Click Update button

Cover Image Specifications

Property	Recommendation	Notes
Dimensions	1920×600px	Minimum width 1200px
Aspect Ratio	3.2:1	Wider than standard hero
File Format	JPG for photos, PNG for graphics	WebP for best performance
File Size	Under 200KB	Compress before upload
Safe Area	Center 60%	Sides may crop on mobile

Image Tips:

• Use high-quality, relevant images
• Avoid text in images (use overlays instead)
• Ensure good contrast with white text
• Test on mobile devices
• Consider dark overlay for readability

Removing Cover Images

1. Edit the course/group
2. In the cover image meta box
3. Click Remove listing image
4. Update course/group

Effect:

• Header still displays but with solid color background
• All other header elements remain

Custom Course Features

Highlight what students receive or learn with icon-based feature lists.

Enabling Custom Features

1. Edit Course

   • Go to LearnDash LMS → Courses
   • Edit your course

2. Find Custom Course Features Meta Box

   • Usually in the main content area
   • Under Course Settings tab

3. Enable Features

   • Check Enable checkbox
   • Features section expands

Adding Features

1. Select Icon

   • Click icon dropdown
   • Choose from 500+ Font Awesome icons
   • Icons are categorized and searchable

2. Enter Feature Text

   • Type feature description
   • Keep it short (5-10 words)
   • Be specific and benefit-focused

3. Add More Features

   • Click Add Feature button
   • Repeat for each feature
   • Supports unlimited features

4. Reorder Features

   • Drag and drop rows
   • Most important features first

5. Delete Features

   • Click × button on row
   • Feature removed immediately

6. Save Course

   • Click Update button

Feature Display Location

Custom features appear on single course page:

• Below course content
• Above lesson list
• In a styled grid layout
• Icons on the left, text on right

Layout Example:

What You'll Learn
┌──────────────────────────────────┐
│ 📹 12 hours of video content     │
│ 📄 15 downloadable resources     │
│ 🏆 Certificate of completion     │
│ ♾️  Lifetime access              │
│ 📱 Access on mobile and desktop  │
└──────────────────────────────────┘

Feature Ideas by Course Type

Programming Courses:

• 💻 50+ coding exercises
• 🎓 Build 5 real-world projects
• 📚 Downloadable code snippets
• ⏰ 20 hours of content
• 🏆 Certificate upon completion

Business Courses:

• 📊 15 business templates
• 💼 Case studies from Fortune 500
• 🎯 Actionable frameworks
• 👥 Lifetime community access
• 📈 Results-focused training

Creative Courses:

• 🎨 Project-based learning
• 📷 20+ design templates
• 🖼️ Portfolio examples included
• 🎬 Step-by-step video tutorials
• 💾 Software setup guides

Language Courses:

• 🗣️ Conversational practice
• 📖 Grammar cheat sheets
• 🎧 Audio lessons
• 📝 Quizzes and exercises
• 🌍 Cultural context lessons

Instructor Profiles

BuddyX Pro automatically displays instructor information on course pages.

How Instructors Are Detected

The theme pulls instructors from three sources:

1. Course Author (WordPress user who created course)
2. LearnDash Instructor IDs (course meta: _ld_instructor_ids)
3. Instructor Role Plugin (if using Instructor Role for LearnDash)

All three are combined and de-duplicated automatically.

Instructor Display

In Course Header:

• Up to 3 instructor avatars (40×40px)
• All instructor names as clickable links
• Links go to instructor archive page

Instructor Archive Page: Shows when clicking instructor name:

• URL: yoursite.com/author/username/?post_type=sfwd-courses
• Instructor bio and avatar
• List of their courses
• Social links (if configured)

Setting Up Instructor Profiles

1. Edit User Profile

   • Go to Users → All Users
   • Click on instructor’s name

2. Complete Profile Information

   • Display Name: How name appears
   • Biographical Info: Instructor bio
   • Profile Picture: Upload via Gravatar or BuddyPress
   • Email: Contact email
   • Website: Personal/company URL

3. Add Social Links (Optional)

   • Install Yoast SEO plugin
   • In user profile, find Social Profiles
   • Add Twitter, Facebook, LinkedIn, etc.

4. Assign to Courses

   • Make user the course author, OR
   • Use LearnDash instructor meta box, OR
   • Install Instructor Role for LearnDash plugin

Multiple Instructors

To Add Multiple Instructors:

Method 1: LearnDash Meta Box

1. Edit course
2. Find LearnDash Instructor IDs meta box
3. Enter user IDs separated by commas
4. Update course

Method 2: Instructor Role Plugin

1. Install Instructor Role for LearnDash
2. Create instructor users
3. Assign instructors to courses in plugin settings

Display:

• All instructor avatars appear (up to 3 shown)
• All names listed with commas
• Example: “John Doe, Jane Smith, Bob Johnson”

Course Archive Layouts

Control how courses appear on your course listing page.

Grid Layout Options

Configure in Appearance → Customize → LearnDash → Course Columns

List View (1 Column)

Best For:

• Courses with long descriptions
• Detailed course information
• Professional/corporate training
• When you have fewer courses (under 12)

What Shows:

• Large course thumbnail (left)
• Full course title
• Complete short description
• Instructor info
• Price/enrollment button
• Categories and tags

Use Case: Corporate training portal with detailed course requirements.

Two Columns

Best For:

• Balanced layout
• Medium-sized course catalogs (12-30 courses)
• Academic institutions
• Professional certifications

What Shows:

• Medium course thumbnail
• Course title
• Truncated description (2-3 lines)
• Instructor name
• Price/button

Use Case: University department offering 20 courses across semesters.

Three Columns

Best For:

• Compact display
• Larger course catalogs (30-60 courses)
• Category-based browsing
• Visual learners

What Shows:

• Smaller thumbnail
• Course title
• Brief description (1-2 lines)
• Price/button
• Minimal instructor info

Use Case: Online learning marketplace with varied course topics.

Four Columns (Default)

Best For:

• Maximum courses visible
• Very large catalogs (60+ courses)
• Image-focused browsing
• Modern, Pinterest-style layout

What Shows:

• Small thumbnail
• Course title only
• Price badge
• Hover for more info

Use Case: Massive open online course (MOOC) platform with hundreds of courses.

Responsive Grid Behavior

BuddyX Pro automatically adjusts columns based on device:

Screen Size	4 Column	3 Column	2 Column	1 Column
Desktop (>1200px)	4 cols	3 cols	2 cols	1 col
Laptop (992-1200px)	3 cols	3 cols	2 cols	1 col
Tablet (768-992px)	2 cols	2 cols	2 cols	1 col
Mobile (<768px)	1 col	1 col	1 col	1 col

Result: Your courses always look great regardless of device.

Course Card Styling

Each course card in the grid includes standardized elements.

Standard Card Elements

┌──────────────────────────┐
│                          │
│   [Course Thumbnail]     │
│                          │
├──────────────────────────┤
│ Web Development          │ ← Title
│                          │
│ Learn HTML, CSS, and...  │ ← Description
│                          │
│ 👤 John Doe              │ ← Instructor
│                          │
│ 👥 247 Students          │ ← Enrollment
│                          │
│ [Enroll Now - $49]       │ ← Price/Button
└──────────────────────────┘

Customizing Card Content

Via LearnDash Course Grid Plugin:

1. Install LearnDash Course Grid (free on WordPress.org)
2. Go to LearnDash → Course Grid
3. Configure card elements:
   • Show/hide short description
   • Show/hide instructor
   • Show/hide enrollment count
   • Show/hide course progress
   • Button text customization

Via LearnDash Settings:

1. Go to LearnDash LMS → Settings → General
2. Find Price Type Display
3. Choose: Free, Closed, Open, Buy Now
4. This affects price badges on cards

Course Thumbnail Images

Setting Featured Images:

1. Edit course
2. Find Featured Image in right sidebar
3. Click Set featured image
4. Select or upload image
5. Update course

Recommended Specifications:

• Dimensions: 800×600px (4:3 ratio)
• File size: Under 100KB
• Format: JPG or WebP
• Consistent style across all courses

Lesson and Topic Layouts

Control the appearance of lessons and topics within courses.

Lesson Sidebar

Default: Inherits from global sidebar setting

Override Per Lesson: Lessons typically use LearnDash’s built-in layout, but you can:

1. Use Focus Mode (recommended)

   • No sidebars, distraction-free
   • Controlled by LearnDash settings

2. Use Standard Mode with sidebar

   • Go to Customizer → Sidebar → Lesson Sidebar
   • Choose layout
   • Sidebar shows LearnDash Course Sidebar widgets

Lesson Progress Display

Location: Top of lesson content

Shows:

• Lesson number in course
• Percentage complete
• Previous/Next lesson buttons
• Mark complete button

Styling: BuddyX Pro applies consistent progress bar styling matching theme colors.

Topic Display

Topics are sub-lessons within a lesson.

Default Display:

• Nested under parent lesson
• Indented in course content list
• Same layout options as lessons
• Numbered sequentially

Best Practice: Keep topics focused on single concepts for better learning flow.

LearnDash Groups Layout

Groups bundle multiple courses together (like “bundles” or “memberships”).

Group Page Components

Similar to course pages with:

• Group cover image
• Group title and description
• Group leaders (instructors)
• Member count
• List of included courses
• Enrollment button

Group vs Course Differences

Element	Courses	Groups
Cover Meta	_course_image_id	_group_image_id
Instructors	Multiple sources	Group leaders
Enrollment	Students	Users/Members
Content	Lessons/topics	Courses
Progress	Lesson completion	Course completion

Progress Tracking Display

BuddyX Pro enhances how progress is displayed throughout the learning experience.

Course Progress Bar

Location: Student dashboard, course cards

Shows:

• Percentage complete (0-100%)
• Colored progress bar
• “Not Started,” “In Progress,” or “Completed” badge

Styling:

• Theme primary color for progress
• Secondary color for incomplete
• Success green for completed

Lesson Completion

Location: Within course content

Shows:

• Checkmarks for completed lessons
• Play icons for in-progress
• Lock icons for unavailable
• Estimated time per lesson

Quiz Results

Location: After quiz completion

Shows:

• Score percentage
• Pass/fail status
• Correct/incorrect answers (if enabled)
• Certificate link (if passed and certificates enabled)

Certificate Integration

Display certificates for completed courses.

Enabling Certificates

1. Create Certificate Template

   • Go to LearnDash → Certificates
   • Click Add New
   • Design certificate with shortcodes
   • Publish certificate

2. Assign to Course

   • Edit course
   • Find Course Settings → Associated Certificate
   • Select your certificate template
   • Update course

3. Set Criteria

   • In course settings
   • Enable Certificate Threshold
   • Set minimum quiz score (optional)
   • All lessons must be complete

Certificate Display

Where Certificates Appear:

• Student dashboard (after course completion)
• Course page (if completed)
• User profile (via shortcode)

BuddyX Pro Enhancements:

• Download button with PDF icon
• Print button
• Share certificate option (if using sharing plugin)

Quiz Styling

BuddyX Pro applies modern styling to LearnDash quizzes.

Quiz Elements Styled

• Question Cards: Clean, card-based design
• Answer Choices: Clear radio/checkbox buttons
• Submit Button: Theme-styled primary button
• Results Screen: Formatted score display
• Timer: Prominent countdown (if enabled)
• Progress: Question X of Y indicator

Quiz Types Supported

All LearnDash quiz types are styled:

• Single choice
• Multiple choice
• Free text
• Fill in the blank
• Essay
• Sorting choice
• Matrix sorting

Focus Mode Compatibility

BuddyX Pro fully supports and enhances LearnDash Focus Mode.

Focus Mode Features

What BuddyX Pro Adds:

1. Dark Mode Toggle

   • Sun/moon icon in header
   • Toggles dark theme
   • Saved per user

2. Improved Sidebar

   • Better course navigation
   • Mobile-friendly toggle
   • Progress indicators

3. Video Player Integration

   • Full-width video display
   • Better controls visibility
   • Responsive sizing

4. Reading Optimization

   • Improved typography
   • Better line spacing
   • Optimal content width

Enabling Focus Mode

Globally:

1. Go to LearnDash LMS → Settings → Courses
2. Find Course Navigation
3. Select Focus Mode
4. Save settings

Per Course:

1. Edit course
2. Course Settings meta box
3. Course Navigation → Focus Mode
4. Update course

Dark Mode in Focus Mode

How It Works:

1. Student enters Focus Mode
2. Clicks moon icon (top right)
3. Dark theme activates
4. Preference saved in browser cookie
5. Persists across lessons

Customizing Dark Mode: Dark mode colors inherit from Customizer → Skin → Dark Mode settings.

Common Questions

How do I change course card hover effects?

BuddyX Pro applies hover effects automatically:

• Slight scale increase
• Shadow enhancement
• Smooth transition

To customize, use CSS in child theme:

.ld_course_grid .thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Can I hide the enrollment count?

Yes, via LearnDash Course Grid plugin:

1. Install plugin
2. Go to LearnDash → Course Grid
3. Uncheck Show Enrolled Count
4. Save settings

How do I add course prerequisites to the layout?

Prerequisites are shown automatically if configured:

1. Edit course
2. Course Settings → Prerequisites
3. Select required courses
4. Prerequisites display on course page

Can I customize the “Enroll” button text?

Yes:

1. Go to LearnDash LMS → Settings → General
2. Find Custom Button Labels
3. Change “Take This Course” text
4. Save settings

How do I show course duration?

Install LearnDash Course Grid plugin:

1. Enables duration field in course settings
2. Enter duration (e.g., “8 weeks”)
3. Duration displays on course cards

Recommended Configurations by Course Type

Video-Heavy Courses

Layout Settings:

• Course Columns: 3-4 columns
• Single Course: No sidebar
• Lessons: Focus Mode enabled
• Progress: Visible on all pages

Why: Maximizes video player space, minimal distractions.

Text-Based Courses

Layout Settings:

• Course Columns: 2 columns
• Single Course: Right sidebar
• Lessons: Standard mode with sidebar
• Custom Features: Emphasize reading materials

Why: Sidebars provide navigation, two-column provides readable line length.

Quiz-Focused Certification

Layout Settings:

• Course Columns: List view
• Single Course: Both sidebars
• Lessons: No sidebar
• Certificate: Prominently displayed

Why: Detailed course info, quizzes need focus, certificates are the goal.

Community Learning

Layout Settings:

• Course Columns: 3 columns
• Single Course: Right sidebar (BuddyPress widgets)
• Lessons: Focus Mode
• Enable: Course participants display

Why: Community engagement via sidebars, focused learning in lessons.

Related Settings

• LearnDash Setup - Initial configuration
• LearnDash Dashboard - Student dashboard
• Sidebar Layouts - Sidebar configuration
• Dark Mode - Dark mode settings

---

Got a question? We’re a friendly team - happy to help.

• Visit our Documentation Portal
• Email Support: support@wbcomdesigns.com
• Include: Screenshots, BuddyX Pro version, LearnDash version