Logo

Add Login/Logout Link in Navigation Menu

You can add a dynamic Login/Logout link to your WordPress navigation menu using a small code snippet. The link automatically shows Log In to guests and Log Out to logged-in users — no plugin or manual menu editing required.

Last updated on Jul 15, 2026

Before You Begin

This method requires adding code to your theme's functions.php file. Adding code directly to a parent theme's functions.php will cause it to be overwritten on every theme update.

To avoid losing your customization, you must add the code to a child theme instead. If you haven't set up a child theme yet, follow this guide first:

👉 Also refer to the guide on how to add custom code snippets safely before proceeding.


Adding the Login/Logout Link

Once your child theme is ready, open your child theme's functions.php file and add the following code:

add_filter( 'wp_nav_menu_items', 'ur_add_loginout_link', 10, 2 );

function ur_add_loginout_link( $items, $args ) {
    if ( is_user_logged_in() && $args->theme_location == 'primary' ) {
        $items .= 'Log Out';
    } elseif ( ! is_user_logged_in() && $args->theme_location == 'primary' ) {
        $items .= 'Log In';
    }
    return $items;
}

Save the file once you've added the code.


How It Works

The code hooks into the primary navigation menu and appends a list item dynamically:

Logged-out visitors see a Log In link pointing to your My Account page.

Logged-in users see a Log Out link that logs them out and redirects to the My Account page.

The link only appears in the menu assigned to the primary theme location. If your theme uses a different menu location name, replace 'primary' in both conditions with the correct location slug.


Verifying the Result

After saving, visit your site's frontend and check the navigation menu:

As a logged-out visitor, you should see a Log In link in the menu.

After logging in, the same position should now show a Log Out link.

If the link does not appear, confirm that your active menu is assigned to the primary theme location under Appearance → Menus → Manage Locations.


This is a developer-level customization. If you are not comfortable editing theme files, consider reaching out to a developer or using the custom code snippet method recommended by the plugin.entation here...