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.

Exploring Memberlite Features: The [memberlite_subpagelist] Shortcode

Before starting PMPro, Jason and I did a lot of custom website development. In our consulting work, we regularly used a shortcode I wrote to pull in titles and excerpts of a page’s children, with lots of attributes and display options to control the output. We call this shortcode [memberlite_subpagelist] and have included it in the Memberlite theme.


How it Works

The basic idea of the shortcode is to shows a list of a given page’s subpages in the order you define. It allows you to easily create a “digest” page of content, that is dynamically drawn based on the hierarchy of pages defined. If a URL changes, you update a page title, or change the body content of a page, there’s no need to go back and update your digest page: the shortcode handles this all for you.

We use this shortcode on almost every top level menu page here on the Paid Memberships Pro website. The documentation page shows the standard DIV layout, our Plus Add Ons page shows the three column grid with excerpt option, and the Memberlite Theme demo’s color schemes page shows a three column grid with thumbnail only.


Screenshots


Attributes include:

The shortcode includes attributes for customizing the display, selecting or excluding pages, defining the page list sort order and “orderby” element.

You can also set the output to include or hide the page’s feature image, and define the size of the image from the default image sizes of WordPress (“thumbnail”, “medium”, “large” and “full”).

Read Shortcode Documentation Download Memberlite