How I Rebuilt a Dynamic Membership Website Using Block Visibility

Last week, I rebuilt the Barfly Members website with a new design, and it quickly became one of the most dynamic websites I’ve ever created. Using the Block Visibility plugin, I was able to make a single template display six different views based on taxonomies, event types, and whether the user was logged in or logged out.

This approach not only streamlined the design process but also added advanced functionality to the site. In this post, I’ll walk you through how I accomplished this, step by step, so you can apply similar techniques to your own projects.

The Four Main Views

For this project, I needed four primary views:

1. Upcoming Events: Displayed differently for logged-in and logged-out users.
2. Past Events: Also displayed differently based on login status.
3. Logged-Out Visitors: A view that encourages users to log in or sign up.
4. Logged-In Members: A view with additional functionality, such as access to event replays and calendar integration.

Additionally, I needed a fifth view for specific event types, like happy hour calls, which required unique content.

Designing the Views

Here’s how the views differ:

Upcoming Events

• Logged-Out Users: See the hero section, a featured image, event description, and a prompt to log in or sign up for access.
• Logged-In Members: See the same hero section and event description, but instead of the login prompt, they get buttons to add the event to their calendar or join the Zoom call.

Past Events

• Logged-Out Users: See a blurred image of the event replay video with a “members only” tag and a login prompt.
• Logged-In Members: See the actual replay video, event description, and no calendar or Zoom links (since the event has already passed).

Happy Hour Events

For happy hour calls, I added a small blurb explaining what happy hour is, but only for events tagged as “happy hour.”

The Challenge: One Template for All Views

I didn’t want to create four separate templates for these views. If I needed to make a layout change, I’d have to update all four templates, which would be inefficient. Instead, I aimed to accomplish all these views within a single template.

To do this, I put everything that could possibly appear on the page into one layout and used dynamic visibility controls to show or hide elements based on conditions.

Setting Up the Template

Step 1: Build the Layout

I started by creating a single template that included all possible elements:

• Featured image
• Blurred video placeholder
• Replay video embed
• Login or sign-up prompts
• Event description
• Calendar and Zoom buttons
• Happy hour blurb

Step 2: Add Visibility Controls

To dynamically show or hide elements, I used the Block Visibility plugin. This plugin allows you to set conditions based on taxonomies, user roles, and more.

Using Block Visibility

Featured Image

The featured image should only appear for upcoming events, regardless of whether the user is logged in or logged out.

1. Select the featured image block.
2. Open the Visibility tab in the block settings.
3. Add a condition:
   • Post Taxonomy: Event schedule is “upcoming.”

Blurred Video Placeholder

The blurred video placeholder should only appear for logged-out users viewing past events.

1. Select the blurred image block.
2. Add two conditions:
   • Post Taxonomy: Event schedule is “past.”
   • User Role: Logged-out users.

Replay Video Embed

The replay video should only appear for logged-in users viewing past events.

1. Select the video embed block.
2. Add two conditions:
   • Post Taxonomy: Event schedule is “past.”
   • User Role: Logged-in users.

Login or Sign-Up Prompts

I added two login prompts:

• One for logged-out users viewing past events.
• Another for logged-out users viewing upcoming events.

For each prompt, I set conditions based on the event schedule and user role.

Calendar and Zoom Buttons

These buttons should only appear for logged-in users viewing upcoming events.

1. Select the button blocks.
2. Add two conditions:
   • Post Taxonomy: Event schedule is “upcoming.”
   • User Role: Logged-in users.

Happy Hour Blurb

The happy hour blurb should only appear for events tagged as “happy hour.”

1. Select the container block for the blurb.
2. Add a condition:
   • Post Taxonomy: Event type is “happy hour.”

Why This Setup Works

By using Block Visibility, I was able to dynamically control what content appears based on the user’s role and the event type or schedule. This approach allowed me to create a single template that adapts to multiple scenarios without duplicating effort.

Additional Features

Dynamic Menus

I used the If Menu plugin to control menu visibility based on login status. For example:

• Logged-in users see a “Billing” menu item.
• Logged-out users see “Log In” and “Sign Up” options.

Giveaway Pages

On the giveaways page, I used Block Visibility to show different content based on the event schedule:

• Upcoming Giveaways: Display a “Registration opening soon” message.
• Current Giveaways: Show a registration form.
• Past Giveaways: Move the giveaway to the “Past Giveaways” section.

Why Block Visibility Is a Game-Changer

Block Visibility makes it easy to manage dynamic content without needing custom code. Whether you’re building a membership site or just need conditional content, this plugin is incredibly versatile.

For the Barfly Members website, it allowed me to deliver content to members while also marketing the community to potential new members. Visitors can see what’s available, but access is restricted behind a login.

Final Thoughts

This setup has been a huge time-saver and has made the website far more dynamic and functional. Whether you’re building a membership site or just need advanced content controls, Block Visibility is a tool worth exploring.

If you’re looking for ways to streamline your website design while adding powerful functionality, I highly recommend giving this plugin a try.