MemberPress in Bricks

Updated on 18 Nov 2024

MemberPress is one of the most popular and comprehensive membership plugins for WordPress and this is what we use here at BricksLabs and our other membership sites to create membership plans, take payments and serve protected content to paying members.

This Pro tutorial aims to be a useful resource for using MemberPress in Bricks sites.

What’s covered:

• Render elements that have a class of members-only only to members that have a specific membership or memberships.
• Setting up including styling the Login and Account pages
• Custom condition to render elements based on membership ID(s)
• Making the sign-up forms on a custom membership page like our membership page work properly

Render elements that have a class of members-only only to members that have a specific membership or memberships

Content from the block editor is automatically protected by MemberPress.

If your Page Bricks template is set to also show Bricks content (as it should), note that out of the box it will be visible to everyone and not just to the members that should have access to it per one or more MemberPress rules.

After adding the following code, you could simply add members-only class for any element at its STYLE → CSS → CSS classes and that element will be output only for members that are set to have access to this Page.

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

// Output elements having a class of "members-only" only to members that purchased the specified MemberPress memberships.
add_filter( 'bricks/element/render', function( $render, $element ) {
  // Get the element CSS classes
  $classes = ! empty( $element->attributes['_root']['class'] ) ? $element->attributes['_root']['class'] : false;

  // Check if the element has the special class "members-only"
  if ( $classes && in_array( 'members-only', $classes ) ) {
    return current_user_can( 'mepr-active', 'membership:2611' );
  }

  return $render;
}, 10, 2 );

Replace 2611 with the ID of your membership.

If you’d like to have the elements be output based on whether the user has access to multiple memberships (at least one of them),

replace

membership:2611

with

memberships:2611,367,961

where 2611,367,961 are the IDs of memberships.

Login and Account pages

MemberPress would have already created a Paged called Login.

Edit it with Bricks. Add a Section and inside its Container, a Shortcode element having:

Set left and right margin to auto.

Max. width: 600px

MemberPress would have already created a Paged called Account.

Edit it with Bricks. Add a Section and inside its Container, a Shortcode element having:

Set left and right margin to auto.

Add the following CSS at either Bricks → Settings → Custom code → Custom CSS or in the child theme’s style.css or a code snippet plugin like WPCodeBox:

.mp_wrapper input[type=text], .mp_wrapper input[type=password], .mp_wrapper input[type=email], .mp_wrapper select {
	border-radius: 10px;
	line-height: 22px;
}
.mp_wrapper input[type=submit] {
	background-color: #2371b1;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 16px 32px;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.mp_wrapper input[type=submit]:hover {
	background-color: #225a83;
}
.mp_wrapper .mp-form-row label {
	color: #323639;
}
.mepr-unauthorized-message, #mepr-account-welcome-message {
	margin-bottom: 1em;
}
div#mepr-account-nav {
	text-align: center;
	margin-bottom: 3em;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.mepr-nav-item {
	padding-right: 20px;
}
.mepr-account-form, #mepr-account-welcome-message, .mepr-account-change-password {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.mepr-account-change-password {
	display: block;
}

Login page sample screenshot:

Account page sample screenshot:

Custom condition to render elements based on membership ID(s)

Let’s register a custom condition using the Element Conditions API introduced in Bricks 1.8.4 using which we can have any element be output on the front end only if the current user has access to one or more MemberPress memberships.

The Value dropdown will show the list of available memberships.

Add the following in child theme‘s functions.php or a code snippets plugin:

add_filter( 'bricks/conditions/groups', function ( $groups ) {
	$groups[] = [
		'name'  => 'bl_conditions_group',
		'label' => esc_html__( 'Custom Group', 'my-plugin' ),
	];

	return $groups;
});

add_filter( 'bricks/conditions/options', function( $options ) {
	// Get all the post titles of the post type 'memberpressproduct'
	global $post;

	$args = [
		'post_type'      => 'memberpressproduct',
		'posts_per_page' => -1,
		'orderby'        => 'title',
		'order'          => 'ASC',
	];

	$myposts = get_posts( $args );

	$post_titles = [];

	foreach ( $myposts as $post ) {
		setup_postdata( $post );

		$post_titles[] = get_the_title();
	}

	wp_reset_postdata();

	$options[] = [
		'key'   => 'bl_memberpress_membership',
		'label' => esc_html__( 'MemberPress Membership', 'my-plugin' ),
		'group' => 'bl_conditions_group',
		'compare' => [
			'type'        => 'select',
			'options'     =>  [
				'==' => esc_html__( '==', 'my-plugin' ),
				'!=' => esc_html__( '!=', 'my-plugin' ),
			],
			'placeholder' => esc_html__( '==', 'my-plugin' ),
		],
		'value'   => [
			'type'    => 'select',
			'options' => array_combine( $post_titles, $post_titles ), // array_combine() is used to set the keys and values to the same value
		],
	];

	return $options;
});

add_filter( 'bricks/conditions/result', function ( $result, $condition_key, $condition ) {
	// If $condition_key is not 'bl_memberpress_membership', we return the $render as it is
	if ( $condition_key !== 'bl_memberpress_membership' ) {
		return $result;
	}

	// If compare is empty, we set it to '==' as default
	// If user value is empty, we set it to '' as default
	$compare    = $condition['compare'] ?? '==';
	$user_value = $condition['value'] ?? '';

	// Set the $memberpressproduct_object to null
	$memberpressproduct_object = null;

	// If user value is not empty, get the post object by title
	if ( $user_value != '' ) {
		$memberpressproduct_object = get_page_by_title( $user_value, OBJECT, 'memberpressproduct' );
	}

	// If $memberpressproduct_object is not null, get the ID
	if ( $memberpressproduct_object ) {
		$id = $memberpressproduct_object->ID;

		// if $compare is '==', we check if the user has the membership
		return $compare === '==' ? current_user_can( 'mepr-active', 'membership:' . $id . '' ) : ! current_user_can( 'mepr-active', 'membership:' . $id . '' );
	} else { // if $memberpressproduct_object is null, false should be returned
		return false;
	}
}, 10, 3 );

Sign-up forms on a custom membership Page

It makes sense to use Bricks to build your membership sign-up page since if offers more design and layout flexibility.

MemberPress covered this in their docs here. See the second (manual) method.

The summary is that you basically use a shortcode where the membership registration form should be shown.

Ex.:

[[mepr-membership-registration-form id="367"]]

You can of course have more than 1 shortcode. We have two on our signup page each in a separate tab.

What the MemberPress documentation does not cover is the fact that we also need to run a function at the mepr-product-url hook for this to work seamlessly.

Here’s an example from this site:

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php 

add_filter( 'mepr-product-url', 'mepr_custom_membership_urls', 10, 4 );
/**
 * Set custom page with [mepr-membership-registration-form] shortcode i.e, /membership as the membership page.
 * @param  string $url             [description]
 * @param  Membership Object $product         [description]
 * @param  array $args            [description]
 * @param  boolean $modify_if_https [description]
 * @return string                  [description]
 */
function mepr_custom_membership_urls( $url, $product, $args, $modify_if_https ) {
  return 'https://brickslabs.com/membership/';
}

If you have different custom registration pages for different memberships, use the code snippet from the documentation as a reference.

References

https://docs.memberpress.com/article/154-advanced-rule-features