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 [pmpro_account] information 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.
Click on the tabs below to view screenshots of each dashboard type and a guide to set up the dashboard for your Membership site.
Blog, Content Publisher, or Magazine Site Member Dashboard
Plugins used in the Demo:
How to Set Up Your Page
- 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]
- Navigate to Appearance > Widgets.
- Add the “Recent Comments” widget to the newly created “Member Dashboard” widget area.
- Navigate to Memberships > Page Settings in the WordPress Admin.
- Edit your site’s “Membership Account” page.
- Set the “Template” to “Fluid Width”.
- In the “Memberlite Settings” area, check the boxes to hide breadcrumbs and hide the page title.
- Replace the entire page’s content with the code block below:
- Add this block of CSS to a child theme’s stylesheet or a stylesheet for PMPro Customizations:
<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> |
<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>
- Save and Publish the page.
Premium Downloads with Download Monitor Member Dashboard
Plugins used in the Demo:
How to Set Up Your Page
- Navigate to Memberships > Page Settings in the WordPress Admin.
- Edit your site’s “Membership Account” page.
- Set the “Template” to “Full Width”.
- In the “Memberlite Settings” area, check the boxes to hide breadcrumbs and hide the page title.
- Replace the entire page’s content with the code block below:
- Add this block of CSS to a child theme’s stylesheet or a stylesheet for PMPro Customizations:
<style>
.infographics ul li {display: inline-block; list-style: none; width: 45%; }
</style> |
<style>
.infographics ul li {display: inline-block; list-style: none; width: 45%; }
</style>
- Save and Publish the page.
eLearning with WP Courseware Member Dashboard
Plugins used in the Demo:
How to Set Up Your Page
- Navigate to Memberships > Page Settings in the WordPress Admin.
- Edit your site’s “Membership Account” page.
- Set the “Template” to “Fluid Width”.
- In the “Memberlite Settings” area, check the boxes to hide breadcrumbs and hide the page title.
- Replace the entire page’s content with the code block below:
- Add this block of CSS to a child theme’s stylesheet or a stylesheet for PMPro Customizations:
<style>
#pmpro_account .pmpro_box {border-top: none; }
#pmpro_account-membership div.pmpro_actionlinks {display: none; }
</style> |
<style>
#pmpro_account .pmpro_box {border-top: none; }
#pmpro_account-membership div.pmpro_actionlinks {display: none; }
</style>
- Save and Publish the page.
bbPress Forums Member Dashboard
Plugins used in the Demo:
How to Set Up Your Page
- 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]
- Navigate to Appearance > Widgets.
- Add the “(bbPress) Statistics” widget to the newly created “Member Dashboard” widget area.
- Navigate to Memberships > Page Settings in the WordPress Admin.
- Edit your site’s “Membership Account” page.
- Set the “Template” to “Fluid Width”.
- In the “Memberlite Settings” area, check the boxes to hide breadcrumbs and hide the page title.
- Replace the entire page’s content with the code block below:
- Add this block of CSS to a child theme’s stylesheet or a stylesheet for PMPro Customizations:
<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> |
<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>
- Save and Publish the page.
What about that fancy “Welcome” message in the masthead?
All of the dashboard demos feature a common “Welcome, USER” and avatar display in place of the default “Membership Account” page title. Here’s how to set it up.
- Create and activate a child theme for your Memberlite-powered site. [docs]
- In the child theme’s
functions.php file, add the following code recipe:
- Save the upload the functions.php file to your server.
If you do not want to use a child theme, you can place the code recipe in a helper PMPro Customizations plugin. Just note that the recipe as-is will only work for a site using the Memberlite theme.
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 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.
Note that the demo is designed for sites running the Memberlite Theme and Memberlite Shortcodes plugin.
