Today we are going to look at how to add a logout button to a WordPress navigation menu. In fact, we will be showing either a logout or a login button, depending on whether the user is currently logged in. As well as being convenient for all users, this may also be necessary if you are preventing some users from accessing the WordPress Admin and would still like them to be able to log out.
In order to modify our navigation menu we need to hook into the wp_nav_menu_items filter. This hook gives us an array of menu items as the first parameter and an array of arguments as the second parameter. First, we do a quick check to see if it is the top (or main) menu being displayed using if ($args->theme_location == 'top') { (the location string may be different for your theme), before adding either a logout or login navigation item to the $items array, depending on the user’s logged in status.
add_filter( 'wp_nav_menu_items', 'tattoo_loginout_menu_link', 10, 2 );
function tattoo_loginout_menu_link( $items, $args ) {
if( $args->theme_location == 'top' ) {
if( is_user_logged_in() ) {
$items .= '<li class="logout"><a href="'. wp_logout_url() .'">'. __("Log Out") .'</a></li>';
}
else {
$items .= '<li class="login"><a href="'. wp_login_url(get_permalink()) .'">'. __("Log In") .'</a></li>';
}
}
return $items;
}To add a logout button to a WordPress navigation menu, we simply add any additional items to the $items array inside the wp_nav_menu_items filter. The method described above, can be used to add any number of additional items to a sites navigation. This method is especially useful for plugin development, as navigation items required by a plugin can be added without the need to manually modify a menu in the WordPress Admin.
References