17

How can I add a link to the primary navigation menu with the class="right" attribute?

I tried to add a static link to example.com/wp-logout.php?action=logout but that leads to a logout confirmation page. Is there any way to make it a log out link?

6
  • 1
    Have you seen existing questions and answers like this one?
    – fuxia
    Jul 29 '14 at 19:04
  • Have you seen wp_loginout()?
    – kaiser
    Jul 30 '14 at 16:18
  • 2
    I have removed the accepted answer, because it was plagiarized from this site without attribution.
    – fuxia
    Jul 30 '14 at 23:13
  • I ended up using something similar; at least using the loginout() function. I'll post exactly what I did next time I'm in front of my computer. Thanks @toscho Jul 31 '14 at 2:30
  • You can use this free plugin wordpress.org/plugins/login-logout-register-menu to achieve the same easily. Apr 16 '17 at 7:40
46

You can achieve this using the wp_nav_menu_items hook. Let's have a look at the following piece of code which shows the login/logout link on the primary menu location.

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

function wti_loginout_menu_link( $items, $args ) {
   if ($args->theme_location == 'primary') {
      if (is_user_logged_in()) {
         $items .= '<li class="right"><a href="'. wp_logout_url() .'">'. __("Log Out") .'</a></li>';
      } else {
         $items .= '<li class="right"><a href="'. wp_login_url(get_permalink()) .'">'. __("Log In") .'</a></li>';
      }
   }
   return $items;
}

This is what we have implemented in the above example.

  1. First added a filter for wp_nav_menu_items hook and attached a function to it.
  2. After checking for primary theme location, we have checked whether user is logged in or not.
  3. If logged in, we have showed the Log Out link otherwise the Log In link.
  4. We have passed the permalink of the currently viewing page to the login url so that user will be redirected to the current page after successful login.
  5. We have used the class="right" to the above code to meet your requirement.

You can find a detailed explanation on this blog.

2
  • @timo-s In the Twenty Seventeen (child) theme this will work only with a top menu location: if ($args->theme_location == 'top').
    – Iurie
    Sep 2 '17 at 20:59
  • location needed to be for me primary-menu
    – Toskan
    Sep 3 '17 at 4:08
2

Try adding a custom link with http://example.com/wp-login.php?action=logout It worked for me!

1
  • 2
    This presents the user with the "Are you sure you want to log out?" prompt, due to the fact that the nonce is missing. Jul 10 '17 at 18:28
2

If you're flexible about adding a plugin to get this functionality, you could use: https://wordpress.org/plugins/login-logout-register-menu/

It simply adds a very convenient section in the menu builder. You can combine it with another plugin to restrict what menu items are shown to logged in users, which ones to logged out users, and which ones to everyone.

enter image description here

0

My footer menu is a widget, therefore I had difficulties using the code by Chittaranjan. The following edited version works for me. I also changed the links and made them "dynamic": login leads to a page of your choice, logout will either stay on the current page, or send to home, if the current page is your (private) login page. Ideally it would check if your login page is actually private, but I don't know how to do that, sorry.

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

function wti_loginout_menu_link( $items, $args ) {
    //var_dump($args);
    if (($args->menu->slug == 'footer')) {
        if (is_user_logged_in()) {
            $loginlink = '/your-private-page';
            $logoutlink = get_permalink();
            if (strpos($logoutlink, $loginlink) !== false) {
                $logoutlink = '/';
            }
            $items .= '<li class="right"><a href="'. wp_logout_url($logoutlink) .'">'. __("Log Out") .'</a></li>';
        } else {
            $items .= '<li class="right"><a href="'. wp_login_url($loginlink) .'">'. __("Log In") .'</a></li>';
        }
    }
    return $items;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.