Making a Powerful Member Dashboard for Your Membership Account Page

The Membership Account page is a commonly linked-to landing page for members – both as a redirect from other areas on your membership site or on log in. This page can be enhanced with more than just the default Membership Account shortcode or block to become a true Member Dashboard.

Below are a few Member Dashboard concepts based on the common membership site types we support here at Paid Memberships Pro.

Blog, Content Publisher, or Magazine Site Member Dashboard

How to Set Up Your Page

1. Navigate to Widgetize Pages > Add Sidebar to create a new in-page widget area named “Member Dashboard“. [Widgetize Pages Lite must be installed and activated]
2. Navigate to Appearance > Widgets.
3. Add the “Recent Comments” widget to the newly created “Member Dashboard” widget area.
4. Navigate to Memberships > Page Settings in the WordPress Admin.
5. Edit your site’s “Membership Account” page.
6. Set the “Template” to “Fluid Width“.
7. In the “Memberlite Settings” area, check the boxes to hide breadcrumbs and hide the page title.
8. Replace the entire page’s content with the code block below.
9. Add the block of CSS below to a child theme’s stylesheet or a stylesheet for PMPro Customization
10. Save and Publish the page.

Custom page content for this dashboard layout:

Custom CSS for this dashboard layout:

<style>
#basic-user-avatar-form p {display: inline-block; width: 70%; }
#basic-user-avatar-form .avatar {float: left; }
#basic-user-avatar-form p.description {clear: both; font-size: .8em; font-style: italic; line-height: 1.2em; width: 100%; }
.recent_comments {background: rgba(255,255,255,0.25); border-radius: 10px; padding: 1px 3rem 3rem 3rem; }
.recent_comments ul {margin: 0; }
.recent_comments li {list-style: none; border-top: 1px dotted #FFF; margin: 0; padding: 1rem 0; }
</style>

Premium Downloads with Download Monitor Member Dashboard

How to Set Up Your Page

1. Navigate to Memberships > Page Settings in the WordPress Admin.
2. Edit your site’s “Membership Account” page.
3. Set the “Template” to “Fluid Width“.
4. In the “Memberlite Settings” area, check the boxes to hide breadcrumbs and hide the page title.
5. Replace the entire page’s content with the code block below.
6. Add the block of custom CSS below to a child theme’s stylesheet or a stylesheet for PMPro Customizations
7. Save and Publish the page.

Custom page content for this dashboard layout:

Custom CSS for this dashboard layout:

<style>
.infographics ul li {display: inline-block; list-style: none; width: 45%; }
</style>

eLearning Member Dashboard

How to Set Up Your Page

1. Navigate to Memberships > Page Settings in the WordPress Admin.
2. Edit your site’s “Membership Account” page.
3. Set the “Template” to “Fluid Width“.
4. In the “Memberlite Settings” area, check the boxes to hide breadcrumbs and hide the page title.
5. Replace the entire page’s content with the code block below
6. Add the block of custom CSS below to a child theme’s stylesheet or a stylesheet for PMPro Customizations
7. Save and Publish the page.

Custom page content for this dashboard layout:

Custom CSS for this dashboard layout:

<style>
#pmpro_account .pmpro_box {border-top: none; }
#pmpro_account-membership div.pmpro_actionlinks {display: none; }
</style>

bbPress Forums Member Dashboard

How to Set Up Your Page

1. Navigate to Widgetize Pages > Add Sidebar to create a new in-page widget area named “Member Dashboard“. [Widgetize Pages Lite must be installed and activated]
2. Navigate to Appearance > Widgets.
3. Add the “(bbPress) Statistics” widget to the newly created “Member Dashboard” widget area.
4. Navigate to Memberships > Page Settings in the WordPress Admin.
5. Edit your site’s “Membership Account” page.
6. Set the “Template” to “Fluid Width“.
7. In the “Memberlite Settings” area, check the boxes to hide breadcrumbs and hide the page title.
8. Replace the entire page’s content with the code block below
9. Add the block of custom CSS below to a child theme’s stylesheet or a stylesheet for PMPro Customizations
10. Save and Publish the page.

Custom page content for this dashboard layout:

Custom CSS for this dashboard layout:

<style>
#basic-user-avatar-form p {display: inline-block; width: 70%; }
#basic-user-avatar-form .avatar {float: left; }
#basic-user-avatar-form p.description {clear: both; font-size: .8em; font-style: italic; line-height: 1.2em; width: 100%; }
#pmpro_account .pmpro_box {border-top: none; }
#pmpro_account-membership div.pmpro_actionlinks {display: none; }
.widget_display_topics li {margin-bottom: .5rem; }
.widget_display_topics div {display: inline-block; }
.widget_display_stats dl {padding-top: 1em; }
.widget_display_stats dt {border: none; clear: left; float: left; font-weight: normal; margin: 0 .5em 1em 0; padding: 0; }
.widget_display_stats dd {margin: 0 1em 1em 0; }
</style>

Now go make a cooler Member Dashboard!

The ideas in this post are a starting point to creating the BEST member dashboard that fits your membership site model. You can pull from all of the concepts or start with your own. If you have components of the dashboard that vary based on the member’s level, use the membership shortcode or block to reveal specific sections to the member. There are many, many possibilities if you spend a bit of time considering the user experience of your membership site.

If you aren’t using the Memberlite theme, you can still make use of the proposed ideas—but you’ll need to work within the confines of your theme’s shortcode and layout options.