Skip to content

Everything for WordPress, web development — and beyond

🔑 Login and logout button in the WordPress menu: 2 working methods

🔑 Login and logout button in the WordPress menu: 2 working methods

Need a "Log In" button in the menu that automatically turns into "Log Out" after authorization? This task comes up on every other site with registration: forums, online stores, LMS, membership portals, even blogs with commenters.

Previously, the baw-login-logout-menu plugin handled this. In June 2025, the author requested removal from the WordPress.org directory. The plugin hadn't been updated in 9 years, used the create_function function removed from PHP 8, and contained an XSS vulnerability. In practice, two out of three sites where we encountered it had already migrated to modern solutions.

Below are two working methods that do exactly the same thing: quick via plugin and fully with your own code. Both tested on current versions of WordPress and PHP.

💡 Quick overview:

  • Install the Login Logout Menu plugin, drag the item into your menu, and configure redirects.
  • Add the wp_nav_menu_items filter to your child theme's functions.php for full control.
  • Include Font Awesome icons via Better Font Awesome or a wp_enqueue_style line.

Method 1: Login Logout Menu plugin, quick and code-free

A modern replacement for the defunct baw-login-logout-menu, the Login Logout Menu plugin by WPBrigade. Version 1.5.2, compatible with WordPress 6.9 and PHP 8.3. Unlike its predecessor, it doesn't require fiddling with #bawloginout# in the URL field: everything works through the native menu interface.

Setting up login and logout in WordPress menu via plugin

Install via Plugins → Add New, search for login-logout-menu. After activation, open Appearance → Menus. In the left column, you'll see a Login/Logout/Register/Profile block with six items. The most commonly used one, Login | Logout: it automatically shows "Log In" to guests and "Log Out" to authenticated users.

Drag it into the desired menu. Expand the added item and enter the redirect URL for after login and after logout. Leave the fields empty, and the user stays on the same page. Enter /my-account/, and after login they'll land in their account dashboard.

The plugin also adds "Register", "Profile", "Username", and "Reset Password" items. They're optional, but for a membership site, profile and registration in the menu make sense.

  • Pros: zero code, setup in a minute, works with any block or classic menu.
  • Cons: one more plugin in the admin. For 90% of sites, this isn't a problem.
  • Price: free, download from WordPress.org.

Method 2: wp_nav_menu_items filter, full control over markup

Don't want to install a plugin for one button? The task is solved with the wp_nav_menu_items filter. The code goes in your child theme's functions.php or via the Code Snippets plugin. In the parent theme, the file will be overwritten during updates.

Add to your child theme's functions.php:

1/**
2 * Adds a login/logout button to the specified menu.
3 */
4add_filter( 'wp_nav_menu_items', 'sdstudio_add_loginout_link', 10, 2 );
5
6function sdstudio_add_loginout_link( $items, $args ) {
7 // Replace 'primary' with the slug of your menu
8 if ( 'primary' !== $args->theme_location ) {
9 return $items;
10 }
11
12 if ( is_user_logged_in() ) {
13 $link = '<li class="menu-item menu-item-logout">';
14 $link .= '<a href="' . wp_logout_url( home_url() ) . '">Log Out</a>';
15 $link .= '</li>';
16 } else {
17 $link = '<li class="menu-item menu-item-login">';
18 $link .= '<a href="' . wp_login_url( get_permalink() ) . '">Log In</a>';
19 $link .= '</li>';
20 }
21
22 return $items . $link;
23}

The wp_nav_menu_items filter fires when each menu is rendered. The theme_location check ensures the button appears only in one place, not in every menu at once. is_user_logged_in() determines the status: true for authenticated, false for guest. The functions wp_login_url() and wp_logout_url() return correct URLs with nonce tokens, safer than hardcoding /wp-login.php.

Login button in WordPress menu with icon

After adding the code, a text link "Log In" or "Log Out" appears in the menu. Without additional styles, it inherits the theme's formatting.

Logout button in WordPress menu with icon
  • Pros: zero plugins, full control over HTML and CSS.
  • Cons: you need to know the menu's theme_location. If you don't, open your theme's header.php, find the wp_nav_menu() call, and check the theme_location parameter. Most often it's primary, header, or main.
  • Price: free, the code is yours.

Bonus: Font Awesome icons for login and logout buttons

Text "Log In" and "Log Out" work, but a button with an icon stands out more. The simplest path: the Better Font Awesome plugin (200,000+ installs). Install, activate, icons are available immediately: the plugin automatically pulls the latest version.

For the code method, we'll add FA 6 icons directly in the filter markup:

1if ( is_user_logged_in() ) {
2 $link = '<li class="menu-item menu-item-logout">';
3 $link .= '<a href="' . wp_logout_url( home_url() ) . '">';
4 $link .= '<i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i> Log Out';
5 $link .= '</a></li>';
6} else {
7 $link = '<li class="menu-item menu-item-login">';
8 $link .= '<a href="' . wp_login_url( get_permalink() ) . '">';
9 $link .= '<i class="fa-solid fa-user" aria-hidden="true"></i> Log In';
10 $link .= '</a></li>';
11}

The classes fa-solid fa-user and fa-solid fa-right-from-bracket are the current Font Awesome 6 syntax. The old fa fa-user / fa fa-sign-out still work by inertia, but on fresh builds they may not render.

If you don't want to install a separate plugin for icons, include FA with one line in functions.php:

1add_action( 'wp_enqueue_scripts', function() {
2 wp_enqueue_style(
3 'font-awesome',
4 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css'
5 );
6});

Configuring redirects after login and logout

Both methods by default return the user to where they were. But sometimes you need something different: after login, to the dashboard; after logout, to the homepage.

Redirect fields in Login Logout Menu plugin settings

In the Login Logout Menu plugin, redirect fields are right in the menu item settings: expand the added item and enter the URL.

For the code method, wp_login_url() accepts a $redirect parameter: the URL to send users after login. wp_logout_url() works the same way:

1$login_url = wp_login_url( home_url( '/my-account/' ) );
2$logout_url = wp_logout_url( home_url( '/' ) );

If your redirect logic is more complex (different pages for different roles, tracking referrals), connect Redirection. Two million installs, 4.5 rating, practically an industry standard for WordPress. The plugin isn't about the login button; it's about managing all redirects: 301/302, 404 tracking, CSV import.

Redirection management panel in WordPress

⁉️🤔 Frequently asked questions

Can I create the button without any plugins and without editing code?

Yes, but only in themes where the menu lets you select "Log In" from a ready-made list. Check Appearance → Menus under the "Custom Links" tab: in Astra, GeneratePress, and Kadence, this option exists. If there's no dropdown list, use method 2 with the filter. It's no harder than replacing a link.

Why did the old baw-login-logout-menu plugin disappear from the directory?

The author requested closure in June 2025. The plugin hadn't been updated in 9 years, used the create_function function removed from PHP 8, and contained an XSS vulnerability. If it's still on your site, remove it and replace with the same Login Logout Menu: settings won't transfer, but the button itself can be reconfigured in a minute.

How do I create a button with an icon without a separate icon plugin?

Include Font Awesome via wp_enqueue_style (the line in the bonus section above) and add an <i> tag with the appropriate class inside the link in the filter. The fa-user icon for login, fa-right-from-bracket for logout. Style via the CSS classes menu-item-login and menu-item-logout.

What if the menu is built in the block editor (FSE)?

In block themes (Twenty Twenty-Four, Ollie), the menu is built through the site editor, not through classic Appearance → Menus. The Login Logout Menu plugin doesn't work with block menus yet. Use method 2 with the filter: wp_nav_menu_items is called in block themes too, if the menu renders through the navigation block.

Is it safe to load Font Awesome from a CDN on a production site?

The Cloudflare CDN for Font Awesome is one of the most reliable public CDNs, serving billions of requests daily. If you need full control, download only the icons you need (user, right-from-bracket) and upload them locally to your theme. For most sites, the CDN option is simpler and doesn't cause issues.

What to choose for your task?

If your site has registration, a forum, a store, an LMS, or a membership portal, a login and logout button in the menu saves users clicks and reduces bounces from "couldn't find how to log in."

The choice between methods is simple:

  • Need it quick and without code? Install this plugin. Actively maintained, lightweight, doesn't conflict with themes.
  • Want to keep plugins to a minimum or need non-standard markup? Use the wp_nav_menu_items filter. Five lines of PHP, and the button looks exactly as intended.

For icons, Better Font Awesome covers most scenarios. If you're not installing the plugin, one wp_enqueue_style line solves the issue. Connect Redirection when redirect logic goes beyond "after login to dashboard, after logout to homepage": for the simple case, wp_login_url( $redirect ) is enough.

Both methods have been tested on Astra, GeneratePress, Kadence, and default WordPress themes. Fifteen minutes, and the button in your menu lives its own life: "Log In" for guests, "Log Out" for users.