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 »

Screenshots of Various Paid Memberships Pro Frontend and Admin Pages

Wondering what Paid Memberships Pro will look like for visitors to your site? Wondering how (un)complicated our Admin pages are? I just added a page of screenshots that demo most frontend pages. I’m continuing to add more shots of the backend/admin pages, but hey – you gotta start somewhere! If you’re wondering what a certain feature will look like for your site, just download our plugin for free and see it yourself. Or, ask me and I’ll post some more screens.

Frontend Membership Pages

Admin Memberships Pages

Use CSS to hide an empty column on pmpro_levels page: No recurring payment

If you are using the default pmpro_levels shortcode on your Membership Levels page – depending on your pricing you may have an empty column under the “Subscription Information” or “Initial Payment” heading. CSS to the rescue! Here’s a block of code that can be used to hide the “Subscription Information” column (useful if all of your membership levels have initial payments only), as well as a little extra styling. Just place this block of code right into the Text / HTML editor of the page containing your levels shortcode (right before the shortcode) and you are good to go. Or make it your own and tweak anything in this block – colors, fonts, etc. ccf1afb32e6cbb718d2a1be574477194012 Note: This code won’t necessarily behave if you are using a customized version of levels.php Levels Page: Before Levels Page: After…

This page requires a PMPro Core Account or higher.

Already have an account? Login Now »

New to this site? Register Now »