WordPress: Adding a login & Logout link to the Menu

by

Adding a login & Logout link to the Menu

This is a quick one, but very useful if you need to add a login & logout link to the primary menu of your WordPress website.

In as little as 16 lines of code, using a few built-in WordPress functions, you can implement a conditionally based link depending on the state of the user’s login status.

In the snippet below we’ll use the filter hook wp_nav_menu_items to bring our callback function into action. The callback takes in two parameters, $items which is a collection of all menu items, and $args which is an object containing all the arguments for each menu.

Note: you will have to have at least one menu created and assigned to the primary location for this snippet to work.

Step through of the callback function:

  1. The callback first checks that theme_location value of the $args object is set to primary. Note that if you have other menu locations setup in your theme, you can change this value to have the link added to that menu.
  2. Next, a check is made using the is_user_logged_in function to determine what login state the user is in, either logged in or logged out.
  3. If the user is logged in, a logout link is appended to the $items parameter, consisting of the HTML concatenated to the wp_logout_url which generates the appropriate link with the nonce included. Conversely, if the user is logged out, a login link is appended to the $items parameter using the wp_login_url which generates a login link.
  4. The home_url function is passed into both functions, which will redirect the user to the home page after logging in or out.
  5. Finally, the $items parameter is returned for rendering.

Note: If you would like to direct the user to a specific page after logging in or out, you can pass in any valid end point as an argument of the home_url function. For example, to redirect them to the shop page you can use home_url( '/shop' ) or if you have a about page home_url( '/about' ) .

add_filter( 'wp_nav_menu_items', 'mycustom_auth_menu_item', 10, 2 );
function mycustom_auth_menu_item( $items, $args ) {
   if ($args->theme_location == 'primary') {
      if (is_user_logged_in()) {
         $items .= '<li><a href="'
                . wp_logout_url(home_url()) 
                .'">'. 'Log Out' 
                .'</a></li>';
      } else {
         $items .= '<li><a href="'
                . wp_login_url(home_url()) 
                .'">'. 'Log In' 
                .'</a></li>';
      }
   }
   return $items;
}

Note: In the final version of the code, all functions are wrapped in a negative existence check using the php function functions_exists with the ! preceding it. This will prevent collisions if in the event there is already a function with the same name, you can prefix the function names with anything you want by replacing the acaa_ in the name with something of your choosing.

The Entire Code
note: you can download the zip by visiting the github page, or just copy the snippets you would like into your functions.php file of your child theme.