Memberstack 2.0 + Themeco Cornerstone Integration Cheatsheet

1. Setting Up Memberstack in a Cornerstone Site
	•	Install Memberstack for WordPress: Use the official Memberstack plugin to simplify integration. Install and activate “Memberstack – Member Management & Content Protection” from the WordPress plugin directory .
	•	Add Your Memberstack App ID: In WordPress admin, go to Settings > Memberstack and enter the App ID from your Memberstack 2.0 dashboard . This injects the required Memberstack script site-wide and enables visual components.
	•	Cornerstone Compatibility: The Memberstack plugin is page-builder friendly . It provides built-in elements or shortcodes for popular builders (Bricks, Elementor, Divi, etc.), and works with Cornerstone via shortcodes or custom code. No manual <script> tags needed if using the plugin (it loads Memberstack’s script automatically after App ID is added).

2. Dynamic Member Content in Cornerstone

Memberstack uses HTML data attributes to personalize and protect content on any site. In Cornerstone, you can embed these attributes within your content to show member-specific text or hide/show elements based on login status or membership.
	•	Member Data in Text: Use the data-ms-member attribute to display member fields (e.g. email, name) or to bind form inputs to member data. For example, <span data-ms-member="email"></span> will show the logged-in member’s email, and an <input data-ms-member="email"> will pre-fill or submit the email . You can use any custom field ID from your Memberstack dashboard in place of "email" . This works inside any Cornerstone element that accepts HTML. (Tip: In Cornerstone’s Text element, switch to HTML mode to add these spans/inputs, or use a Raw Content element.)
	•	Show/Hide (Gated) Content: Wrap or mark sections with data-ms-content to control visibility. For example:
	•	<div data-ms-content="members">...</div> – Visible only when a member is logged in, hidden if logged out .
	•	<div data-ms-content="!members">...</div> – Visible only when logged out, hidden once a member logs in (useful for login/sign-up prompts) .
	•	<div data-ms-content="CONTENT-ID">...</div> – Visible only to members who have access to a specific gated content group or plan. CONTENT-ID is the identifier Memberstack generates when you define Gated Content in the Memberstack dashboard . Members without the required plan (or who are logged out) won’t see this content. Prepend ! to the ID (e.g. data-ms-content="!CONTENT-ID") to invert the rule (show when the member does not have that plan) .
	•	Using in Cornerstone: By default, Cornerstone doesn’t provide a GUI field to add arbitrary data- attributes to elements . You have a few options to include the above attributes:
	1.	Raw Content Element: Easiest method – drag a Raw Content element into your layout. In its settings, enter your custom HTML with the data-ms-* attributes. Cornerstone will output it exactly as written . This is perfect for inserting Memberstack-protected blocks or data-driven text.
	2.	Text/Headline Elements: If using a regular text element, toggle to HTML view and include <div> wrappers or <span> tags with the data attributes as needed. Ensure the element’s content is saved as HTML.
	3.	Global Blocks/Shortcodes: Alternatively, use the Memberstack shortcode [memberstack_protected] (provided by the plugin) to wrap protected content in Cornerstone text elements (see Section 4 for shortcode usage). This shortcode will internally apply the correct data-ms-content rules to hide/show its contents.

⚠️ Note: Content hidden via data-ms-content is only protected on the front-end after Memberstack’s script runs. The HTML is still delivered to the page (then immediately hidden by Memberstack if the user lacks access) . This provides a good user experience but is not 100% secure for extremely sensitive data. For truly secure content (like files or high-security info), use Memberstack’s Hosted Content or server-side protection . Always assume anything in the HTML could be seen by a determined user and plan accordingly for security.

3. Custom Cornerstone Elements for Memberstack Attributes

For a more integrated builder experience, developers can create custom Cornerstone elements that output Memberstack attributes. This lets you add Memberstack controls (like “Show if logged in”) directly in the Cornerstone interface. Themeco’s Element API allows registration of new elements via code (in a child theme’s functions.php or a custom plugin)  . Key steps to create a custom element for Memberstack:
	•	Element Definition: Use the cs_register_element hook to define a new element. Provide a unique name, title, and callbacks for the element’s controls (builder settings UI) and render output. For example, you might register an element called “Protected Container” that outputs a <div> with a data-ms-content attribute.
	•	Controls (Builder UI): In your element’s PHP definition, set up controls that let the user choose the visibility condition. For instance, a dropdown or toggle for “Visibility” with options like “Logged In Members” vs “Logged Out” vs “Specific Plan ID”. You might also include a text input for a Plan/Content ID if the user selects a plan-specific option. These controls should map to element values (e.g. a value ms_condition or ms_content_attr) that you’ll use in the render function.
	•	Render Function: This PHP function outputs the actual HTML for the element on the front-end. Use Cornerstone’s helper cs_atts() to build a string of HTML attributes safely. For example:

function ms_protected_render($data) {
  $condition = $data['ms_condition'];  // e.g. "members", "!members" or a Content ID
  $atts = cs_atts(array(
    'class'            => cs_attr_class($data['mod_id'], 'ms-protected'),  // include unique element class
    'data-ms-content'  => $condition
  ));
  // Output a div wrapper with inner content.
  return "<div $atts>{$data['content']}</div>";
}

This would produce HTML like <div class="ms-protected x-el-12345" data-ms-content="members">...inner content...</div> on the live site. (The cs_attr_class ensures a unique class tied to the module ID for styling .) The inner ${data['content']} would be the content placed inside this custom element (if you set the element to allow child content).

	•	Builder Preview: After registering, your custom “Protected Container” element will appear in Cornerstone’s element library. The builder preview will always show the element’s content (since you are editing in WP admin), but on the live site Memberstack will hide or show it per the data-ms-content rule. You can design the inner content normally in Cornerstone.

Creating custom elements requires familiarity with PHP and the Cornerstone Element API, but it provides a seamless way for content editors to apply Memberstack gating without manually editing HTML. (Refer to Themeco’s Element API documentation for a full guide on custom elements  ).

4. Memberstack Forms and Auth in Cornerstone (Login, Signup, Profile, Logout)

Common membership functions – user signup, login, profile edits, and logout – can be implemented inside Cornerstone using Memberstack’s data attributes or the plugin’s shortcodes:
	•	Signup Form: To create a registration form, use a form element with data-ms-form="signup". Inside it, include inputs for email and password marked with data-ms-member="email" and data-ms-member="password" respectively . For example:

<form data-ms-form="signup">
  <input type="email" placeholder="Email" data-ms-member="email" required>
  <input type="password" placeholder="Password" data-ms-member="password" required>
  <button type="submit">Sign Up</button>
</form>

This form, when submitted, will create a new member (in Memberstack’s database) with no plan by default. To sign the user up directly into a specific plan or paid tier, add a data-ms-plan:add="PLAN_ID" or data-ms-price:add="PRICE_ID" attribute to the <form> (or to the submit button/link)  . The PLAN_ID or PRICE_ID comes from your Memberstack dashboard (for free and paid plans respectively).
Shortcut: The Memberstack WP plugin provides a shortcode [memberstack_signup] that you can place in a Raw Content or Text element to output a pre-built signup form . This saves time – you get a default form that you can style via CSS.

	•	Login Form: Similar approach: a form with data-ms-form="login" and inputs for email/password (data-ms-member="email" and data-ms-member="password") will handle member login . Example:

<form data-ms-form="login">
  <input type="text" placeholder="Email" data-ms-member="email">
  <input type="password" placeholder="Password" data-ms-member="password">
  <button type="submit">Log In</button>
</form>

On successful login, Memberstack will consider the user “logged in” on the front-end, reveal any data-ms-content="members" areas, and redirect if you’ve set up login redirects. By default, the form simply stays on the page (you can define a redirect URL in Memberstack project settings or use a special link with data-ms-action="login-redirect" ).
Shortcut: The shortcode [memberstack_login] will output a ready-made login form . You can drop this into a Code/Raw Content element in Cornerstone.

	•	Profile (Update) Form: To let logged-in users update their profile info (e.g. name, custom fields, etc.), use data-ms-form="profile" on a form. Each input inside should target a specific field via data-ms-member="FIELD_ID" . FIELD_ID is the identifier of a custom field (or built-in fields like "email"). For example, if you have a custom profile field with ID username:

<form data-ms-form="profile">
  <input type="text" data-ms-member="username" placeholder="Update Username">
  <button type="submit">Save Profile</button>
</form>

When the member submits this form, Memberstack will update that field in their profile (no page reload). You can include multiple inputs for different fields, and even allow password change by adding fields like data-ms-member="newPassword" along with currentPassword as outlined in Memberstack docs  .
Displaying Profile Info: Use the [memberstack_member] shortcode to display member data in text form (e.g., Welcome [memberstack_member field="username"]!). This shortcode can output any profile field; the field attribute should be the field’s ID or a built-in field name. Alternatively, use spans with data-ms-member as described in Section 2 to inject dynamic text like the member’s name into a Cornerstone text element.

	•	Logout: To add a logout button or link, you can simply create a link with the attribute data-ms-action="logout" . For example: <a data-ms-action="logout" href="#">Log out</a>. When clicked, Memberstack will log the user out (end their session) and optionally redirect them (you can set a logout redirect URL in your Memberstack settings). The element will also be hidden automatically when no one is logged in (Memberstack hides logout links for logged-out visitors by default ).
The plugin provides a shortcode [memberstack_logout] which generates a logout link as well . You might use this in a menu or header via a Text element or Raw Content.

Integration Tip: All these forms and links can be styled freely with CSS. You can use Cornerstone’s built-in form elements and just add the appropriate data-ms-* attributes via the element’s Customize > Attributes settings (for elements that support custom attributes). If Cornerstone’s UI doesn’t allow adding the attribute to a given element, use a Raw Content element to write the form HTML manually. The Memberstack script will handle the functionality (form submission, authentication, etc.) as long as the structure and attributes match the documentation.

5. Cornerstone Rendering Considerations (Dynamic/AJAX Content)

Cornerstone (especially Themeco’s Pro builder) is a single-page app when designing, but on the front-end it outputs static HTML. Here are some things to keep in mind to ensure Memberstack works smoothly:
	•	Builder Preview vs Live Site: In the Cornerstone editor, you are logged in as a WordPress admin, but Memberstack may not consider you as a “member” by default. Don’t be alarmed if your data-ms-content="members" sections appear hidden or unstyled in the live preview. Memberstack might treat the preview as a logged-out state (unless you happen to be logged into Memberstack in that browser). To design gated sections in Cornerstone, you can temporarily remove the data-ms-content attribute or use the tip below so you can see them in the editor. Another approach is to add the data-ms-bind:style="display:block" attribute to ensure the element is forced visible by Memberstack when allowed , and then manually hide it in the builder (e.g., apply a temporary hidden style) until you finish designing. Just remember to remove any manual hide before going live, so Memberstack controls it.
	•	Dynamic or AJAX-loaded Sections: If your site uses any AJAX to load new content or if you have Cornerstone elements that inject content after page load (e.g., a Tab element that fetches content via JS), you may need to re-initialize Memberstack for that new content. By default, Memberstack’s data-attribute checks run on page load and on login/signup events. Content added later (without a full page refresh) might not automatically be gated. Currently, Memberstack does not expose a public “re-scan” function for content, so the simplest solution is to trigger a page reload after certain actions (or ensure critical content is present on initial load). For example, after a member logs in via a modal, you might redirect them to a new page (or their dashboard) rather than loading it via AJAX, so that all Memberstack protections apply fresh. If you must load content dynamically, consider calling window.location.reload() after loading, or structure the site to avoid needing that.
	•	Known Compatibility Issues: Cornerstone doesn’t allow adding data- attributes directly through its UI in standard elements  (unlike builders such as Bricks). This is not a bug, but a design choice. The workaround, as discussed, is to use Raw Content or custom elements. Also, if using Cornerstone’s accordions, modals, or other interactive elements, test them with Memberstack’s gating. In most cases, Memberstack’s script will hide/show the element container correctly, but ensure that hiding a parent doesn’t break the child element’s intended behavior when shown. For example, a logged-out user might not see a modal trigger at all if it’s wrapped in a data-ms-content="members" container (which is what you want for protection). Just keep track of which elements are gated.
	•	Caching and Memberstack: If you use WordPress caching or a CDN, be careful not to serve cached pages to logged-in members vs logged-out visitors indiscriminately. Memberstack gating is client-side, so a cached page will still have the gated content in the HTML. Typically, this is fine because Memberstack will hide it on render, but if a cached page is served after Memberstack runs, it could expose content. It’s safest to disable page caching for pages with sensitive member content or use caching solutions that can differentiate users (if possible). At minimum, test your site thoroughly: log in/out and ensure gated sections appear/disappear as expected with caching enabled.

6. Divi & Bricks Integration Examples (Context & Parity)

It’s useful to compare how other builders handle Memberstack, to mirror similar functionality in Cornerstone:
	•	Divi: The Memberstack plugin advertises “built-in module support” for Divi . This means when the plugin is active, you should find Memberstack modules in Divi’s builder (e.g. a Memberstack Login Form module, Signup Form module, etc.). These modules are essentially pre-configured pieces (likely equivalent to the [memberstack_login] and [memberstack_signup] shortcodes) that you can drag into Divi layouts. Divi doesn’t natively allow arbitrary data attributes on its elements either, so using the provided modules or the generic Code Module is the way to go. For example, in Divi you could add a Code Module and paste a <div data-ms-content="members">Restricted content</div> or use [memberstack_protected]Restricted content[/memberstack_protected]. Divi will render the shortcode output on the front-end accordingly. Also, Divi has a built-in Display Conditions feature for its sections/modules (e.g., show based on WordPress login status), but that does not know about Memberstack’s login state – so prefer Memberstack’s own attributes for controlling visibility. Use Divi’s condition only if you want to double-protect via WordPress user roles (in some cases you might create parallel WP user accounts, but Memberstack doesn’t require that).
	•	Bricks Builder: Bricks is very flexible with custom attributes, and the Memberstack plugin provides “native elements for forms and buttons” for Bricks . In Bricks, you can select any element and add custom attributes in its settings, which means you could, for example, take a Bricks Section element and add data-ms-content="members" right in the GUI to protect that section. The plugin’s native Bricks elements likely include a Memberstack Login Form element and Memberstack Signup Form element (to insert forms without coding), and perhaps elements for logout button or modal triggers. If you prefer, you can also use Bricks’ regular Form element: just set the form’s HTML attributes data-ms-form="login" (or “signup”) and mark the input fields accordingly. Bricks will output those attributes on the front-end, and Memberstack will handle the rest. Because Bricks allows custom attributes natively, it’s a bit easier to implement fine-grained show/hide logic than in Cornerstone – but by using Cornerstone’s Raw Content or custom element approach, you can achieve the same end result.
	•	Elementor & Others: (Not explicitly asked, but for completeness) Elementor has custom widgets provided by the Memberstack plugin . These likely correspond to login/signup forms and perhaps a protected section widget. In builders like Oxygen or Beaver Builder (or any builder not officially integrated), the strategy is the same as we use in Cornerstone: embed the Memberstack data attributes via HTML modules or shortcodes.

Goal for Parity: You can achieve feature parity in Cornerstone by using the techniques above:
	•	Use shortcodes or raw HTML for forms (just like native builder elements would do).
	•	Use a custom wrapper element or Raw Content for conditional sections (similar to how other builders let you input attributes).
	•	The end user experience (members logging in, seeing gated content, etc.) will be the same across builders, as it’s all powered by Memberstack’s front-end logic.

Finally, always refer to Memberstack’s latest docs for any new attributes or methods. As of May 2025, the above represents the current best practices for integrating Memberstack 2.0 with Themeco’s Cornerstone builder, ensuring that both the developer and AI-generated code can follow a consistent pattern for success. Happy building!

Sources:
	•	Memberstack 2.0 Documentation – Data Attributes for Member Data and Content Gating    
	•	Memberstack 2.0 Documentation – Forms and Actions (Login, Signup, Profile, Logout)   
	•	Themeco Cornerstone Docs – Raw Content Element (adding custom HTML) ; Element API (Custom Element Render with data attributes) 
	•	Memberstack WordPress Plugin Readme – Integration features (Page Builders, Shortcodes)  
	•	Themeco Forum – Cornerstone custom data-attributes (need for custom element)  and Memberstack Help – Show/Hide Elements guide (visibility conditions) .