Building a membership site with WordPress – a challenge or a piece of cake? A case study
A membership site is a site where some content is available only to members who have logged in. To gain access to this content, visitors usually have to pay to join as a member. Membership sites often include user-submitted content.
Thus, by definition, building a membership site doesn’t appear to be a trivial thing. Today, we aim to test this with Jacob McDaniel from &Pixel, the author of popupsters.com. This is the first membership site in our series of case studies that involve Toolset plugins.
About the project
PopUpsters is a small startup in San Francisco, which focuses on connecting Vendors and Event Organizers. PopUpsters want Vendors and Event Organizers to come to their site, register, and create their profile. Vendors (such as food providers) can book space in events submitted by the Organizers. Organizers can search for the best Vendors to attend the event that they are hosting.
An e-commerce solution is needed to charge Vendors for booking various popups.
- enabling registration with a specific role
- adding and editing information via a front-end
- access to certain data and activities for privileged users only (after logging in)
- integration with e-commerce to access some paid services
About the author
Jacob McDaniel is a designer and web developer. He is also a self-confessed beer nerd.
Jacob (jacobmcdaniel.com) has been designing and building websites since 2008, and he has clients all over the world. His shop &Pixels (andpixels.com) is located in Kansas City. It is focused on exceptional user experiences and user interfaces built within WordPress. &Pixels can build everything from a new branding identity and a responsive website to full-fledged ecommerce and web/mobile applications.
Understand the business workflow first
Unlike typical brochure sites, membership sites are more dynamic.
When you starting work on projects, you first need to understand the basic business workflow that your site will support.
In practice, this means that you will need to:
- identify different user roles;
- define their capabilities by specifying who can do what and under what conditions.
In other words: which action follows which, who triggers it, and in what way.
Learn more from the new series of tutorials on how to create a membership site using Toolset.
The following is a simplified workflow from Jacob’s site for a user who has the role of a Vendor.
A simple scenario from the Vendor’s perspective.
A food Vendor visits the site, registers, logs in, and browses the event calendar. After finding an event, he/she wants to book space (such as having a food booth at the event), so he/she applies. If attending the event requires a fee, he/she will need to check out.
Using the basic workflows, you can design your basic structures and create designs or mock-ups. Finally, you decide the tools that you want to use in the implementation.
Why the Toolset was used
Jacob’s customer needed the so-called minimum viable product (MVP) solution for their startup. The aim is to build something quickly that works with the minimum investment. This product only has the core features that allow the product to be deployed.
Jacob was already familiar with the Toolset. &Pixels had used it in another project to build a search engine for finding beer based on a nearby map and list.
www.popupsters.com aimed to be a membership site so the Access plugin appeared to be a perfect solution for restricting access depending on the user’s role.
The Views plugin also integrates well with the WooCommerce solutions that Jacob planned to use.
What other plugins were used?
Jacob’s site is a fairly complex and challenging membership site, which includes the management of events and e-commerce. The Events Calendar plugin was used to handle events in a calendar form. Jacob is a fan of WooCommerce solutions so you can see some other plugins from the famous WooCommerce family in his tool kit.
The following is the full set of plugins used to handle e-commerce, roles, membership, and events.
|Handling events||Events Calendar, Events Calendar Pro, and|
|Registering and login forms||Formidable Pro|
|Additional custom types and fields||Types (Toolset component)|
|Displaying custom contents in different pages||Views (Toolset component)|
|Creating and editing Vendors information via the front-end. Event registration from the front-end.||CRED (Toolset component)|
|Controlling access to specific pages based on roles||Access (Toolset component) – to define custom roles.|
Nav Menu Roles (free WP plugin) – to hide some menu items based on user roles.
|Handling payments for paid access||WooCommerce plugin and its extensions:|
WooCommerce Bookings – to support the sale of date-based bookings (for example, a booth for a food Vendor at an event)
Building a membership site – plugins in action
popupsters.com is a membership site so you can’t see much when browsing it as a regular visitor.
In the following, we share some screenshots to show how the different plugins were combined to transform a WordPress site into a membership site.
Custom forms for registration and login
What is offered by WordPress?
To become a site member, a user must first register. WordPress supports user registrations via the front-end but you first need to enable the membership option (as shown above).
The standard WordPress forms for login and registration are rarely used by professional membership sites. You will need the forms to look like part of your site and custom fields will often be needed.
How the registration and login forms were implemented at popupsters.com
The following are the login and registration forms used by PopUpsters:
The forms are an integral part of the site and they are accessible from the top navigation line as regular pages.
Jacob used the Formidable Pro plugin to create custom login and registration forms. Next, he created two dedicated pages (shown above) for registration and logging in, where he embedded the forms using relevant shortcodes.
Types and Views
Types allow the definition of custom post types and their extension with additional custom fields. A few taxonomies are also defined to categorize custom posts. Some examples are shown below.
Over 20 Views were used in Jacob’s site. Some of the pages combine elements from other plugins, such as CRED or WooCommerce.
Jacob used CRED to quickly create a working prototype for creating Vendors profiles, which looked like the following.
The Access plugin is an essential part of the popupsters.com site.
Access was used:
- to create different User Roles (see the first screenshot below),
- managing pages by roles (see the next screenshots below).
An interesting feature when using Access is combining it with the Nav Menu Roles plugin. This plugin allows you to control what your users can see during navigation according to their roles. Thus, you can hide some items from your menu and make them visible only to users with specific roles.
For example, the image above shows a menu displayed on a Vendor’s Landing Page. You can see that there is an additional item, Partners and Clients, which is normally invisible when you look at the main navigation page on popupsters.com.
Attending some events requires that Vendors pay a fee. Jacob used the WooCommerce Booking plugin, a WooCommerce extension that supports a new product type, as a bookable product for date-based bookings.
You can define the days when your service is available. People then request your appointments and you can approve the request.
If you want to see more details of how the WooCommerce Booking extension works, please refer to this post. You will find another video, which has been recorded by another of the plugin’s happy users.
Jacob defined a new WooCommerce bookable product for each chargeable event and set the schedule for when the event is available to attend.
One of these products is Hatch today lunch popups. If you are a food Vendor, you can apply to be a lunch provider in a coworking space in San Francisco.
Next, we can see how booking a space for an event looks from the perspective of a visitor to the site (a Vendor in this case).
Thus, the WooComerce bookings extension allows you to create a Bookable Product. However, the Vendors are actually booking (from their perspective) a space at an event (which is defined as a Custom Post Type called Event).
The Vendor enters an Event single page, such as that in the screenshot shown below, and they can view a form to submit.
The question is: how did Jacob and his team connect a WooCommerce product with a single Event? In other words, how did they make a Bookable Product form appear on the single Event page?
The answer is that they simply used a shortcode for the Bookable Product placed in the Event page created from the Modern Tribe WooCommerce Tickets plugin.
Again, we can see the power of using shortcodes. They allow you to combine information derived from different plugins.
Finally, in this case study, we introduced popupsters.com, a real membership site based on WordPress. It might appear to be fairly complex, but not necessarily, and certainly not for Jacob. Here is how Jacob answered the question posed in the title.
Building a membership site is a piece of cake in its simplest form, provided that you know what you want to build initially. However, it can be a HUGE challenge if you are building something similar to what we produced with multiple user types, various forms to complete, and profile creation, as well as connecting an ecommerce solution to charge for various products or services.
Looking back, we could have planned to simplify everything now that we know a lot more about the customers and their feedback.
The following is Jacob’s concise guide to building a membership site:
- Create custom users via Access.
- Build all the registration and login forms with Formidable or GravityForms.
- Build all of the CPT with Types.
- Build all of the pages and layouts with Views.
- Use CRED on the admin side to create all of the admin forms, and for all of the user-facing forms on the front-end, if needed.
- Use WooCommerce for anything related to processing transactions with a shopping cart.
- Use a custom theme from scratch, assuming that you have produced the complete design or used a theme that is already built and has significant capabilities. For PopUpsters, we used a WooTheme. This will change in the near future with updates.
We hope that we have inspired you by describing Jacob’s case study so building a membership site with WordPress will also be a piece of cake for you.
If you have already built a membership site with Toolset, please let us know. We will contact you regarding a future case study.