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.

• SiteOrigin Page Builder
• Elementor
• Beaver Builder

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.