Creating Personalized Navigation for WordPress with Membership 2 Pro and Custom Sidebars Pro

Creating Personalized Navigation for WordPress with Membership 2 Pro and Custom Sidebars Pro

First-time visitors to your site don’t necessarily need to see the same stuff in your navigation as regular – or logged in – visitors. The solution? Personalized navigation tailored to your users.

In this scenario, when members of your site log in, custom links would appear in the navigation to take them to special pages, like their profile or account page, a forum, or even a member’s area. Meanwhile, new users who aren’t logged in would see your primary set of navigation links and not pages intended for members eyes only.

With our Membership 2 Pro and Custom Sidebars Pro plugins, you can create a membership site with ease and add custom navigation tailored to your users and what you want them to see – or not see.

In this post, I’ll walk you through how to set up both plugins and show you how you can create custom sidebar navigation that automatically updates based on the pages users visit on your site or if they’re logged in.

Since Membership 2 and CoursePress were launched we’ve added sooo much new stuff. Head over to the Plugins page to check out all the new features! Check ‘em out

Easily create and dynamically display custom sidebars on posts and pages to supercharge your widgets.
Easily create and dynamically display custom sidebars on posts and pages to supercharge your widgets.

Before You Get Started

It’s important to backup your entire site before making any changes to your site so if something goes wrong you can easily restore it.

For tips on how to backup your site, check out some of our other posts: How to Backup Your WordPress Website (and Multisite) Using Snapshot, 11 Best Free Quality Backup Plugins for Protecting Your WordPress Site and 7 Top Premium and Freemium WordPress Backup Plugins Reviewed.

Once you have made your backup, it’s time to install and activate the Membership 2 Pro and Custom Sidebars Pro plugins. If you would like some tips on how to do this, you can check out a couple of our guides to Installing WordPress Plugins and Activating WordPress Plugins Network-Wide.

Next up is setting up your site with Membership 2 Pro. You can check out our post Build an Online Community with WordPress and Membership 2 Pro to learn how to get the basics going on your site.

Set Up Your Pages and Content

Now that you have the basics of Membership 2 Pro set up, it’s time to add your content to pages and posts, then make them available only to members.

For example, in addition to the actual content pages you would like only your members to see, you can also create the following kinds of navigation pages in Membership 2:

  • Members’ homepage – Where you have your welcome message and an explanation of the member’s area
  • Account page – Membership 2 Pro automatically creates an Account page where users can edit their member details.
  • Contact page – A custom page with details on how members can contact you if they have specific issues relating to their membership.
  • Registration page – Membership 2 Pro includes an add-on that enables you to allow members to register for multiple memberships at one time. You could create a page for additional memberships, courses or whatever else you would like to create.

You’re only limited by your imagination so you can create any other pages that are relevant to your membership site. It’s important to first create the content you would like to have available to members and protect them as you go.

Once you’ve created your membership content, you can add any relevant links to your member navigation.

If you would like to limit certain categories or posts to members only, start by going to Membership 2 > Add-ons in your dashboard. Next, click on the sliding button to turn on the Category Protection or Individual Posts add-ons depending on your needs.

The category protection add-on button is highlighted.
Choose the additional content you need protected on the <strong>Add-ons</strong> page.

You can also choose to enable media, shortcodes, specific URL protection and more on this page. Enable all the add-ons you need, then start creating your membership content.

If you want to enable category protection, you can configure the settings under Membership 2 > Protection Rules > Categories.

The "Modify Access" link is highlighted on the settings page for category protection.
You can choose to protect any category you have already set up and make it available to specific memberships.

The interface is similar to your All Posts page in the admin where all your categories are listed. You can select them and apply bulk actions, or set options for them individually. To do this, hover over one of the category titles and click on the Modify Access link that appears.

The button to enable protection on the post or page is highlighted.
You can set individual membership access by enabling protection on the post or page you’re working on.

If you have the Individual Posts add-on enabled, you should see the same option on the top right in the post editor as you would for new pages.

Clicking the button to Enable Protection reveals the list of your current membership levels. Click the slide button to limit content to the memberships of your choice.

Once you’re done creating your page or post, schedule or publish it as you normally would and your content will become available to the users you chose.

When you’ve finished creating all the pages that you want to make available to your members, you’re ready to create your navigation menu.

Create Your Custom Navigation

Go to Appearance > Widgets in your admin dashboard to start creating new sidebars for your custom navigation. At the top right-hand side of the page, click on the Create a new sidebar button.

An inline pop-up will appear where you can enter the name and description of your new sidebar.

The inline pop-up that is displayed after you click the "Create a new sidebar" button.
The new sidebar’s name and description isn’t displayed publicly.

You can also click the Advanced checkbox to enter custom HTML wrapper code if you would like, but it’s optional.

Once you’re done, click the Create Sidebar button at the bottom. Your new sidebar should now be displayed on the page. You can now drag widgets across as you normally would.

A page widget being dragged into the new sidebar.
Just drag and drop your desired widgets into your new sidebar area.

Place the Pages widget in your new sidebar and go ahead and configure it. Even better, create a custom menu through Appearance > Menus, then add the Custom Menu widget to your sidebar.

You could also use the Text widget to further customize your links with HTML and even add images to appear as your links.

No matter which widget you choose, be sure to click the Save button in the widget options after you place them in your sidebar to ensure all your customizations are kept.

Finally, add the [Membership2] Login widget to your sidebar. It will display a login form to regular visitors and a log out button to members who are logged in.

The Membership 2 Login widget has been added to the custom member's sidebar that was created and a custom URL for a member's area page has been entered for members to be directed to after logging in.
You can customize the pages that users are directed to when they log in and out.

Choose the title you would like to display in your sidebar and then enter the URLs of the pages you want your users to be directed to when they log in and out. You can also enter shortcode options if you like.

The "Sidebar Location" link is highlighted.
You can choose where your new sidebar should appear on your site.

Add Your Navigation and Custom Content

When you’re done entering everything in, click the Save button at the bottom of the widget options.

Next, click the Sidebar Location link displayed at the bottom of the sidebar area. This is where you can choose where your sidebar appears.

On the inline pop-up that appears, select the checkbox for the option called As Widget Area for selected Post Types.

The inline pop-up after clicking the "Sidebar Location" link.
Choose a type of area where your sidebar should appear like posts or pages.

Next, select the Membership2 Memberships option to display your sidebar on all pages that are protected, as well as the Membership2 Invoices option for displaying the sidebar on invoices. You can also select the Posts and Pages options if you would like your sidebar to be displayed on all posts and pages.

You can select multiple options from the list by pressing the command key and clicking on the options for Mac OS X or pressing down the control key and left clicking on the list items for PCs.

The sidebars section of the page editor.
You can set the sidebar for specific posts or pages.

Make the selections that best fit your or you can choose the individual pages and posts where you want your sidebar to appear by selecting them in the editor.

To add a sidebar to an individual page, go to Pages > All Pages, then click the Edit button on one of the items listed.

In the Sidebars section, you can select your sidebar from the drop down box. Click Update or Publish to save the post or page and you’re done.

Your new sidebar is now ready for your members to use as a user-friendly navigation area.

A member's only page with a custom navigation sidebar.
Creating a custom sidebar with navigation links only logged in users can see is easy.

Custom Navigation

If you’ve ever wanted to add custom navigation to your website, Membership 2 Pro and Custom Sidebars Pro can help you get it done.

Once set up, your members will see links specific to them, while first-time and logged out visitors will see your primary navigation bar without all the members-only content.

For more tips on creating a successful membership site, check out some of our other posts: 11 Tips and Tools for Starting a Profitable Membership Site With WordPressSpend Less Time Building, More Time Teaching With Membership 2 and CoursePress and Build an Online Community With WordPress and Membership 2 Pro.

Would you use this kind of custom navigation on your site? What kind of navigation do you currently use? Feel free to share your experience in the comments below.