Create a Membership Card for a MemberPress Site

This article was prompted by a  question posed in the MemberPress Unofficial User Group on Facebook. (Most of the screen captures can be enlarged with a click.)

If you would like any explanations that I haven’t provided, let me know in the comments section.

Background & Screen Shots

My client, the Southeastern Bluegrass Association (SEBA), wanted to make printable membership cards for their members, so I created them using MemberPress shortcodes and some CSS.

Here’s what logged-in members see when they navigate to the “Membeship Card” tab on their account pages:

And here is a closeup:

And here’s what one sees when once prints the page (either by clicking on the “Print” button or by using the browser’s print function):

Here’s a screen capture of the “Membership Card” Account Nav Tab (copy-able code follows)

The Code for the Membership Card

Here is the code for the “Membership Card” Account Nav Tab

All of the shortcodes in the highlighted rows — except for line 10, which is a custom shortcode I created (see below) — are documented here in the MemberPress Knowledge Base.

[mepr-show if memberships="182,199"]
<h3 class="no-print">SEBA Membership Card</h3>
<p class="no-print"><a href="javascript:window.print();">Print</a> your SEBA Membership Card.</p>
<p class="no-print"><button onClick="window.print();">Print Membership Card</button></p>
<div class="membership-card small">
<div class="logo"><img src="/wp-content/uploads/cropped-seba-site-logo-200x124-1.png" /></div>
<div class="seba">SouthEastern Bluegrass Association</div>
<div class="member-name">[mepr-account-info field="full_name"]</div>
<div class="membership-product">[mepr-list-subscriptions status="active"]</div>
[member_since]
</div>
[/mepr-show][mepr-hide if memberships="182,199"]You do not have an active SEBA Membership.[/mepr-hide]

Here is the CSS

.membership-card.small {
	border: 6px solid var(--seba-blue);
	width: 3.5in;
	height: 2in;
	margin-inline: auto;
	padding: 0.25in;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.membership-card.small > div {
	text-align: center;
}
.membership-card.small .logo {
	scale: 33%;
	margin: -40px 0 -40px;
	width: 100%;
	height: 100%;
	display: block;
	margin-inline: auto;
}
.membership-card.small .seba {
	font-size: 1rem;
	font-style: italic;
}
.membership-card.small .member-name {
	font-size: 1.3rem;
	font-family: "Times New Roman", times, serif;
	font-style: italic;
}
.membership-card.small .membership-product {
	font-size: 0.9rem;
	line-height: 120%;
}
.membership-card .membership-product ul {
	margin: 0;
}

Custom Shortcode for “Member Since”

“Member Since” is a custom field that was set up in the MemberPress Settings tab. Here is the code for fetching and returning that field value, if it exists in the usermeta table:

function seba_member_since() {
	$current_user = wp_get_current_user();
	$current_user_member_since = get_user_meta($current_user->ID, 'mepr_member_since', true);
	if ( isset( $current_user_member_since ) && !empty( $current_user_member_since ) ) {
		$output = '<div class="member-since">Member Since ' . $current_user_member_since . '</div>';
		return $output;
	} else {
		return;
	}
}
add_shortcode('member_since', 'seba_member_since');

And here’s a screen shot of a membership card for a member who has a “member_since” value recorded: