Set a Custom Menu for members by level via a new widget included in the Nav Menus Add On. The widget specifies the default menu for non-members and visitors, as well as a fallback menu for members of ANY membership level.
After installing the Nav Menus Add On (or upgrading to version .3.1), navigate to the Appearance > Widgets page in the WordPress Dashboard. Here, you will see a new available widget labeled “PMPro – Custom Membership Menu” that can be placed in any available widget area in your theme.
Widget settings include:
Title: Set a title to display before the menu items. (optional)
Members Menu: Select a global menu to display for members of ANY membership level. (optional)
Click the link labeled “Click here to set menus for specific levels.” to expand more options. These options will show each active membership level on your site and allow you to assign a unique menu per level.
Menus must be created in the Appearance > Menus page of the WordPress Dashboard prior to selecting them for display in the widget.
Screenshots
The Default Menu shown in the “Header Right” widget area of a site using Memberlite.
The Members Menu shown to a logged-in member in the “Header Right” widget area of a site using Memberlite.
What else does the Nav Menus Add On do?
Aside from the widget, you can also use the Nav Menus Add On to swap menus set via the Appearance > Menus page of the WordPress Dashboard. For full information on this feature, see the documentation page for the Nav Menus Add On here.
Easily add a front-end log in, log out, and password reset experience to your membership site by following the steps covered in this post. We’ll outline our recommended third party plugin for front-end login, as well as some “best practice” guidelines for placing these links on your site using your theme or Memberlite.
Our plugin allows the member account to be created in one step as part of checkout. But, returning members need to be able to easily access your login and password reset pages.
PMPro does not alter the main WordPress login functionality, so users will see the same WordPress-themed “Log In” page that you are probably familiar with. Use our recommendation below to add frontend login.
Note: Some themes include pages for a front-end log in experience. If this is the case, we recommend keeping that experience in place as it may be more trouble to unravel and put another method in place.
Theme My Login by Jeff Farthing creates a themed (frontend) login, password recovery, and user profile section. In addition, we recommend the plugin for login redirection settings and blocked “admin” access.
Your Login Page with the default WordPress appearance.
Your Login Page with Theme My Login and the Memberlite Theme
…or search for “Theme My Login” from the Plugins > Add New page in the WordPress admin.
Configuring Theme My Login
When you activate TML, the plugin will generate five pages: Login, Log Out, Lost Password, Reset Password, and Register. All of these pages except the “Register” page will be used in your membership site (we redirect all User Registration to the Membership Levels page for level selection and, hopefully, membership checkout).
There are no additional steps required at this point to make TML functional. You can certainly edit the generated pages to add additional styles, widgets, wording, etc. Just be sure you do not remove the [theme-my-login] shortcode from the page content.
Where to add your “Log In” links
Today’s web user has certain expectations about your site’s “Log In” links. Here are some best practices to consider:
The link is expected to be placed in the upper right corner of the page.
Consider placing a “Sign Up” (Join or Register) link in this same space as well.
The link should be present across all pages on your site.
Swap to a “Log Out” link once the member has logged in.
The “Log Out” link is often accompanied by a reminder of the logged in member’s display name that links to their membership account details or profile.
If your site is responsive, make sure that your “Log In” links are present in the smaller device views, either at the very top of the screen or in your mobile/responsive menu.
Memberlite does all of the above by default, excluding the “Mobile” view of your log in link. If you’re running Memberlite, I recommend using the TML plugin and adding the “Theme My Login” widget to the “Mobile Menu” widget area. The screenshot to the right shows how I have it configured for the Paid Memberships Pro website.
If your theme does not have a widget, menu area, or hook in place to add a log in feature in the upper right, open a topic on our members forum and we will help you find the best way to add this to your site.
We also include a “Log In” link in the default message that a visitor sees when trying to access members only content. Confirm that you have not removed this link by visiting the Memberships > Advanced Settings page in the WordPress admin.
Styling the Log In Page
TML is very lightly styled – the shortcode output on your generated Login and Password Reset pages will inherit your theme styling.
If you’re running Memberlite , here’s a little code to enhance the appearance of your Login/Lost Password/Reset Password pages. Set the “Page Template” to “Full Width” and replace the page content with the following:
I also checked the boxes to “Hide Page Title” and “Hide Breadcrumbs” in the Memberlite Settings box, then set the “Banner Description” to the following:
<h1 class="text-center">Log In</h1>
<h1 class="text-center">Log In</h1>
The Conditional “Log In” link
After activating TML, navigate to the Appearance > Menus area of your admin. Under the “Pages” section in the left column, you’ll see pages titled “Log In” and “Log Out”. Add these two pages to your menu. TML has background logic in place to only show the appropriate menu link based on the user.
Take this one step further and use the Nav Menus Add On for Paid Memberships Pro. This will allow you to use the same theme location to show a different menu of links based on the visitor/user/member status. We use TML in combination with the Nav Menus Add On on this site to link to our member support forums for PMPro Plus or PMPro Unlimited members using the “Member Menu” theme location of Memberlite.
Do More with Theme My Login
Theme My Login also has advanced logic for blocking the WordPress backend by “role”, as well as redirection on login based on “role”. You can read more about all the features of TML on their WordPress.org plugin repository listing.
Here are a few methods to preview your site as a member or non-member without ever having to log out of your administrator account.
Use Separate Browsers or “Private” Browsing
If you have a simple site with a single membership level, one of the easiest ways to preview your site as a member is give yourself as admin the single level. Just navigate to “Edit My Profile” and change your “Membership Level”.
Then, to preview your site as a non-member or site visitor, use either a separate web browser or your favorite browser’s “Private Window” or “Incognito Mode” option. Browsing your site in this mode is a fast way to see the non-member experience without having to log out of your admin account.
How to Enable Private Browsing
Chrome: Click the Menu Button > “New Private Window” or Ctrl+Shift+N (PC) and ⌘+Shift+N (Mac)
Safari: Click “File” > “New Private Window” or ⌘+Shift+N (Mac)
Firefox: Click the Menu Button > “New Private Window” or “File” > “New Private Window” or Ctrl+Shift+P (PC) and ⌘+Shift+P (Mac)
Microsoft Edge: Click the Menu Button > “New InPrivate Window” or Ctrl+Shift+P (PC)
The caveat to this approach is that you cannot quickly preview your site as a “logged in” non-member (a user account with no membership level or a cancelled/expired membership).
Use a “User Switching” Plugin
If you have a few levels of membership that you would like to be able to easily preview, the recommended approach is the User Switching plugin by John Blackbourn. This plugin allows you to stay logged in as your admin account, but preview the site as if you were logged in as another account.
For this approach, I recommend setting up a unique user account for each level of membership offered (name your dummy accounts by level name such as “PMPro Plus Tester” and “PMPro Core Tester”). You can also set up a dummy account for a user with no membership level.
Then, just navigate to the Users list in WordPress, locate the account you want to preview and click the “Switch To” link. You can easily switch back to your administrator account by clicking the “Switch back to (display name” link at the very bottom of your website.
The caveat to this approach is that you cannot preview your site as a “logged out” site visitor. Also, each dummy account will need its own email address. If you don’t have the ability to set up a bunch of dummy email accounts, you can get around this by using an email alias (email+otherstuff@domain.com). Just add the “+” then anything you want to your email address before the “@”.
These are the methods we use here at PMPro to preview our site and get a feel for the member experience. If you have another approach to recommend, post a comment below. Thanks!
60,000+ membership sites use Paid Memberships Pro to #GETPAID.
How to Enable Private Browsing
For this approach, I recommend setting up a unique user account for each level of membership offered (name your dummy accounts by level name such as “PMPro Plus Tester” and “PMPro Core Tester”). You can also set up a dummy account for a user with no membership level.