How to Build an Online Course Platform with BricksMembers

Transform your WordPress site into a full-featured online course platform with BricksMembers. This tutorial walks you through creating a complete learning management system (LMS) with courses, modules, lessons, progress tracking, and drip content.

What you’ll build:

• Hierarchical course structure (Course → Module → Lesson)
• Progress tracking with completion checkboxes
• Drip content that unlocks over time
• Course navigation (previous/next buttons)
• Student dashboard
• Course catalog page

Prerequisites:

• Bricks Builder installed and activated
• BricksMembers installed and activated
• Basic understanding of Bricks Builder
• Basic understanding of WordPress user management

Time to complete: 60-90 minutes

Part 1: Planning Your Course Structure

Before building, let’s plan the structure. A typical online course has 3-4 levels:

Option 1: Simple Structure (2 Levels)

• Level 1: Course
• Level 2: Lessons

Best for: Short courses, mini-courses, simple tutorials

Option 2: Standard Structure (3 Levels)

• Level 1: Course
• Level 2: Modules
• Level 3: Lessons

Best for: Most online courses where each lesson has one video.

Option 3: Video-Focused Structure (4 Levels)

• Level 1: Course
• Level 2: Modules
• Level 3: Lessons
• Level 4: Videos

Best for: Courses where lessons contain multiple videos. Makes it easy to add, reorder, and manage videos using Quick Add instead of editing each lesson.

Option 4: Advanced Structure (5 -6 Levels)

• Level 1: Subjects
• Level 2: Courses
• Level 3: Modules
• Level 4: Lessons
• Level 5: Videos

Best for: University-style courses, certification programs, extensive training

For this tutorial, we’ll use Option 2 (Course → Module → Lesson). If your lessons have multiple videos, consider Option 3 instead.

Part 2: Create the Content Structure

Let’s create the hierarchical structure for your courses.

Step 1: Create the Structure

1. Go to BricksMembers → Content Structures
2. Click Add New Structure
3. Fill in the details:

– Structure Name: “Online Courses” – Number of Levels: 3 – Icon: Choose a graduation cap or book icon

Step 2: Configure Each Level

Level 1 (Top Level) – Courses:

• Type: Post Type
• Object: course
• Singular: Course
• Plural: Courses

Level 2 – Modules:

• Type: Post Type
• Object: module
• Singular: Module
• Plural: Modules

Level 3 – Lessons:

• Type: Post Type
• Object: lesson
• Singular: Lesson
• Plural: Lessons

4. Click Create Structure

Result: You now have three new post types: Courses, Modules, and Lessons.

Important: We’ll set up user levels first, then create all your content, and finally use bulk assignment to assign levels to all content at once. This workflow prevents unnecessary recomputes while you’re setting up your courses, which saves time.

Part 3: Set Up User Levels

Create user levels before creating content. This allows you to use the Content Structure UI’s Quick Edit and Quick Add features to assign levels directly when creating content, with options to cascade levels to all children or inherit from parents.

1. Go to BricksMembers → User Levels
2. Click Add New Level
3. Level Name: Your preferred name (could be course name, “Premium Member” etc.)
4. Description: Add a description if desired
5. Click Save Level

Note: You can create multiple levels (e.g., “Free Student”, “Premium Student”, “Lifetime Access”, “Course Name” etc.) depending on your membership tiers.

Part 4: Create Your Content Using the Content Structure UI

The Content Structure UI provides the fastest way to create and manage your course content, with built-in features to assign user levels directly. We’ll use Quick Edit and Quick Add features instead of the regular post editor.

Step 1: Access the Content Structure UI

1. In the WordPress admin sidebar, click on your structure name (e.g., “Courses”) – this is a top-level menu item that BricksMembers automatically creates for each structure
2. Click the Enable Edit Mode button at the top

Step 2: Create the Course

1. Click the + Add Course button (or the + button next to the structure name)
2. In the Quick Add modal:
3. Title: “WordPress for Beginners”
4. Content: Add a course description, what students will learn, etc.
5. Required Levels: Check the required user levels to gain access
6. Featured Image: Add a course thumbnail (optional)
7. Click Create & Publish

Step 3: Create Modules

Create 3 modules for this course using the Quick Add feature:

1. Click the + Module button next to your course “WordPress for Beginners”
2. In the Quick Add modal:
3. Title: “Getting Started with WordPress”
4. Content: “Your first steps in WordPress. Learn how to…”
5. Inherit required levels from parent: Check this box – this will automatically copy the selected required levels from the course
6. Click Create & Publish

Repeat for Module 2 (“Creating Content”) and Module 3 (“Customizing Your Site”) – each time checking “Inherit required levels from parent” so they automatically get the correct required levels.

Step 4: Create Lessons

Create 2-3 lessons for each module using the Quick Add feature:

1. Click the + Lesson button next to a module (e.g., “Getting Started with WordPress”)
2. In the Quick Add modal:
3. Title: “What is WordPress?”
4. Add your lesson content (text, images, videos)
5. Inherit required levels from parent: Check this box – this will automatically copy the required levels from the module (which inherited it from the course)
6. Click Create & Publish

Repeat for all lessons – each time checking “Inherit required levels from parent” so they automatically get the Student level from their parent module.

Tip: Create all your courses, modules, and lessons now. You can always add more later, but having your content structure in place before enabling progress tracking and drip content will save time as less recomputations need to happen. When you’re done creating content, click Save Edits to save all your changes.

Alternative: Assign Levels Using Quick Edit

If you forgot to assign levels when creating posts, or want to change levels later, you can use Quick Edit:

1. Click the Quick Edit button (pencil icon) next to a course
2. In the Quick Edit modal, check all levels it should have in Required Levels
3. Check the box: “Apply level changes to all child posts” – this will assign the Student level to all modules and lessons within this course
4. Click Save

What this does: Assigns the Student level to the course AND all its child posts (modules and lessons) in one action. This is perfect if you created content without assigning levels initially.

Part 5: Enable Protected Downloads (Optional)

Protected Downloads can be enabled at any time, before or after creating content. It doesn’t really matter.

1. Go to BricksMembers → Settings → Modules
2. Find Protected Downloads
3. Toggle it ON
4. Click Save Settings

Part 6: Enable Progress Tracking

Now that your content is set up, enable progress tracking. This will trigger a one-time recompute of all progress data.

1. Go to BricksMembers → Settings → Modules
2. Find Progress Tracking
3. Toggle it ON
4. Click Save Settings

Configure Progress Tracking Level

1. Go to BricksMembers → Content Structures
2. Set Progress Tracking Level of your “Courses” structure: Select “Lesson” – this is the level that will be tracked for completion
3. Click Save Structure

What this does: Allows students to mark lessons as complete and tracks their progress. The system will now calculate progress for all your existing content.

Part 7: Enable Drip Content

Now enable drip content to control when lessons become available.

1. Go to BricksMembers → Settings → Modules
2. Find Drip Content
3. Toggle it ON
4. Click Save Settings

What this does: Allows you to release lessons over time (e.g., one lesson per week). The system will now process drip rules for all your existing content.

Part 8: Create Drip Rules

Drip content controls when lessons become available. Here are two common approaches:

• Sequential Unlocking: Lessons unlock immediately after completing the previous one (most common for self-paced courses)
• Weekly Releases: One lesson per week from when the student joins (good for cohort-based courses)

Option 1: Sequential Unlocking (Recommended for Most Courses)

This is the most common setup: students complete Lesson 1, then Lesson 2 unlocks immediately. Perfect for self-paced learning.

Go to BricksMembers → Drip Content. You’ll see a form with a tab-based layout. Fill it out as follows:

Target Tab

Click the Target tab in the left menu:

1. Rule Name: Enter “Sequential Lesson Unlock”
2. Structure: Select your “Courses” structure
3. Post Type: Select “lesson”
4. Specific Parent Post (Optional): Leave empty to apply to all lessons
5. User Levels: Check the user levels this rule should apply to

Schedule Tab

Click the Schedule tab:

1. Initial Delay (days): Set to 0
2. Trigger: Select “Level assignment”

Prerequisites Tab

Click the Prerequisites tab:

1. Require previous item: Check this box
2. Previous within…: Select “module” (lessons unlock sequentially within each module)
3. Delay After Previous Completion (days): Leave at 0 (unlocks immediately after completion)

Unlock Logic (Footer)

At the bottom of the form, set:

1. Condition Logic: Select “All conditions must be met (AND)”

Click Save Drip Rule.

Result: The first lesson in each module is available immediately. After completing it, the next lesson unlocks immediately. Students progress through lessons sequentially at their own pace.

Option 2: Weekly Lesson Releases

For cohort-based courses where you want to release one lesson per week, use Timed Auto-Drip:

Target Tab

1. Rule Name: Enter “Weekly Lesson Release”
2. Structure: Select your “Courses” structure
3. Post Type: Select “lesson”
4. User Levels: Check the user levels

Schedule Tab

1. Initial Delay (days): Set to 0
2. Trigger: Select “Level assignment” (or “User registration” if you prefer)

Timed Auto-Drip Tab

1. Check Enable Timed Auto-Drip
2. Interval every: 7 days
3. Items Per Interval: 1 (one lesson per week)
4. Check Release First Item Immediately – first lesson available right away
5. Scope: Select “module” to group unlocks by module (each module has its own weekly timeline)

Click Save Drip Rule.

Result: The first lesson unlocks immediately. Then, one new lesson unlocks every 7 days from when the student joined. Perfect for cohort-based courses where everyone progresses together.

Part 9: Design Templates

Design the Lesson Template

Now let’s design how lessons appear to students.

Step 1: Create a Lesson Template

1. Go to Bricks → Templates
2. Click Add New
3. Template Type: Single
4. Click Edit with Bricks
5. In the Template Conditions select: Post Type → Lesson

Step 2: Add the Lesson Header

1. Add a Section element
2. Add a Text element with breadcrumbs: {brm_structure:parent_course} / {brm_structure:parent_module} – style this with smaller text, muted color
3. Add a Heading (H1): How to Build an Online Course Platform with BricksMembers – this is the lesson title
4. Add a BRM Progress Bar element to show module progress:

– Progress Mode: Auto (Smart Detection) – Progress Level: Top Level (shows progress for the current course. You could also use Current Level if you want to be more explicit, but Top Level works well here since you’re on a lesson page)

What this creates: A clear header showing which course and module the student is in, the lesson title, and their progress through the current module.

Step 3: Add the Lesson Video

1. Add a new Section below
2. In the Container, add an Image element
3. Configure the Image element:
   • Image: Click the dynamic data icon (⚡) and select {brm_video:image}
   • Link: Set “Link to” to “Other (URL)“, select “Lightbox Video” in the next field and in the next one, click the dynamic data icon (⚡) and select {brm_video:url} or just type it.

What this does: Shows the video thumbnail image. When students click it, the video opens in a lightbox overlay. This is better for performance because the video only loads when clicked, not on page load.

Step 4: Add the Lesson Text Content

Below the video, add a Post Content element (shows any text, images, or additional content for the lesson)

Step 5: Add the Completion Checkbox

1. Below the content, add a BRM Progress Checkbox element
2. Configure as you like

What this does: Students click to mark the lesson as complete, which triggers progress tracking and drip unlocks if you used “Option 1: Sequential Unlocking” for drip content.

Step 6: Add Navigation Buttons

1. Add a BRM Post Navigation element in a new section below the content
2. Configure as follows:
   • Navigation Boundary: Top Level (navigate within the current course)
   • User Level Match: Match (only show accessible lessons)
   • Drip: Unlocked (only show unlocked lessons)
   • Type: Both (show both previous and next)
   • Style: as you like, ideally with image previews turned on

Result: Students can navigate between lessons in the current module.

Step 7: Add a Sidebar (Optional)

A sidebar can help students navigate between lessons. Here’s how to create a 2-column layout with a sidebar.

Step 7.1: Create the 2-Column Layout

1. Select the main Section that contains your lesson content
2. In the Container (automatically inside the Section), set:
   • Display: Grid
   • Grid template columns: 300px 1fr (or 30% 70%)
   • Gap: 40px

Alternative: Using Flexbox

1. In the Container, set:
   • Display: Flex
   • Flex direction: Row
   • Gap: 40px
2. Wrap your existing lesson content in a Container and set:
   • Flex: 1 (takes remaining space)
3. Add a new Container on top of the content container for the sidebar on the left and set:
   • Width: 100%
   • Max Width: 300px

Step 7.2: Add Module Lessons List to Sidebar

Show all lessons in the current module so students can jump to any lesson.

1. Inside the sidebar Container, add a Heading (H3): “Lessons in This Module”
2. Add a Block element as a wrapper
3. Add a Div element inside the Block
4. Enable Query Loop
5. Configure the query:
   • Query type: Posts
   • Post type: lesson (or your lesson post type)
   • Order by: Menu Order
   • Order: ASC
6. Add BricksMembers Query Filters:
   • Within Structure Boundary: Check this box
   • Boundary Level: Parent Level or Level 2 (this filters lessons to only show those within the current module)
   • Drip: Unlocked (only show unlocked lessons)
7. Inside the query loop, design each lesson item:
   • Add a Container with padding and border
   • Add a Link element: https://bricksmembers.com/docs/building-an-online-course-platform/
   • Inside the link, add Text: How to Build an Online Course Platform with BricksMembers
   • To highlight the current lesson: Select the Div element, go to the Style tab, and in the CSS class field, add: {brm_active} (this will add the brm-active class to the current lesson)
   • Optionally, also add {brm_completed} and {brm_unlocked} in the same CSS class field: {brm_active} {brm_completed} {brm_unlocked}
   • Add custom CSS to style these classes (e.g., .brm-active { background: #f0f0f0; }, .brm-completed { opacity: 0.7; })
8. Select the sidebar Container
9. Style it:

Step 7.3: Style the Sidebar as you like

Result: Students can see all lessons in the module, track their course progress, and access downloads – all in one convenient sidebar.

Tip: You can also create a nested Query Loop (Lesson Query Loop nested inside a Module Query Loop) to show Lessons filtered by Modules on top to allow the user to quickly switch between modules as well.

Design the Course Page Template

Let’s create a template for the course overview page.

Step 1: Create a Course Template

1. Go to Bricks → Templates
2. Click Add New
3. Template Type: Single
4. Click Edit with Bricks
5. Template Conditions: Post Type → Course

Step 2: Add Course Header

1. Add a Section with a background image (or gradient)
2. Add a Heading (H1): How to Build an Online Course Platform with BricksMembers – the course title
3. Add a Text element: Transform your WordPress site into a full-featured online course platform with BricksMembers. This tutorial walks you through creating a complete learning management system (LMS) with courses, modules, lessons, progress tracking, and drip content. What you'll build: Prerequisites: Time to complete: 60-90 minutes Part 1: Planning Your Course Structure Before building, let's plan the structure. A… – a short course description
4. Add a BRM Progress Bar to show overall course progress:
   • Progress Mode: Auto (Smart Detection)
   • Progress Level: Current Level (shows progress for this course page. Top Level also works, but Current Level is more explicit when you’re already on the course page)
   • Show Progress Text: Yes
   • Show Details: Yes

Step 3: Add Course Description

1. Add a new Section
2. In the Container, add a Heading (H2): “About This Course”
3. Add a Post Content element to show the full course description

Step 4: Add Modules List

1. Add a new Section for the modules list
2. In the Container, add a Heading (H2): “Course Modules”
3. Add a Block element as a wrapper
4. Add a Div element and enable Query Loop
5. Configure the query:
   • Query type: Posts
   • Post type: module
   • Posts per page: -1 (show all modules)
   • Order by: Menu Order
   • Order: ASC
6. Add BricksMembers Query Filters:
   • Within Structure Boundary: Check this box
   • Boundary Level: Current (this filters modules to only show those within the current course)
   • User Level Match: Match (show accessible modules)

Step 5: Design the Module Card

Inside the query loop Div, design each module card:

1. Add a Heading (H3): How to Build an Online Course Platform with BricksMembers – the module name
2. Add a Text element: Transform your WordPress site into a full-featured online course platform with BricksMembers. This tutorial walks you through creating a complete learning management system (LMS) with courses, modules, lessons, progress tracking, and drip content. What you'll build: Prerequisites: Time to complete: 60-90 minutes Part 1: Planning Your Course Structure Before building, let's plan the structure. A… – module description
3. Add a BRM Progress Bar to show module progress:
   • Progress Mode: Auto (Smart Detection)
   • Progress Level: Current Level (shows progress for this specific module page. Alternatively, you can use Manual mode with Content ID set to 529)
4. Add a Button: “Start Module” or “Continue” → Link: https://bricksmembers.com/docs/building-an-online-course-platform/

Result: A list of all modules in the course with individual progress bars.

Create a Course Catalog Page

Let’s create a page showing all available courses.

Step 1: Create the Page

1. Go to Pages → Add New
2. Title: “Courses”
3. Click Edit with Bricks

Step 2: Add a Query Loop for Courses

1. Add a Section
2. Add a Heading (H1): “All Courses”
3. Add a Div with Query Loop enabled
4. Configure:
   • Query type: Posts
   • Post type: course
   • Posts per page: -1
   • Order by: Title
   • Order: ASC
5. BricksMembers Filters:
   • User Level Match: Match (only show courses the user can access)

Optional: Duplicate the whole section and rename the two to “Your Courses” and “No Access”, and use “User Level Match: No Match” on the No Access one to display the courses the user does not have access to. That goes well together with a message and button to direct him to where he can purchase the other courses.

Step 3: Design the Course Card

Inside the query loop:

Inside the query loop Div, design each course card:

1. Add a Featured Image element – shows the course thumbnail
2. Add a Heading (H3): How to Build an Online Course Platform with BricksMembers – the course name
3. Add a Text element: Transform your WordPress site into a full-featured online course platform with BricksMembers. This tutorial walks you through creating a complete learning management system (LMS) with courses, modules, lessons, progress tracking, and drip content. What you'll build: Prerequisites: Time to complete: 60-90 minutes Part 1: Planning Your Course Structure Before building, let's plan the structure. A… – short course description
4. Add a BRM Progress Bar to show student’s progress in this course:
   • Progress Mode: Auto (Smart Detection)
   • Progress Level: Current Level (shows progress for this course page. Alternatively, you can use Manual mode with Content ID set to 529)
   • Show Progress Text: Yes
   • Show Details: Yes
5. Add a Button: “View Course” or “Continue Learning” → Link: https://bricksmembers.com/docs/building-an-online-course-platform/ or {brm_progress:continue:toplevel:url}

Step 4: Style the Grid

1. Select the wrapper Block
2. Display: Grid
3. Grid template columns: repeat(auto-fill, minmax(300px, 1fr))
4. Gap: 30px

Result: A responsive grid of course cards with progress bars.

Part 10: Create the Student Dashboard

Follow Building a Member Dashboard to create a comprehensive dashboard showing:

• Overall progress across all courses
• Continue learning section (use {brm_progress:continue:toplevel} for a quick “Continue Learning” button)
• Recently completed lessons
• Course list with progress

Part 11: Testing Your Course Platform

Test as a Student

1. Create a test user account
2. Assign the correct user level to the test user
3. Log in as the test user
4. Navigate to a course
5. Complete the first lesson (click “Mark as Complete”)
6. Check that the next lesson unlocks (if drip is configured)
7. Navigate between lessons using prev/next buttons
8. Check the dashboard to see progress updates

Test Drip Content

1. Complete a lesson
2. Check that the next lesson shows the unlock date
3. Wait for the drip delay (or manually adjust the unlock date in the database for testing)
4. Refresh and verify the lesson is now accessible

Summary

You’ve learned how to:

• ✅ Create a hierarchical course structure (Course → Module → Lesson)
• ✅ Enable and configure progress tracking
• ✅ Set up drip content to release lessons over time
• ✅ Design lesson and course templates with Bricks Builder
• ✅ Add navigation between lessons
• ✅ Create a course catalog with query loops

You now have a fully functional online course platform powered by BricksMembers and Bricks Builder!