Adding a simple Login or Logout link to your navigation improves usability for members and returning users.
This guide shows how to add login and logout links to the WordPress menu using a small PHP function you can paste into your child theme‘s functions.php.
The method works with most themes and lets you match your menu’s styling by copying existing menu classes.
Why add login and logout links to your menu?
Putting login and logout actions directly in the main navigation saves users time and reduces friction.
Guests see a clear Login link; authenticated users get a Logout link. This is especially useful for membership sites, online courses, or any site that requires user accounts.
What you’ll need
- Access to your WordPress site’s files (FTP or Hosting file editor) or Appearance → Theme File Editor.
- A child theme (recommended). Do not edit the parent theme’s functions.php directly.
- Basic familiarity with copying CSS classes from the browser inspector so the new menu item matches your theme.
- Backup your site or functions.php before making changes.
Step-by-step: Add login and logout links to the WordPress menu
1. Open your child theme’s functions.php.
In the WordPress admin, go to Appearance → Theme File Editor and open the child theme’s functions.php. If you don’t have a child theme, create one first.
2. Paste the login/logout function.
Copy the example function below to the end of your child theme’s functions.php file. The function appends a Login link when the visitor is logged out and a Logout link when the visitor is logged in.
add_filter( 'wp_nav_menu_items', 'add_login_logout_link', 10, 2 );
function add_login_logout_link( $items, $args ) {
if ( is_user_logged_in() ) {
$items .= '<li><a href="' . wp_logout_url(home_url()) . '">Logout</a></li>';
} else {
$items .= '<li><a href="' . wp_login_url() . '">Login</a></li>';
}
return $items;
}3. Match your theme’s styles.
After adding the function, your menu will show the new item, but it might not match your theme exactly.
Use your browser inspector to copy the exact li and a (anchor) classes from an existing menu item, then paste them into the li and a in the code above.
Example: if an existing menu item shows and its anchor uses the class “menu-link“, copy those class parts (omit any unique numeric ID classes if you prefer) so the new item inherits the same styling.
4. Save and test.
Update the functions.php file, visit your site, and refresh the page. If you are logged in, you will see Logout; in a private/incognito window, you will see Login.
Troubleshooting
- Link not showing: Check that you edited the child theme functions.php, not the parent theme. Clear any caching plugins or server cache.
- Style mismatch: Make sure you copied both the list item and anchor classes from an existing menu item. Some themes apply styles to both elements.
- Wrong menu location: If the link appears in the wrong menu or not at all, remove or update the theme_location check in the function. Some themes use different location slugs, such as ‘main-menu’ or ‘primary’.
- Logout redirect: The function above redirects back to the current page after login/logout. Change the URL to home_url() or a custom page if you prefer.
Customization tips
- Change the link text: Replace ‘Login’ and ‘Logout’ in the code with any label or use translation functions like esc_html__( ‘Login’, ‘your-textdomain’ ).
- Add an icon: Insert an SVG inside the anchor markup to place it before the text.
Use capabilities: To show role-specific links (for admins only), wrap the check in calls to current_user_can().
Plugin alternative: If you prefer a plugin, search for “menu login logout” plugins that add visibility rules without code.
Conclusion
This lightweight method provides a consistent Login/Logout experience across most themes and lets you quickly match your menu’s Appearance by copying existing classes.
The key steps are: use a child theme, paste the function into functions.php, copy your theme’s li and classes, and test both logged-in and logged-out states. If you run into issues, check caching, menu location slugs, and that the classes are copied exactly.
If you want help adapting the code to your theme or adding features like redirecting to a custom URL after login, reach out with details about your theme and menu location.
