How to Add a Login/Logout Link to Main Menu in WordPress
One of the most common requests for WordPress websites is to add a login/logout link to the main navigation menu. This allows users to easily log in and out of your site without having to go to the WordPress login page. In this article, we’ll show you how to add a login/logout link to the main menu in WordPress without using a plugin, using only the functions.php file.
Why Add a Login/Logout Link to the Main Menu in WordPress?
Let’s discuss the reasons why you should add a login/logout link to the main menu in WordPress.
Improving User Experience: The primary reason to add a login/logout link to the main menu is to improve the user experience of your website. By making it easy for users to log in and out of your site, you can save them time and frustration, and ensure that they have a positive experience while using your website.
Increased Accessibility: A login/logout link in the main menu also increases the accessibility of your site. By placing the link in a prominent location, you make it easier for users to log in or out, even if they’re not familiar with your site or have trouble navigating it. This is particularly important for users with disabilities, who may have trouble accessing the WordPress login page directly.
Customization and Branding: Adding a login/logout link to the main menu can also help you to customize and brand your site. By including the link in the main menu, you can ensure that it’s in line with the rest of your site’s design, making it look and feel more integrated and professional.
Increased Functionality: Including a login/logout link in the main menu can also increase the functionality of your site. For example, if your site includes a members-only area, users who are logged in can access that area directly from the main menu. This can be a valuable feature for sites with a large number of registered users.
Steps to add a login/logout link to main menu
Please note that do the customization in your child theme. If you haven’t yet created child theme then read this article to create one. If you do not want to edit functions.php file then install a plugin Code Snippets by Code Snippets Pro, and add the code by using this plugin.
Step 1: Access functions.php file.
Go to Appearance > Theme File Editor > Theme Functions (functions.php). Below is the image for your reference.
Step 2: Add below code.
Copy below code and paste at the end of the functions.php.
// Add login/logout link to main menu
function loginout_menu_item( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
} elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'loginout_menu_item', 10, 2 );
Step 3: Test the Login/Logout Link
The final step is to test the login/logout link to make sure it works as expected. Log in and log out of your WordPress site to see if the link changes from “Log In” to “Log Out”.
Conclusion
In this article, we’ve shown you how to add a login/logout link to the main menu in WordPress without using a plugin. By using the functions.php file, you can easily add this functionality to your site without having to install any additional plugins. Whether you’re a beginner or an experienced WordPress developer, this tutorial will help you add a login/logout link to your main menu with ease.
More Articles:
How to Set WordPress Website in Maintenance Mode.
How to Redirect to Custom URL After Logout in WordPress.
How to Redirect Users to the Previous Page Upon Login in WordPress.
