When a website’s WordPress logout menu items are displayed based on the login state of a user, the feature is known as Contextual WordPress logout menu items.
This feature can be significantly useful for user-profiles and community-based websites like membership websites, subscription websites, news and magazine websites, and more.
To add this feature, you can use the Login Logout Menu extension by ProfileGrid Memberships. The extension is a great solution for customizing your WordPress menu bars. You can explore all the features of ProfileGrid Memberships and WordPress logout menu items extension here.
Overview of WordPress logout menu items
The Contextual WordPress logout menu items help the users to navigate the website and access its services easily.
Further, the extension automatically changes the menu items based on the current status of the user. (Whether the current user is logged in or logged out.)
Major Features of the Login Logout Menu Extension
The extension has many useful features that can offer an amazing experience to a user. Here are some of the highlights:
- You can add a Login/Logout button to any menu on a website.
- The caption of the button will automatically change from Login to Logout based on the user’s login state.
- It will also help you in adding items such as User Profile, User Groups, and Password Recovery to the menu bar.
- You can also change the order of the menu items using a drag and drop feature.
Guide to Set Up Login Logout Menu Item Feature to the Menu Bar
The Login Logout Menu extension of ProfileGrid Memberships is a part of the core version of this plugin. You can either download the entire plugin for free by clicking on this link, or you can download the extension separately from here.
Once you have downloaded and installed the extension on your backend, you can follow the given steps to set up contextual WordPress logout menu items on your website.
Step1: Go to ProfileGrid Menu on your left menu bar and click on Global settings.
Step2: Scroll down, find Login Logout Menu, and click on it.
Step3: You will be redirected to the ProfileGrid Menu Integration Settings page.
Step4: On the top of the screen, you will find the “Custom Menu Item” slider button. Turn on this button to display ProfileGrid links inside one or more of your website menus.
Step5: Further, under ‘Select Menu(s)’ select the location where you wish to display ProfileGrid menu items. You can set the login logout menu items to “Primary Menu”, “Footer Menu”, or “Social Links Menu”.
Step6: Now go to the “Reset Password” option and turn on the slider button to Show/Hide Menu, as per the requirement. You can also change the “Menu Item Name.”
Step7: Once done, go to “User Profile” to add “Menu Item Name”. Turn on the slider button and provide the required caption in the provided text box.
Step8: Similarly, add “All Groups” and “Login” items on your menu bar using “User Groups” & “Login” options respectively.
Step9: Save the setting once you have configured login or logout menu items.
Frontend examples of Contextual WordPress logout menu items
After you add login logout to WordPress menu items and see the preview of your website, you will find four options on the menu bar i.e. Login, Forgot Password, My Profile, All Groups.
Ending Note
You can customize the menu item names according to your requirements. Also, the extension allows you to drag and drop menu items to assemble them as per your preference.
The WordPress logout menu items extension can be immensely useful for you and your users. Apart from contextual menu items, you can also restrict the menu items based on groups and communities.
If you need further assistance on how to add login logout in WordPress menu, leave a comment, and our team will you with the best solutions.
Can I add user profile on primary menu and put login/logout menu as dropdown menu?
Hi,
You may use the ProfileGrid Login Logout Menu extension to achieve this. For more details, please visit https://profilegrid.co/extensions/profilegrid-login-logout-menu/.
Thank you
How do I change the color of the custom menu?
Hi,
You may achieve this by using custom CSS.
Thank you
I wish it if there a shortcode or an Elementor widget for this with option to customize fonts and colors and size
The requested feature is not available as of now.