WordPress Registration Form Plugin (CMREG) - How To - Display Log in, Log Off and Register Links in the Website


Log In / Log Off / Registration Links in the website

Back to User Guide

With WordPress Registration Form Plugin you can display log in, register and log off links in navigation by including simple menu items.

There are three ways to achieve this:

  1. Including links as navigation links (simple)
  2. Adding custom CSS (Advanced)
  3. Adding widgets to the website (check the specific guide)

1) Links as navigation links (Simple)

This method involves adding the log in, log out and register links as menu items.

Example

Example of Login and Registration menu links - WordPress Login Plugin
Example of Login and Registration menu links

To do this, navigate to the Admin Dashboard → Appearance → Menus.

Navigation to the Menus dashboard
Navigation to the Menus dashboard

Then simply add links to the relevant pages: login form page, registration form page, and Profile.

Adding a menu item
Adding a menu item

In order to create a logout link, simply add a custom link with #cmreg-logout-click instead of a regular URL. This way, when the user clicks the link he/she will log out.

Adding Logout link - WordPress Plugin User Registration
Adding Logout link

2) Adding custom CSS (Advanced)

This method grants the same results, but it's more flexible, although harder to achieve.

To do it, start by navigating to the Admin Dashboard → CM Registration Pro → Settings.

Navigation to the plugin settings - User Registration WordPress
Navigation to the plugin settings

Click on the General tab.

General plugin settings - WordPress Login Plugin
General plugin settings

Scroll down to the Appearance section.

Appearance settings - WordPress Social Sign In Plugin
Appearance settings

Place css styles in the Custom CSS field for login/register links - find their IDs in the page source using Inspect browser tool. Click on the link with mouse right button and click Inspect. Find the line with link and copy its ID.

Highlighting the page element
Highlighting the page element

Find the element ID in the console.

How to find the link ID
How to find the link ID

Example CSS:

/* Make Sign-in and Register links hidden after login: */

.logged-in #menu-item-661, .logged-in #menu-item-660 {display: none;}


/* Make Account and Logout links hidden until login: */

#menu-item-671, #menu-item-672 {display: none;}

.logged-in #menu-item-671, .logged-in #menu-item-672 { display: inline-block !important; }

Below: When users are logged in, the "Login" and "Register" links change into "Profile" and "Logout".

Example of changing links 'Login' and
Example of changing links 'Login' and "Register" to 'Profile' and Log Out'

When user are logged-in, the "Profile" and "Log Out" links are visible.

Example of changing links 'Login' and
Example of changing links 'Login' and "Register" to 'Profile' and Log Out'

More information about the WordPress Registration Form Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.