Login/Logout Menu Items

Add a smart Login/Logout link to your navigation menu that automatically shows “Login” when visitors are logged out and “Logout” when they’re logged in. No coding required - just add it once and it works dynamically.

Use Cases#

• Add convenient login/logout links to your main navigation
• Let members easily access login without hunting for /wp-login.php
• Provide a clear logout option in your menu for logged-in users
• Replace manual login/logout links that require shortcodes or plugins

How It Works#

1. Module adds a “Login/Logout Links” box to the menu editor
2. Add the special menu item to any menu
3. When logged out: visitors see “Login” linking to the login page
4. When logged in: users see “Logout” linking to the logout URL

Where to Find It#

Classic Themes: Go to Appearance → Menus. In the left sidebar, you’ll see a new “Login/Logout Links” panel.

Block Themes: WordPress has a built-in “Login/out” block. In the Navigation block, click + and search for “Login/out” to add it. This module’s settings won’t apply to the built-in block.

Adding the Menu Item (Classic Themes)#

1. Go to Appearance → Menus
2. Select the menu you want to edit (or create a new one)
3. Look for “Login/Logout Links” in the left sidebar panels
4. Check the “Login/Logout” checkbox
5. Click Add to Menu
6. Drag the item to your desired position
7. Click Save Menu

Settings#

Configure in Switchboard → User Management → Login/Logout Menu Items.

How It Displays#

For Logged Out Visitors#

Home | About | Services | [Log In]

Clicking “Log In” takes them to /wp-login.php with a redirect back to the current page after login.

For Logged In Users#

Home | About | Services | [Log Out]

Clicking “Log Out” logs them out and redirects back to the current page.

Styling the Menu Item#

The menu item gets the class switchboard-login-logout-link plus standard WordPress menu item classes. Style it like any other menu item:

/* Style the login/logout link */
.switchboard-login-logout-link a {
    background: #6366f1;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
}

.switchboard-login-logout-link a:hover {
    background: #4f46e5;
}

PHP Helper Function#

For theme developers, use the helper function to output a login/logout link anywhere in your templates:

<?php echo switchboard_login_logout_link(); ?>

With Custom Options#

<?php echo switchboard_login_logout_link([
    'login_text'  => 'Sign In',
    'logout_text' => 'Sign Out',
    'class'       => 'my-custom-class',
    'redirect'    => home_url(),
]); ?>

Available Parameters#

Native WordPress Alternative#

You can also use native WordPress functions directly:

<?php if (is_user_logged_in()): ?>
    <a href="<?php echo wp_logout_url(); ?>">Log Out</a>
<?php else: ?>
    <a href="<?php echo wp_login_url(); ?>">Log In</a>
<?php endif; ?>

Multiple Menu Locations#

You can add the Login/Logout item to multiple menus. Each menu gets the same dynamic behavior - the text changes based on login state.

FAQ#