How to Build a Member Dashboard with BricksMembers

A member dashboard is the central hub where your users see their membership status, track their progress, and access their content. In this tutorial, you’ll learn how to build a professional dashboard using Bricks Builder’s query loops and BricksMembers’ dynamic tags.

What you’ll build:

• Showing the user’s current membership levels
• Progress bars for each course
• List of unlocked/locked content
• Recent completions timeline
• Quick access to continue learning

Prerequisites:

• Bricks Builder installed and activated
• BricksMembers installed with at least one user level created
• Progress Tracking enabled (for progress features)
• Some content created with required levels assigned

Time to complete: 30-45 minutes

Understanding the Building Blocks

Before we start building, let’s understand the two main tools we’ll use:

Dynamic Tags

Dynamic tags display information that changes based on the current user or post. BricksMembers provides 9 base tags with over 100 modifiers.

Example:

• {brm_user:levels} – Shows the user’s membership levels
• {brm_progress:percent} – Shows progress percentage
• {brm_drip:unlock_date} – Shows when content unlocks
• {brm_user:avatar} – Profile photo (Member Profiles module)
• {brm_user:last_login} – Last login date (Member Profiles module)
• {brm_post:level:first} – Access level badge in post loops (e.g., “Premium”, “Free”)

How to use them:

1. Select any text element in Bricks
2. Click the flash-icon next to the text field
3. Search for “BricksMembers” tags
4. Insert the tag

Query Loops

Query loops display lists of content (posts, courses, lessons, etc.) with filters. Think of them as “show me all lessons where the user has access.”

How query loops work:

1. Query – Fetch posts from the database (e.g., “get all lessons”)
2. Filter – Apply BricksMembers filters (e.g., “only unlocked lessons”)
3. Display – Show each post using a template you build directly inside the Query Loop element in Bricks Builder

BricksMembers provides 8 query loop filters:

• User Level Match – Filter by access (match, no match, empty)
• Users: Include Levels – For User Query Loops: only include users with certain levels
• Drip Filter – Filter by drip status (unlocked, locked, time ready)
• Progress Filter – Filter by completion (completed, not completed)
• Structure Boundary – Limit to specific structure scope
• Posts: Filter by Required Level – Filter post loops by required access level(s)
• Like Status – Show only if a post is liked or not
• Minimum Likes – Show only posts with a minimum amount of likes

Step 1: Create the Dashboard Page

First, let’s create a new page for the dashboard.

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

Step 2: Add the Welcome Section

Let’s start with a personalized welcome message.

Add a Container

1. Click + to add a new element
2. Search for Section
3. It will automatically add a Container inside the section

Add Welcome Heading

1. Inside the container, add a Heading element
2. Set the tag to H1
3. For the text, click the flash-icon for the dynamic tags list
4. Search for User First Name (User tag)
5. Your heading should now show: {wp_user_first_name}
6. Add text before it: “Welcome back, {user_display_name}!”

Result: The heading will show “Welcome back, John!” for a user named John.

Add Membership Status

1. Add another Heading (H3) below
2. Text: “Your Membership:”
3. Add a Text element below
4. Click the flash-icon for the dynamic tags list
5. Search for BricksMembers
6. Insert {brm_user:levels}
7. Style it to your liking – tag like styling with list-style: none, background-color and border-radius is recommended

Result: Shows “Premium Member, Free Member” (or whatever levels the user has).

Optional: Add Profile Photo and Last Login (Member Profiles module)

If you have the Member Profiles module enabled (BricksMembers → Settings → Modules), you can enrich the welcome section:

• Profile photo – Add an Image element and set the source to {brm_user:avatar} (or :large, :96 for different sizes)
• Last active – Add a Text element with {brm_user:last_login} (e.g., “Last active: …”)
• Custom fields – Use {brm_user:field:field_key} for any custom profile field (e.g., bio, job title)

For profile editing, add a Bricks form with BRM Update Profile and BRM Update Custom Fields actions. See User Profiles, Custom Fields & Member Directories for full setup.

Step 3: Display Course Progress

Now let’s show the user’s progress across all their courses. This is where query loops come in!

Create a Query Loop for Courses

1. Add a new Section below the welcome section
2. Add a Heading (H2): “Your Courses” inside the sections’ container
3. Below the heading, add a Block element (use grid or flex to structure the courses in a list or columns)
4. Inside the Block element, add a Div element
5. In the Content tab of the Div element, enable Query Loop at the top
6. Configure the query:

• Query type: Posts
• Post type: Select your course post type (e.g., “course”)
• Posts per page: 10 (or choose any number that fits your site)
• Order by: Menu Order
• Order: ASC

Add BricksMembers Filters

Now let’s filter to show only courses the user has access to.

1. Scroll down to BricksMembers Query Filters section
2. User Level Match: Select Match (only show courses the user can access)
3. Leave other filters off for now

What this does: The query loop will only show courses where the user’s levels match the course’s required levels.

Design the Course Card

Now let’s design how each course appears in the loop.

1. Inside the query loop div, add a Heading (H3)
2. Click the flash-icon and insert {post_title} to show the course title
3. Optionally add a Text element with {brm_post:level:first} to show an access level badge (“Premium”, “Free”, etc.) on each course card
4. Add a BRM Progress Bar element below the heading
5. Configure the progress bar:

• Progress Mode: Auto (Smart Detection)
• Progress Level: Current Level (shows progress for this specific course page. Top Level also works, but Current Level is more explicit when you’re already on the course page)
• Bar Height: 20px
• Colors: Match your brand
• Show Progress Text: Yes
• Show Details: Yes (shows “3 of 10 completed”)

6. Add a Button element below the progress bar
7. Button text: “Continue Learning”
8. Button link: {brm_progress:continue:toplevel:url} (automatically links to the next uncompleted lesson within this course)
9. Add conditional logic to the button: Dynamic Data → {brm_progress:continue:toplevel:url} → is not empty

Note: The {brm_progress:continue:toplevel:url} tag automatically finds the last completed lesson within this course and links to the next uncompleted one. If no lessons are completed, it links to the first lesson. If all lessons are completed, the url won’t appear – that’s why the conditional logic is important to let the whole button disappear. Alternatively, you can use {post_url} if you prefer to link to the course overview page instead.

Optionally: Add a button with conditional logic: Dynamic Data → {brm_progress:continue:toplevel:url} → is empty, button text “Open Course”, and {post_url} in the url field to link to the course instead of next lesson if the course is completed and the button clearly stating that.

Result: You now have a grid of course cards, each showing:

• Course title (and optionally a level badge via {brm_post:level:first})
• Progress bar (e.g., “30% – 3 of 10 completed”)
• Continue button

Style the Grid

1. Select the Block element that wraps the Query Loop Div.
2. Set Display: Grid
3. Grid template columns: repeat(auto-fill, minmax(300px, 1fr))
4. Gap: 20px
5. Alternatively: Use ACSS classes .variable-grid and .gap–s, .gap–m or so if AutomaticCSS is installed and set the –min variable to 300px or 30rem in the Custom CSS field.

Result: Courses display in a responsive grid that adapts to screen size.

Step 4: Show Unlocked Content

Let’s add a section showing all content the user has unlocked recently. This requires the Drip Content module to be enabled on the BricksMembers Settings page under Modules.

Create a Query Loop for Lessons

1. Add a new Section below the courses section
2. Add a Heading (H2): “Recently Unlocked”
3. Add a Block element again as a wrapper
4. Add a Div element with Query Loop enabled
5. Configure the query:

• Query type: Posts
• Post type: Select your lesson post type (e.g., “lesson”)
• Posts per page: 5

Add Drip Filter

1. Scroll down to BricksMembers Query Filters in the Content tab
2. User Level Match: Match
3. Drip Filter: Unlocked (only show unlocked content)
4. Order By: Drip Unlocked (Recent First)

What this does: Shows only lessons that are both accessible (user has the right level) AND unlocked (drip conditions met).

Design the Lesson List

1. Inside the query loop, add a Container
2. Add a Heading (H4): {post_title}
3. Add a Text element: “Unlocked on {brm_drip:unlock_date}”
4. Add a Button: “Start Lesson” → Link: {post_url}
5. Style the container as you like

Result: A list of recently unlocked lessons with unlocked dates.

Step 5: Show Completed Content

Let’s add a section for completed lessons (requires Progress Tracking enabled).

Create a Query Loop for Completed Lessons

1. Add a new Section
2. Add a Heading (H2): “Recently Completed”
3. Add a Block as wrapper
4. Add a Div with Use query loop enabled
5. Configure the query:

• Query type: Posts
• Post type: lesson
• Posts per page: 5

Add Progress Filter

BricksMembers Query Filters:

• User Level Match: Match
• Progress: Completed
• Order By: Progress Completed (Recent First)

What this does: Shows only lessons the user has marked as complete.

Design the Completed List

1. Add a Container inside the loop
2. Add an Icon element (checkmark icon)
3. Add a Heading (H4): {post_title}
4. Add a Text element: “Completed on {brm_progress:completion-date}”
5. Style as you like
6. Style the wrapper element with flex box to show the posts below each other as a list

Result: A timeline of completed lessons with completion dates.

Step 6: Add Overall Progress Stats

Let’s add some quick stats at the top of the dashboard showing overall progress across the entire structure (all courses combined).

Create a Stats Grid

1. At the top of the page (below the welcome section), add a Container
2. Set Display: Grid
3. Grid template columns: repeat(3, 1fr)
4. Gap: 20px
5. Or use AutomaticCSS utility classes

Add Stat Cards

Since we’re on a dashboard page (not a course page), we need to specify which structure to calculate progress for. Use the structure_id modifier to directly specify your structure ID. This calculates progress across ALL courses in that structure:

Card 1: Total Progress

1. Add a Container
2. Add a Heading (H2): {brm_progress:structure_id:YOUR_STRUCTURE_ID:percent}%
3. Add text: “Overall Progress”
4. Style as you like

Note: Replace YOUR_STRUCTURE_ID with your actual structure ID. You can find this in the BricksMembers Content Structure page on any post within that structure.

Important: The structure_id modifier will return 0 if the structure ID is invalid, the structure has no levels configured, or progress tracking is not configured for that structure. Make sure progress tracking is enabled and properly configured for your structure before using this modifier.

Card 2: Completed Lessons

1. Add a Container
2. Add a Heading (H2): {brm_progress:structure_id:YOUR_STRUCTURE_ID:completed}
3. Add text: “Lessons Completed”
4. Style as you like

Card 3: Total Lessons

1. Add a Container
2. Add a Heading (H2): {brm_progress:structure_id:YOUR_STRUCTURE_ID:total}
3. Add text: “Total Lessons”
4. Style as you like

Tip: Give all 3 cards the same classes to unify styling.

What this does: The structure_id modifier directly specifies which structure to calculate progress for, without needing post context. It calculates progress across ALL courses in that structure (aggregated totals).

Result: Three stat cards showing overall progress metrics across the entire structure.

Step 7: Add Continue Learning Section

Let’s add a prominent “Continue Learning” section that shows the next incomplete lesson using the {brm_progress:continue} dynamic tag. This tag automatically finds the last completed post and links to the next uncompleted one.

This is the simplest approach – just add a button with the dynamic tag! It automatically finds the last completed post and links to the next uncompleted one.

1. Add a Container (make it prominent with a colored background)
2. Add a Heading (H2): “Continue Where You Left Off”
3. Add a Text element: “Next up: {brm_progress:continue:structure_id:YOUR_STRUCTURE_ID:title}”
4. Add a large Button: “Continue Learning →”
5. Button link: {brm_progress:continue:structure_id:YOUR_STRUCTURE_ID:url}
6. Important: Replace YOUR_STRUCTURE_ID with your actual structure ID. You can find it in BricksMembers Settings → Structures, or use {brm_structure:structure_id} on any post within the structure.
7. Style it prominently

What this does: Automatically finds the last completed post across the entire structure and links to the next uncompleted one. If no posts are completed, it shows the first post. If all are completed, the url in the button won’t appear. So use conditional logic again, as we did with the continuation inside courses to show the button conditionally.

Why use structure_id? On a dashboard page (not a post within a structure), there’s no post context to determine which structure to use. The structure_id modifier tells the tag which structure to search within. On a post page within a content structure, you can use {brm_progress:continue:structure} instead.

Note: The {brm_progress:continue} tag is the recommended approach because it automatically determines the correct “next” lesson based on completion order. While it’s technically possible to achieve similar results with a query loop (using BricksMembers Progress filter to show only non-completed posts, limiting to 1 post, and ordering by menu_order), this approach is much more difficult to set up, less efficient, and takes more configuration time. The dynamic tag handles all of this automatically and efficiently.

Advanced Tips

Tip 1: Combine Multiple Filters

You can combine filters for precise control:

Example: Show locked premium content

• User Level Match: Match
• Drip Filter: Locked

Result: Shows content the user has access to (right level) but can’t access yet (drip locked).

Tip 2: Show Level-Specific Content

Use Bricks conditions to show different content based on user levels:

1. Add a Container
2. Go to Conditions tab
3. Add condition: BricksMembers → Has Access To Level(s)
4. Select “Premium Member”
5. Add premium-only content inside this container

Result: Container only appears for premium members, independently of the required levels set for the page.

Tip 3: Add a “Coming Soon” Section

Show locked content with unlock dates:

1. Create a query loop for lessons
2. Drip Filter: Locked
3. Display: {post_title} – “Unlocks on {brm_drip:unlock_date}”

Result: Shows upcoming lessons with unlock dates.

Common Issues and Solutions

Issue 1: Dynamic Tags Show Raw Code

Cause: Tag syntax incorrect or tag not available.

Solution:

1. Check spelling and modifiers (e.g., :levels not :level)
2. Ensure the module is enabled (e.g., Progress Tracking for progress tags)

Issue 2: No Posts Appear in Query Loop

Cause: User doesn’t have access to any content or wrong post type used.

Solution:

1. Assign the user a level (BricksMembers → Users)
2. Assign that level to some content
3. Check the Bricks Query Loop filters if the correct post type is used and all other settings are correct
4. Refresh the dashboard page

Next Steps

Now that you have a functional dashboard, consider adding:

1. User Profile Section – Enable the Member Profiles module, then use {brm_user:avatar}, {brm_user:last_login}, and {brm_user:field:key} to display profile data. Add a Bricks form with BRM Update Profile and BRM Update Custom Fields actions for editing. See User Profiles, Custom Fields & Member Directories for the full setup.
2. Achievements/Badges – Reward users for completing courses
3. Recommended Courses – Suggest courses as upsells
4. Download Center – Add a query loop of posts with downloads, then use the BRM Protected Download element or {brm_download} tag in each item. See Protected Downloads & File Security.

Your members now have a central hub to track their progress, access their content, and continue learning!