Has a customer every asked you to create a private area on your WordPress website?  Its not something you can easily do with WordPress out of the box, but its Something that can be easily achieved with a couple of plugins and little work.  I was recently asked this very question for a client I was creating a WordPress website for and thought I’d share what I found and detail the process to get this working.

The solution I created give you a few other cools tricks as well.  You’ll have a way to add Log In and Log Out options to your menu system as well as a popup Modal log in window making the entire solution much cleaner and hiding the WordPress administration system.

The system I’ve been working on is for a private dealer area but it can be used for any type of content of customer you have.

The following steps explains a little about the WordPress plugins I used so simply follow along and you’ll be done in no time.

 

Create the page you want to secure

Before you do anything, you’ll want to create a least one page that you’ll use as the private page only verified users are allowed to see.  I created a page called Dealers and a test user called Dealer to test the following features.

 

Members Plugin https://wordpress.org/plugins/members/

WordPress Members Plugin New Role

The members plugin allows you to create new roles in the WordPress database and assign users to those roles.  If you want to define groups of users so you can control access, this is an important part of the solution.

  • Install the Members plugin.
  • Go to the Users menu option and select Add New Roles
  • Enter the Role Name and Role Label.

e.g.

Role Name: Dealer
Role Label: Dealer

WordPress User Assign RoleNow we have the new Role created, we need assign the Dealer user the Role of Dealer.

  • Go into the Users menu and select All Users.
  • Find the Dealer user and select Edit
  • Drop down the Role menu and select Dealer
  • Scroll down and click the button Update User

 

Next we need to create a Log In redirection so when a user logs in, they are not taken to the WordPress Administration back end.

 

Peter’s Login Redirect Plugin https://wordpress.org/plugins/peters-login-redirect/

WordPress Role Login RedirectsPeter’s Login Redirect allows you to define the page a user, or group of users are taken to when they complete the login process.

Once you have installed the plugin, create a new redirect rule by using the following steps:

  • Install the Peter’s Login Redirect
  • Go to the Settings menu option and select Login/logout redirects

for the Dealer role:

Login URL: http://www.yoursitename.com/Dealers
Logout URL: http://www.yoursitename.com/

BAW Login/Logout Menu Plugin https://wordpress.org/plugins/baw-login-logout-menu/

The BAW Login/Logout Menu plugin allows you to add the Login and Logout options to your menu and automatically switches from login to logout if the user is logged in already.

  • Install the BAW Login/Logout Menu plugin ready for later use as we are not ready to use it yet.

 

Nav Menu Roles Plugin https://wordpress.org/plugins/nav-menu-roles/

Nav Menu Roles Plugin allows us to display and hide certain menu items based on the role of the user currently logged in.

  • Install the Nav Menu Roles plugin ready for later use.

 

SimpleModal Login https://wordpress.org/plugins/simplemodal-login/

SimpleModal login adds a CSS class you can use to cause the WordPress login to appear in a modal format instead of going to the actual WordPress login page.

  • Install the SimpleModal Login plugin ready for later use.

 

Secure the Dealer Page.

We need to update the Dealer page permissions we created earlier so it will only be available to users assigned the Dealer role.

  • Go to the Dealer page
  • Scroll down to Content Permissions.
  • Select Dealer and Administrator.
  • Save the Page by clicking the Update button.

 

Add the Log In and Log Out options to the menus.

  • WordPress Log In-Log Out Items in MenuGo to the appearance menu option and select Menu
  • Load the Menu you want to edit
  • Open the Login/Logout Links section on the available options you can add to your menu
  • Select the Log In option and click on the Add to Menu button
  • Move the newly added option to desired location in the menu.
  • Make sure the Logged Out Users option is selected in the Display Mode section of the menu item.
  • Add simplemodal-login to the CSS Classes (option) section for the menu item.

Wow we need to add the Log Out menu item

  • Select the Log Out option and click on the Add to Menu button
  • Move the newly added option to desired location in the menu.
  • Make sure the Logged In Users option is selected in the Display Mode section of the menu item.
  • Click on the Save Menu button

 

That’s it, your all done.  Got to your website and test everything to see if it all worked.

You should now have:

  • A Private page on your Website
  • A login / Logout option that dynamically changes in your menus
  • A nice popup modal login screen that pops up to login instead of going to the regular WordPress page.

 

I hope you found this useful and I hop I didn’t miss any steps along the way.

Be sure to let me know how it worked out for you.