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.

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.

Enhance Your Membership Levels Page with Member Badges

We’ve just added hooks to the Advanced Levels Page Shortcode Add On, allowing you to add unique content before and after the level information.

This recipe integrates the Member Badges Add On and displays the badge associated with each level in the output.


Member Badges on a Three Column Layout

The Code Recipe

This code recipe requires a PMPro Plus Account or higher.

View Membership Options


Member Badges on a Table Layout

The Code Recipe

This code recipe requires a PMPro Plus Account or higher.

View Membership Options


Available Hooks in the Advanced Levels Page Shortcode v.2.4+

Hooks for the “div” and “column” layouts:

do_action( 'pmproal_before_level', int $level_id, int string $layout );
do_action( 'pmproal_after_level', int $level_id, int string $layout );

Hooks for the “table” layout:

do_action( 'pmproal_extra_cols_before_header' );
do_action( 'pmproal_extra_cols_after_header' );
do_action( 'pmproal_extra_cols_before_body' );
do_action( 'pmproal_extra_cols_after_body' );

Note: hooks have not yet been added for the compare_table layout

Memberlite: Download the Import File to Setup a Demo Site

An import file containing demo content is now available for sites using the Memberlite Theme. The demo content covers basic theme features as well as the shortcodes available in the Memberlite Shortcodes plugin.


Downloading the Demo Content

The demo content file (.xml) is available on the Memberlite Theme website. We’ll continue to update and enhance the demo file as more features are added to the theme or as requests for a demonstration of specific theme features are made.


How to Set Up Your Demo Site

Demo content can be imported into a new or existing WordPress site. Just follow the steps below, omitting any steps that you already have completed for an existing site.

Be sure to make a backup of your site if you already have settings and content that you might want to revert to. [guide]
  1. Install and Activate Theme

  2. Install and Activate Plugins

  3. Import the Demo Content

  4. Set Up Paid Memberships Pro Levels & Pages

    • The theme demo is designed to reference three basic levels. You can simply name them Bronze, Silver, Gold and set any pricing. [level setup docs]
    • After setting up the levels, under the Memberships > Pages tab, click the link to generate the membership pages. [page setup docs]
  5. Assign the Menu

    • Navigate to Appearance > Menus
    • Assign the imported “Primary Menu” to the “Primary Menu” theme location.
  6. Assign the Static Front Page

    • Navigate to Appearance > Customize > Static Front Page
    • Set “Front Page displays” to “a static page”.
    • Assign “Home” to the “Front page”
    • Assign “Blog” to the “Posts page”

Note that you cannot undo the import. If you are working on an existing site, you may want to take a data backup before beginning the steps above.

 

Sitewide Membership Signup Banners for Memberlite – Three Sample Concepts

Convert more site visitors into members with these three sample callout banners for Memberlite.

There are many creative ways to display an advertisement for membership throughout your site (once I get started coming up with layout ideas I find it hard to stop). I find that an ad at the bottom of your page is a great place to start—it’s a catch all when the reader has reached the end of your content looking for the next page to view.


memberlite_before_footer_upgrade1Banner Sample 1: Membership Callout for Site Visitors and Members of Level ID 1

This demo is designed for a site with two levels: a free level and a support level for $10. The example checks to see if the page bottom banner has already been set; if it is not set, the visitor sees a callout and link to sign up OR upgrade to level ID 2. You can update the recipe with your own messaging and level IDs.

REQUIRES: Memberlite, Memberlite Shortcodes, Paid Memberships Pro.

This code recipe requires a PMPro Core Account or higher.

View Membership Options


memberlite_before_footer_upgrade2Banner Sample 2: Advertise Membership Signup for a Single Level + Login Link for Existing Members

This demo features a signup link for a single level as well as a link for existing members to login. The logic checks to see if there is a logged in user or if the page bottom banner has already been set; if neither is true, the visitor sees a callout with a link to sign up for level ID 1 or a link to log in. You can update the recipe with your own messaging and level IDs.

REQUIRES: Memberlite, Memberlite Shortcodes, Paid Memberships Pro.

This code recipe requires a PMPro Core Account or higher.

View Membership Options


memberlite_before_footer_upgrade3Sample 3: A Full 3-Column Levels Display for Site Visitors and Existing Level 1 or 2 Members

The final demo shows a full Membership Levels comparison for a site with three levels (or more). We use a model similar to this for our site here at Paid Memberships Pro. There’s a main heading to identify the section, the three levels compared side-by-side, and a link below for existing members to log in.

REQUIRES: Memberlite, Advanced Levels Page Shortcode Add On, Paid Memberships Pro.

This code recipe requires a PMPro Core Account or higher.

View Membership Options


If you’re not using Memberlite, check with your theme author to find a similar hook that you can use to add this banner or try this tutorial to insert ads within post content.

Add Credit Cards and PayPal Logos to Checkout when Using PayPal Gateway or Add PayPal Express Add On

This code gist is a bit of CSS that you can add to your theme or a helper customizations plugin’s custom css file. It adds the credit card logos and a PayPal logo to the “Select Payment Method” box shown on membership checkout.


How it Works

If you are using PayPal Website Payments Pro or our Add PayPal Express Add On with another main site gateway option, there is a “Select Payment Method” box on the checkout page.


Screenshot

pmpro-add-paypal-express-logos


The Code Recipe

This code recipe requires a PMPro Plus Account or higher.

View Membership Options


Some Special Notes

Make sure you download and place the logos in this .zip file in the appropriate place for your CSS. If you are using a PMPro Customizations file with custom CSS, you would place them in an “images” folder within your customizations plugin. If you are placing this code in your theme’s stylesheet, just place the images in your theme’s images folder.

Also, update or use your own Credit Card logos image if you don’t or can’t accept all of the payment options shown in the image. You can get additional credit card logos here.

Exploring Memberlite Features: The Tabs Shortcode

Here’s a tutorial on the [memberlite_tabs] and [memberlite_tab] shortcodes. These shortcodes add a tabbed content area when using the Memberlite theme.


Shortcode Code Example

[memberlite_tabs items="Item 1,Item 2,Item 3"]
[memberlite_tab class="text-center" item="Item 1"]This is the Item 1 tab content.[/memberlite_tab]
[memberlite_tab item="Item 2"]This is the Item 2 tab content.[/memberlite_tab]
[memberlite_tab class="text-2x" item="Item 3"]This is the Item 3 tab content.[/memberlite_tab]
[/memberlite_tabs]

[memberlite_tabs] Shortcode Attributes

  • items: A comma-separated list of tab names to display. (required; first in list is active)
  • class: An optional class/style to associate with the area. (optional)

[memberlite_tab] Shortcode Attributes

  • item: The name of the tab that this content is associated with. (required; must exactly match a tab listed in wrapper “items” attribute)
  • class: An optional class/style to associate with the area. (optional)

See it in action.

This is the Item 1 tab content.
This is the Item 2 tab content.
This is the Item 3 tab content.

Plugin to Convert Levels page to DIV layout (plus a fancy Three Column style code idea)

The default Paid Memberships Pro Membership Levels page is a table layout. Some membership pricing is better displayed NOT in a table – so we’ve just released an add on plugin that loads your membership levels in a DIV layout, and also includes the description text for the level (if you have entered it in the Edit Membership Level admin page) for each level.

View or Download the Add On

Default Levels page layout

Default Levels page layout

Layout using ONLY the new DIV layout add on

Layout using ONLY the new DIV layout add on

Layout using new add on + custom CSS in this post

Layout using new add on + custom CSS in this post

Continue reading for the special CSS code to achieve this look!

This page requires a PMPro Core Account or higher.

Already have an account? Login Now »

New to this site? Register Now »