Build A Simple Membership Website With Bricks Builder
Creating a membership site may sound like a complex task, but with a few clever tools and a simple approach, we can build a robust setup quickly and easily.
In this tutorial, I’ll walk you through how to do just that using Bricks Builder, Advanced Custom Fields (ACF), and a couple of other handy WordPress plugins.
We’re going to build a site that allows you to tease premium content, fully show free posts, and restrict other content to registered members only. Let’s dive in.
Tools You’ll Need
To follow along, you’ll need:
- Bricks Builder (we’re using version 2.0, but the setup also works in earlier versions)
- Advanced Custom Fields (ACF, free version is fine)
- Fluent Snippets or another way to add PHP code (you could use functions.php or a code snippet plugin)
- Optional tools like Pods or MetaBox if you’re not using ACF
Step 1: Create a Custom User Role
First, let’s create a custom role called ‘Member’. This will allow us to distinguish between regular subscribers (free users) and paid members if we expand the site in the future.
To do this:
- Head over to Fluent Snippets (or your code snippet plugin of choice).
- Add a new snippet, set the type to ‘PHP Function’.
- Use the following code:
function wpdocs_add_member_role() {
// Get the 'subscriber' role object
$subscriber = get_role('subscriber');
if ($subscriber) {
// Add new role with the same capabilities
add_role('member', 'Member', $subscriber->capabilities);
}
}
add_action('init', 'wpdocs_add_member_role');
4. Save and activate the snippet.
This code simply creates a new user role called ‘Member’ with the same capabilities as the default ‘Subscriber’. Handy if you want to expand functionality for different user types later.
Step 2: Set Up a Registration Page
You’ll need a way for users to register and automatically be assigned the ‘Member’ role.
Here’s how to create a registration form in Bricks:
- Create a new page called “User Registration”.
- Edit it with Bricks Builder.
- Add a new section, then insert the native Bricks ‘Form’ element.
- Remove the Message field (this isn’t a contact form).
- Add a Password field (minimum 8 characters).
- Go to ‘Actions’ under the form settings:
- Remove the ‘Email’ action.
- Add ‘User Registration’.
- Configure the user registration settings:
- Email: Connect to the email field.
- Password: connect to the password field.
- User role: set to ‘Member’.
- Enable ‘Auto Login’ for a smoother user experience after sign-up.
- Change the submit button text to “Register”.
- Save the form.
Now go to:
Bricks Settings > General > Custom Authentication Pages
Set your custom registration page here.
Also, in WordPress:
Settings > General, tick ‘Anyone can register’.
That’s it – you have a working registration page that adds users as ‘Members’ and logs them in right away.
Step 3: Add Custom Fields with ACF
We want to add extra content to posts, like a teaser and a free/paid toggle. This enables us to display different content based on the user’s access level.
Here’s what to do:
- Go to ACF > Field Groups.
- Create a new group called “Post Extra Fields”.
- Add a WYSIWYG field:
- Label: Post Teaser
- Field Name: post_teaser
- Toolbar: Basic
- Media Upload: Enabled
- Add a True/False field:
- Label: Free
- Field Name: post_free
- On Text: Yes, Off Text: No
- Stylised UI: Enabled
- Set the location to display these fields on the Post Type: Posts.
- Save the field group.
Now, when editing posts, you’ll see two new fields at the bottom. You can write a teaser and indicate whether the article is free or not.
Step 4: Display Content Based on User Access
Now let’s bring all this together in your Bricks templates.
We’re going to edit the Single Post template and use Bricks’ conditional logic features to control who sees what.
- Edit your Single Post template in Bricks.
- You’ll usually see the Post Content element that displays the full article — we want to restrict this.
Select your Post Content element and:
– Go to Conditions.
– Add Condition:
– User Role: Is Member
– Or Is Administrator
– Add another Condition:
– User Logged In: Is Logged In
– Add one more Condition (optional):
– ACF Field post_free equals 1 (if the article is marked as free)
This means:
– Only logged-in Members or Admins will see the full content…
– …Or anyone will see it if it’s marked ‘Free’.
3. Add the Teaser Content:
– Insert a Rich Text element for the teaser.
– Link it to the ACF field post_teaser.
– Set Conditions:
– User Role: Is Not Member
– Is Not an Administrator
– ACF Field post_free equals 0
This ensures users who aren’t members (or logged in) only see the teaser — unless the post is marked free, in which case they see the full content anyway.
Testing It All
To test:
- View the post as an admin or logged-in member: you’ll see the full content.
- View the post as a logged-out user: you’ll only see the teaser.
- Set the post to “Free”: everyone can view the full content, regardless of whether they are logged in or not.
Where to Go From Here?
This is just the beginning. You could expand this setup by:
- Adding a payment gateway to upgrade users from ‘Subscriber’ to ‘Member’
- Creating custom dashboards or content areas for members
- Introducing content tiers (Gold, Silver, etc.)
Also, consider checking out the Bricks Builder 101 series at learnbricksbuilder.com if you’re new or want to improve your skills.
Wrapping Up
With Bricks Builder and ACF, setting up a simple yet expandable membership site is entirely doable without any overly complex tools or bloated plugins. You’ve created a way to manage user access, tease content, and even provide free and paid tiers.
Community
Join the WPTuts Academy Today
Join over 400 members and gain access to a vibrant community of web designers today.
