How to Show Your Memberships in Tabs or Accordion

MemberPress already has an option to show all memberships on one page if you go for MemberPress Groups. However, what if your memberships are different enough so that upgrading/downgrading doesn't make sense, or you simply don't want to use that feature due to one reason or another?

You have probably by now noticed that every membership creates a set of shortcodes that you can access by clicking the Membership Shortcodes link in the Registration tab of the Membership Options box.

You'll notice two shortcodes are generated. For this tutorial, you'll need the lower one, which contains the ID part so, you'll need to prepare the shortcodes of all memberships you want to use.

Now, you could insert those shortcodes in a page or post directly, and that would work, but you'd see that all registration fields would be instantly visible, and if you have three or more memberships you want to add, it won't look pretty since the page would be quite long with a lot of fields being shown at once.

In order to make it a lot prettier, you'll need to install and activate the Tab - Accordion plugin. Once the activation is complete, you'll get a new section in your WordPress Dashboard:

After that, you're ready to continue. The user interface might feel a bit counter-intuitive initially, but if you follow these steps, you'll be up and running in no time. You can start by clicking on the Create Now button.

You'll see eight available tabs and eight available accordions in the free versions; for more, you can upgrade to the Pro version of the plugin.

Start by clicking on the Choose Theme button on one of the tabs or accordions you want to create. You'll get this on the left-hand side of the screen:

Click the "plus" symbol in the Tabs Fields row, and you'll see this:

You'll get three tabs already prepared (but you can add more or delete the third one), which is perfect for our example since we'll be adding our Bronze Membership, Silver Membership and Gold Membership. Next, click the pen symbol in order to edit each tab individually. You'll be on the Menu tab. Type in membership's name, select a tab's icon and color of text and background if you want (the other two options are Pro only), click the Content tab, and paste the membership's shortcode in the Text view.

Don't forget to click the "Update content" button. You'll most likely need to scroll all the way down to see it.

Repeat for the Silver and Gold Membership.

Those other options like General Options in the Tabs tab and other options in Menu and Content tabs will allow you to adjust those tabs visually, in any way you want. We recommend to spend some time playing with those to see how they affect the visual display.

Don't forget to click the Save/Update button after every change. When done, click the "Back to WP" button.

You'll be asked whether you want to leave the page. Confirm by clicking the "Leave Page" button.

You'll see a completed tab, which will also generate a shortcode you'll need to copy and paste into a page or post of your choice.

By clicking the Pen icon, you'll be able to go back to editing, make a copy of the tab by clicking the Copy icon or trash it by clicking the Trash Can icon. The Preview (eye) icon won't do you much good since, while previewing, it will just show those memberships' shortcodes you've added previously.

However, after you publish that post or page, with the shortcode in it, you'll see something like this:

Your websites visitors and members will be able to move between the three (or thirty-three) of your memberships :-) by simply clicking on a tab.

If you end up with errors about values not being filled in, you'll need to activate the Global CSS Styles option in MemberPress -> Settings -> General tab.

And that's it, you've created much better looking tabulated memberships, or memberships in an accordion, depending upon which option you prefer.