Membership sites rely on optimized member login and logout functionality. Your paying members need to be able to log in when they want to access their member benefits and account information.
Likewise, they need to be able to log out when using shared devices.
In this post, we will cover the best practices for member login and logout links on your membership site.
Frontend Login and Logout Features in PMPro
The WordPress built-in login screen is primarily used by site administrators or editors that are trying to maintain the WordPress site’s backend.
However, any membership site will have login activity for a lot of different users. For this reason, Paid Memberships Pro includes native frontend login and user profile editing features.
With Paid Memberships Pro, you get a themed login page that matches the chroma of your website, including password recovery and reset. Members don’t need to use the WordPress login screen, which is off-brand and may confuse them.
Where Users Expect To See a Login Link
The modern web user has certain expectations about your site’s login link. Here are some best practices to consider:
- Always include a login link in the upper right corner of the page.
- Consider placing a signup, join, or register link in the same area.
- These links should be present across all pages on your site.
- Change your login link to say “Log Out” once the member has logged in.
- Along with the login link, there should be a link with the logged-in member’s name that takes them to their account details or profile. If your theme doesn’t allow this, you can use the
pmpro_membershortcode. - If your site is responsive, make sure that your login and logout links are displaying correctly on different devices. For small devices, the best options are either at the very top of the screen or within your mobile-responsive menu.
Best Practices for Member Login and Logout
1. Put a Login Form in Widget Areas
Many membership sites also use a sidebar or footer widget area to show the full login form. With PMPro, our Log In – PMPro widget changes to a welcome message and menu for logged-in users.
This is a great approach to give your members quick links to the most important content as part of their membership. Some examples of good menu items to put here are:
- The membership account page or profile edit page
- The category of content you use for premium posts
- Your main archive view of members-only courses or events
- The category of WooCommerce products that users can purchase at a discount
If your theme does not have a widget, menu area, or hook in place to add a login feature in the upper right, open a topic in our support area and we will help you find the best way to add this to your site.
2. Put a Login Link on Protected Content
When a visitor (someone who is not logged in to your site) hits a paywall or a restricted piece of content, they will also need access to a login link. With PMPro, the default “Content Restricted” message for visitors includes a login link.
You can optimize this link to redirect back to protected content using the !!referrer!! Quicktag. This message is set under Memberships > Advanced Settings in the WordPress admin.
3. Style Your Login Page
When Paid Memberships Pro generates the frontend plugin pages, your site will create a page titled “Log In” with the correct page shortcode. This page can be modified using the WordPress Editor or another page builder—just remember to keep the pmpro_login shortcode or block present on that page.
Some sites make this page function as both the login and registration page. If this applies to your site, consider including a message that outlines the benefits of registration, and link to the Membership Levels page.
Don’t be afraid to get creative; Your login page must be functional, but it can also be branded.
Here are a few more tips for styling your login page:
- Add a welcoming headline or a sentence that sets the mood for the member as they begin their journey on your site
- Avoid the use of other sidebars or links on this screen
- Be sure to test how your login page displays on various responsive screens
4. Add Conditional Login Links to Your Menu
Paid Memberships Pro comes with a group of links you can include in your site’s navigation menus. The two that we’ll focus on in this context are the links titled “Log In” and “Log Out”.
When added to your menu, these links will automatically hide and show based on the user’s login status.
Make your menus even more robust by using the Nav Menus Add On. This plugin repurposes every menu location in your theme to show a different set of links based on the visitor, user, or member status.
In fact, we use this Add On on the Paid Memberships Pro website to show our premium members a link to the premium support forums (using the “Member Menu” theme location of our theme for membership sites, Memberlite).
