Using Page Builders to Enhance Your Site’s Membership Pages

Page builders are a popular way to create a more visually appealing user experience on your site. Many Paid Memberships Pro users are confused with how to properly use these tools alongside the required shortcodes on various pages of your membership site, such as the pricing page or membership account page.

This post covers how to resolve conflicts between plugin shortcodes and popular page builders such as SiteOrigin Page Builder, Elementor and Beaver Builder.


Ensuring Compatibility

Below are a list of common issues we see when trying to use Paid Memberships Pro with a page builder.

  1. Required page shortcodes don’t render.

    The main issue that we see related to Page Builders is that default page shortcodes, such as [pmpro_levels] or [pmpro_account], don’t render. You’ll know you are experiencing this issue if you go through the Initial Plugin Setup, then click to view your “Membership Pricing” page and see something like this:

    Not all of the Paid Memberships Pro shortcodes will render as actual content when using a live editing experience. I have seen different behavior among all of the builders I tested. The best way to ensure the page is loading properly is to save and publish your content then view the page on the frontend.

    If the shortcode still isn’t rendering, make sure you are using your builder’s standard text or shortcode widget/component/block for the page’s required shortcode. I have seen cases where the builder places your page’s shortcode in a special block type that will not render shortcodes. Here’s a list of all required shortcodes for your Membership pages.

  2. “Live Editors” don’t load or redirect to the “Membership Levels” page.

    This issue is present if you try to edit a page like the “Membership Account” page in a “Live Editor” experience, but the editor redirects you to the Membership Levels page. To resolve this, you must make sure that your administrator account has a membership level. This is due to a conflict where the builder is trying to offer a “preview” of the page, while our membership plugin is trying to restrict your access to these members-only pages. Having a membership level on your administrator account (even you create a hidden, private level that only your Admin account has) resolves this.

  3. Members-only content isn’t protected.

    Because Page Builders rely heavily on their own logic to render page layouts, sometimes the builder’s content filters run later than the Paid Memberships Pro filter. This can result in protected content being public. The solution to this issue has been covered previously in this article, which outlines how to run the Paid Memberships Pro content filters with a higher priority (after the builder has done its content-formatting magic).

    Alternately, you can use this method to redirect non-members away from members-only content. This completely bypasses the need to filter members-only content and is the most straightforward approach to tackling this issue.

  4. “Live Editor” on the checkout page doesn’t load.

    The Membership Checkout page relies on a level ID being passed through the URL (usually from the Membership Levels page) in order to display the appropriate level details at checkout. When using a live preview or editor experience, there is no level ID passed in the URL so the page either fails to load or redirects to the Membership Levels page. You can resolve this by adding a Custom Field with the key or name pmpro_default_level and value of any valid level ID. This allows the “Live Editor” to locate a level for the preview page. Now your Membership Checkout page’s live editor can draw in some level’s content and allow the preview.

  5. I don’t see the “Restrict Membership” box on the editor.

    If your page builder uses a live editing format, chances are that the “Restrict Membership” metabox is not part of this editing experience. After you have made your page design and content changes via your builder’s editor, you will need to also edit the post with the WordPress editor and select the appropriate membership levels to restrict access. Read this guide for more help on restricting content using Paid Memberships Pro.

All of the above issues have a solution, so please don’t panic. We are looking for ways to build support into our plugin for popular open source page builders. For now, we’ve tested Paid Memberships Pro compatibility with the list of Page Builders below. These were tested on a fresh WordPress site with only the core Paid Memberships Pro plugin, the Twenty Sixteen WordPress Theme and using only that specific Page Builder. If you are using another open source page builder, please post a comment below and we will test which combination of solutions are needed to make the two plugins compatible.


Page Builder by SiteOrigin

Page Builder Info: WordPress Repository | Widgets Bundle | Website

This builder is one of the most popular open source builders available via the WordPress.org Repository. In my testing, I have found that you need to modify a few of the ways our core plugin renders content in order to ensure compatibility with SiteOrigin’s builder. The code recipe below should be included in a plugin for PMPro Customizations.

In this recipe, we are removing some content filters we add to your site’s level descriptions and confirmation messages, as they were causing issues when the builder attempted to render the membership checkout and confirmation page shortcodes.

When editing the Membership Checkout page, you must set a Custom Field on the Membership Checkout page with the key pmpro_default_level and value of any valid level ID. This allows the “Live Editor” to locate a level for the preview page.

You must also make sure that your administrator account has a membership level in order to use the “Live Editor” experience. This is due to the fact that the Page Builder by SiteOrigin editor is trying to offer you a “preview” of the page, while our membership plugin is trying to restrict your access to these members-only pages. Having a membership level on your administrator account (even you create a hidden, private level that only your Admin account has) resolves this.


Elementor

Page Builder Info: WordPress Repository | Website

This builder is gaining popularity very quickly and its easy to see why. Because Elementor is a drag & drop live editor, there are some special considerations you need to make specifically when attempting to use the builder to edit your Membership Checkout page. When editing the Membership Checkout page, you must set a Custom Field on the Membership Checkout page with the key pmpro_default_level and value of any valid level ID. This allows the live preview editor to locate a level for the preview page. This step must be done before you convert to editing the page with the live preview.

You must also make sure that your administrator account has a membership level in order to use the “Edit with Elementor” experience. This is due to the fact that the Elementor editor is trying to offer you a “preview” of the page, while our membership plugin is trying to restrict your access to these members-only pages. Having a membership level on your administrator account (even you create a hidden, private level that only your Admin account has) resolves this.

You must also add a custom code recipe that filters your content later as well as removes the default content filters our plugin uses on your site’s level description and confirmation messages. The code recipe below should be included in a plugin for PMPro Customizations.


Beaver Builder

Page Builder Info: WordPress Repository | Website

Beaver Builder offers a live editing experience for WordPress and premium versions offer pre-built templates and layouts which make it simple to design well thought out content. In my testing it was one of the most intuitive builders in this list. There are a few steps to take to ensure compatibility with Beaver Builder. The code recipe below should be included in a plugin for PMPro Customizations.

When editing the Membership Checkout page, you must first set a Custom Field with the key pmpro_default_level and value of any valid level ID. This step must be done before you convert to editing the page with Beaver Builder. This allows the live preview editor to locate a level for the preview page.

You must also make sure that your administrator account has a membership level in order to use the live editor experience. This is due to the fact that the Beaver Builder editor is trying to offer you a “preview” of the page, while our membership plugin is trying to restrict your access to these members-only pages. Having a membership level on your administrator account (even you create a hidden, private level that only your Admin account has) resolves this.

You must also add a custom code recipe that filters your content later. This allows Beaver Builder to process all the layout-related filters on your content, then allows Paid Memberships Pro to apply appropriate membership restrictions. The code recipe below should be included in a plugin for PMPro Customizations.


More about Page Builder Compatibility

I have also seen some funny behavior specifically if you had generated the PMPro pages prior to activating the Page Builder. If your builder isn’t playing nicely with our shortcodes, try to open the page in the builder’s editor then save the page. For some reason this occasionally resolves the issue and then your shortcode will render.

  1. Edit each Page under Memberships > Page Settings.
  2. Swap to your builder’s rich page editing experience.
  3. Make sure the appropriate page’s shortcode is in the editor.
  4. Save the page.

Using another Page Builder?

If we didn’t cover the builder you are using or if you have Page Builder-like features as part of your theme, post a comment below and we will try to test it and work out a solution. We are only able to offer compatibility testing if the builder you are using is also open source, like Paid Memberships Pro and the page builders mentioned in this post.

Add On Updates for July 2018

This post recaps the Paid Memberships Pro Add Ons recently updated. Plus or Unlimited members can upgrade through their WordPress dashboard under Dashboard > Updates or Memberships > Add Ons. Be sure to backup your site before performing updates.


BuddyPress Integration Add On

BuddyPress Integration

Our BuddyPress Integration Add On allows you to manage access to your BuddyPress Community using Paid Memberships Pro. v1.1 and v1.1.1 resolve several bugs and offer enhancements as listed below:

  • BUG FIX: Fixed fatal errors when PMPro or BuddyPress isn’t activated.
  • BUG FIX: Fixed bug where membership level changes were creatinig fatal errors if Groups was not active.
  • BUG FIX: Fixed bug where the members directory was not being filtered correctly.
  • BUG FIX: Fixed bug where logged in users were being redirected to the BuddyPress registration page even though logged in users can’t register.
  • ENHANCEMENT: Doublechecking pmpro_hasMembershipLevel so plugins like PMPro Approvals can still filter which levels are included when calculating restrictions.

View the Add On


Capture Name and Address

Capture Name and Address for Free Levels

If you’d like to capture the member’s name and address fields for a free membership level or if you are using an offsite payment gateway, check out this Add On.

v.3.3 fixes an issue where name fields weren’t updating WordPress when PayPal Express was used.

View the Add On


Custom Post Type Membership Access

Custom Post Type Membership Access

This Add On adds the ‘Require Membership’ meta box to all CPTs selected and redirects non-members to the selected page.

v.2.1 of the Add On fixes a bug with redirects when no CPTs were selected on the settings page but the is_singular check was still returning true. This resulted in ALL single content posts and pages being redirected.

View the Add On


Group Discount Codes

This plugin will help to manage grouped discount codes or large numbers of unique discount codes with the same pricing.

v.3.1 and v.3.2 of the plugin add features related to viewing individual group code activity. The release adds a “Group Code Uses” column to the Memberships > Discount Codes page. This column will now show a sum of child codes that have been used. The release also adds a “Group Code” column to the Memberships > Orders CSV export.

View the Add On


Subscription Delays

Subscription Delays

This Add On adds a “delay” field to membership levels and discount codes, allowing you to set a variable-length period between your initial payment (if required) and recurring subscription payment.

v.4.6 of the Add On fixes a bug where an invalid startdate was returned from pmpro_profile_start_date filter handler. This resulted in double payments at checkout for levels that had no subscription delay set.

View the Add On


WooCommerce Integration

This plugin aggregates several features for integrating your Membership site with WooCommerce to sell Memberships as a product, set a global % discount on products by level or set a per-product members-only price. Several updates have been made to the Add On through v1.6.1, including:

  • BUG FIX: Fixed fatal error in pmprowoo_get_membership_products_from_order() that was happening on some systems.
  • ENHANCEMENT: Localization/GlotPress support.
  • BUG FIX: Fixed bug when deselecting the autocomplete option on a membership product.
  • BUG FIX: Now checking if a user has a different subscription linked to their membership level before removing a user’s membership level. Users switching between subscriptions for the same level would have their level removed. (Thanks, Ted Barnett)
  • BUG FIX: Fixed issues when a product with a sale price also has membership pricing.
  • BUG FIX/ENHANCEMENT: Updated to work with the latest versions of WooCommerce (3.4.2) and WooCommerce Subscriptions (2.2.22).
  • ENHANCEMENT: Added a filter pmprowoo_get_membership_price, which can be used to support variable products via custom code (like this)
  • ENHANCEMENT: Added support for PMPro Multiple Memberships per User.

View the Add On

Restrict Checkout for Users with a History of Refunds

Let’s face it, dealing with refunds is an unavoidable part of your membership business. Some number of your refunds will be from legitimate users that realize they do not need or want your membership any more.

Some refunds, though, may be from abusive users who know that they can sign up, consume your membership product (whether that’s support, premium content or guides, downloads and more), then cancel and request a refund right away. If you are seeing this become a widespread problem, check out the code recipes below.


About the Code Recipe

This post includes three different recipes based on how you want to approach the restriction on a new checkout. In each case, the user will see a notice if they try to purchase membership that can be adjusted for your needs. The default message reads: Please contact us about your account to complete checkout..

  1. Restrict checkout if the LAST order was refunded,
  2. Restrict checkout if the user has ANY refunded order history,
  3. Restrict checkout if the user has ANY refunded order history, but ALLOW checkout if their LAST order was successful.

This code recipe requires a Plus Account or higher.

View Membership Options


More about Refunds and PMPro

If you are new to PMPro, check out some of these other articles related to member refunds:

Restrict the display of Advanced Custom Fields (ACF) fields by Membership Level

Advanced Custom Fields PluginAdvanced Custom Fields is a popular plugin available in the WordPress.org Plugin Repository. The plugin allows you to add structured information to your posts, pages, and more.

This guide explains three primary methods to hide or show fields based on the membership requirements for the post.


Option 1: The pmpro_hasMembershipLevel() function.

Since the ACF plugin requires you to add custom PHP functions to your theme’s template files, one of the easiest ways to restrict the display of fields is to wrap your entire display in the pmpro_hasMembershipLevel() function. Here’s an example of using the function in your template files:

You can read full documentation on the pmpro_hasMembershipLevel() function here.


Option 2: The pmpro_has_membership_access() function.

Similar to the option above, this method will look to the post’s required membership levels. You won’t need to specify the level IDs when using this function, it will inherit the membership protection from the “Require Membership” metabox for that post. Here’s an example of using the function in your template files:


Option 3: The acf/format_value Filter

If you’re using version 5+ of the Advanced Custom Fields plugin, you can write a single function that will filter all fields on a member-protected page. This code will uses the acf/format_value filter to check first if the user has access to the post and will then optionally restrict the display of the field.

Note that this will not restrict the display of any custom HTML you have in your page templates, but it is a simple solution that won’t require editing all of your theme files.


If you need help altering these recipes to suit your needs, feel free to get in touch with one of our Support Engineers on our Member Support Forum.

Allow members to optionally exclude their profile from the Member Directory

This code will add an “Exclude my profile from the member directory” field at membership checkout when using the Member Directory and Profile Pages Add On for Paid Memberships Pro.

"Exclude my profile from the member directory" field at checkout.


About the Recipe

The Member Directory and Profile Page Add On includes functionality to allow members to remove their profile from display. This field is added by default as a field on the user’s WordPress Profile. The recipe below adds that field at membership checkout (note that this recipe requires the Register Helper Add On).


The Code Recipe

This code recipe requires a Plus Account or higher.

View Membership Options

Integrate your membership site with 1,000+ third party apps via Zapier.

We’ve just launched our Zapier Integration in the WordPress Plugin Repository. You can now unlock integration with loads of third party apps offered via Zapier to send or receive data in your Paid Memberships Pro-powered membership site.


What is Zapier and what are Zaps?

Zapier is a service that moves info from one application to another. Think of it as a bridge that can connect your website to an external application or service.

Zapier uses the term ‘zap’ to refer to the basic connections that automate a process for you (a trigger with an event). Our Zapier Integration includes support for sending data from your membership site to an external application as well as receiving data from an external application into your Membership site.

View the Add On


What are some popular integrations I can set up using this Add On?

The more you familiarize yourself with Zapier and its supported apps, the more you will be able to imagine potential ways to extend your membership site. The Add On documentation page offers more details on what data is available via the integration, as well as the possible “actions” and “triggers” you can use in Zapier.

A few of the more popular ways we see Paid Memberships Pro working with Zapier to SEND data include:

  • Populating and Updating Google Sheets with new lead information from your Paid Memberships Pro site.
  • Integrate with a third-party email marketing program, like ActiveCampaign or Campaign Monitor, where there isn’t an existing Add On for PMPro.
  • Send member information to a CRM system like HubSpot or Salesforce.
  • Adding new lead information to an email sent to your Gmail address so you can personally follow up with your members.
  • Create invoices from membership orders in your QuickBooks Online account.

If you’re looking to RECEIVE data into your Membership site, some possibilities include:

  • Leverage a third-party gateway system such as ClickFunnels to sell membership and create accounts on your site.
  • Update a user’s membership level when they participate in social activities or register via third party apps.
  • Check a member’s level before providing access to a third party service.

Explore the Add On Documentation

Show a Member’s Level Name in Post Comments

When a member posts a comment on your site, the recipe below will display their Membership Level name following the comment author’s name.

This can be useful for many membership sites, specifically sites that have multiple tiers of membership which equate to a member’s status, skill-level or denote a relationship to your company.

The author name is also updated in the Comments section of the admin dashboard so you can tell what membership levels users have when approving pending comments. This has been particularly useful for us on our own site to tell which of our blog post commenters are paying members.

Show member level name next to author name in comment

This page requires a PMPro Core Account or higher.

Already have an account? Login Now »

New to this site? Register Now »

New BuddyPress Integration for Membership Communities using Paid Memberships Pro

We’ve just launched our BuddyPress Integration in the WordPress Plugin Repository. You can now restrict access to specific features of your BuddyPress community by membership level, allowing you to build a custom, private, and flexible members-only community.

View the Add On


BuddyPress Integration for Paid Memberships Pro WordPress PluginBuilding a Membership Community with your WordPress Site

BuddyPress adds community features to WordPress, including Member Profiles, Activity Streams, Direct Messaging, Notifications, and more. What many of you have already implemented via custom coding is now possible with one easy-to-use plugin.

With the help of this integration plugin, membership sites running Paid Memberships Pro can now take advantage of the following features:

  • Redirect users without access to a specific page which can be used to explain the community features and sell community membership.
  • Level-specific settings to restrict access to BuddyPress features including Group Creation, Single Group Viewing, Groups Page Viewing, Joining Groups, Public Messaging, Private Messaging, Send Friend Requests, Listing in the Directory.
  • Assign members to groups in BuddyPress.
  • Restricted access settings for users without a membership level.
  • Option to use the BuddyPress Registration process.
  • Assign “member types” by Membership Level.
  • Display a Member’s Level Name on their BuddyPress Profile.

Migrations Steps for Sites Using a Custom-Coded Solution

Prior to this Add On’s release, we did offer a custom-code solution to restrict BuddyPress access to Members. If you are using a custom solution loaded via a Plugin for PMPro Customizations, below are the steps to migrate to the new Add On-based solution.

  1. Locate the custom code in your Customizations Plugin.
  2. Uncomment or Remove the custom code. We recommend saving a copy of the code as a backup.
  3. Install and activate the BuddyPress Add On for Paid Memberships Pro.
  4. Configure the Add On settings per your unique restriction goals. Read the documentation page for help on setting up the Add On.

Screenshots

This slideshow requires JavaScript.


Explore the Add On Documentation
 

Preparing for Gutenberg: the New WordPress v5.0 Editor

GutenbergA new post editing and customization experience named “Gutenberg” is coming to WordPress. This post shares how the team at Paid Membership Pro is preparing, planning, and designing for the editor’s release to offer better tools and options for membership sites running our plugin.


What is Gutenberg and how can I learn more about it?

Unless you’ve been hiding under a rock, you’ve probably heard the name and maybe know a bit about the new Gutenberg editor. Gutenberg is an open source project currently offered as a WordPress Plugin. It’s being developed on GitHub and will soon be included as a core feature of WordPress.

The Gutenberg editing experience revolves around “blocks”.

These blocks are a unified way to style content that currently requires shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements. By allowing rich customization without deep knowledge of code, blocks make good on the promise of WordPress: broad functionality with a clear, consistent user experience.
via WordPress.org

You can read and learn more about Gutenberg in the official handbook. If you want to learn even more, check out WP Tavern’s post on A Collection of Gutenberg Conversations, Resources, and Videos.


How does Gutenberg work with Paid Memberships Pro?

We know that some Page Builders for WordPress have specific integration considerations when using Paid Memberships Pro. We want your to know that we have tested the latest release of Gutenberg and everything in Paid Memberships Pro works as expected. Everything that works in the current editor is going to work in the new editor.

Gutenberg is largely coded in JavaScript. Some parts of that code don’t interact with the server-side PHP at all. For example, Blocks are defined in JavaScript. And so if you wanted to limit Blocks by membership level, you would need to run that filter in the JavaScript. Going forward, the PHP-based hooks and filters we use to protect WordPress content and features won’t be enough to protect all of the things being done in JavaScript.

The future of WordPress is JavaScript, so Paid Memberships Pro needs to build tools for protecting content in JavaScript. This is an important consideration for our developers and other contributors to the Paid Memberships Pro open source project.


How can Paid Memberships Pro offer Gutenberg support?

We see lots of possibilities for custom PMPro blocks in Gutenberg, and there’s huge potential to extend our core membership plugin as well as our Add Ons.

Here are a few interesting ways we hope to leverage Gutenberg Blocks for PMPro:

  1. Gutenberg Blocks for all shortcodes.

    Any shortcode in Paid Memberships Pro will have a Block equivalent, including the plugin-page shortcodes. The new Blocks will be easier to move around in your page design and can have intuitive settings for customization.

  2. Break plugin-page shortcodes into several Blocks.

    Instead of one shortcode used per plugin page, we plan to break some of our shortcodes into multiple blocks? For example, our [pmpro_account] shortcode currently has a sections attribute, allowing you to customize the display of the membership, profile, invoices, and links areas of that page. Each of these sections could be its own block, making it easier to reposition and tweak them individually.

  3. Block-level Content Restriction

    The current [membership] shortcode allows you to wrap and restrict post content for specific membership levels. We plan to create a Membership Block with settings for the specific level IDs, status, session, and more. You would then be able to nest Blocks within this parent Block and design totally unique content based on the user viewing the page.

  4. Built-in Templates for best practice layouts for your membership sales pages.

  5. Gutenberg gives you the ability to define “Block Templates”, which are groups of Blocks in a preset layout. Block Templates will be a great way to share popular page layouts for landing pages, sales pages, pricing tables and more. We will find (and develop if necessary) the layouts best optimized for conversions to share with our users.

  6. Register Helper Fields as Blocks

    We know that our users would love a drag-and-drop interface for Register Helper. We are working to create a simplified (non-code) based custom user fields structure using Gutenberg Blocks. Custom user meta fields will be visually inserted into the Checkout Page for capture at Membership Checkout, or into the Member Directory and Profile Pages for a unique layout customized to your site’s member data?


What can you do with Gutenberg NOW?

Insert the Shortcode Block with GutenbergIf you’re using Paid Memberships Pro and would like start using Gutenberg for your WordPress editing experience, follow the steps below:

  1. Install and activate the Gutenberg plugin via Plugins > Add New > “Gutenberg”. “>[Download Link]
  2. Edit your Pages under Memberships > Page Settings.
  3. Insert the “Shortcode” block located under Blocks > Widgets.
  4. Move the page’s appropriate shortcode into the Shortcode Block.
  5. Update the page.
Note that for the “Checkout” page to preview properly, you must add a Level ID to the URL (i.e. /membership-checkout/?level=1).


Video: Using Gutenberg to design the Membership Account Page

I made a brief and basic video of how you can use the [pmpro_account] shortcode sections to create a column-type layout for your membership account page. This is not how we plan to offer Gutenberg support in the future, but for now it does give you a glimpse of what is possible. There’s no background music or narration – so please play your own tunes 🙂


We will continue to post updates on the blog here as we make progress on these efforts.

Building a Better Library of Video Documentation

Get your membership site up and running faster with these newly added setup videos. We’re expanding our video guides to help new membership sites to get started using the Paid Memberships Pro plugin.

Check out some of the new videos added below or browse the full library of video content.


Video: Setting up a Customizations Plugin
Video: Install Paid Memberships Pro

Video Tutorial: Initial Setup
Video: Adding a New Membership Level to Paid Memberships Pro


Video: Page Settings
Video: Payment Settings


Video: Email Settings
Video on Advanced Settings