Snippets: Add A Login/Logout Button To Main Menu

Because of how WordPress menus work the only way to add a login/logout is either using a plugin or custom code that hooks into the menu output. Here is a snippet showing how you can add your own custom login/logout link to the menu.

add_filter( 'wp_nav_menu_items', function( $items, $args ) {

	// Only used on main menu
	if ( 'main_menu' != $args->theme_location ) {
		return $items;
	}

	// Add custom item
	$items .= '<li class="my-custom-login-logout-link menu-button">';

		// Log-out link
		if ( is_user_logged_in() ) {

			$text            = 'Logout';
			$logout_redirect = home_url( '/' ); // Change logout redirect URl here

			$items .= '<a href="'. wp_logout_url( $logout_redirect ) .'" title="'. esc_attr( $text ) .'" class="wpex-logout"><span class="link-inner">'. strip_tags( $text ) .'</span></a>';

		}

		// Log-in link
		else {

			$text      = 'Login';
			$login_url = wp_login_url(); // Change if you want a custom login url

			$items .= '<a href="'. esc_url( $login_url ) .'" title="'. esc_attr( $text ) .'"><span class="link-inner">'. strip_tags( $text ) .'</span></a>';

		}

	$items .= '</li>';

	// Return nav $items
	return $items;

}, 20, 2 );

Snippet Type: PHP

Posted Under: Menu

All PHP snippets should be added via a child theme's functions.php file.