How to Add a Login/Logout Link to Your WordPress Menu


Almost nothing is more frustrating for a user than searching around for a login link in order to get to important content.

The following method found at Vandweerd.com will automatically detect whether a user is logged in or not and put a login or a logout link right on your menu bar.

*** Please note, this method only works when you are using WordPress’ custom menus. (The menu function available in the admin section: Appearance > Menus.)

Add Code to Your Functions File

You will need to add a bit of code to your functions file for this. But after copying and pasting this code, you’re finished.

Go to Appearance > Editor > Theme Functions (functions.php). Place the following code in the bottom your functions file and hit “Update File.”

add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);
function add_login_logout_link($items, $args) {
        ob_start();
        wp_loginout('index.php');
        $loginoutlink = ob_get_contents();
        ob_end_clean();
        $items .= '<li>'. $loginoutlink .'</li>';
    return $items;
}

The Result

Keep in mind that these links will appear wherever you put your custom menus – be they at the top of your page, in your sidebar, or anywhere else.

Photo: login icon from BigStock

37 Responses

      Joe

      Nicholas – I don’t have the coding knowledge to know how to do that with the present code. You might look for a solution that simply redirects the login page independent of this solution.

    Shane Holloman

    Fantastic solution and thank you for this! I’d like to float this item to the right now. The CSS isn’t a problem here, rather I’m an idiot in php and html and not sure how and where to add a class to this new menu item so I can grab it with CSS float it to the right, away from the rest of the menu…

    here’s the site in question: http://linamuses.com

      Joseph Foley

      Hi Shane – I’m afraid that’s beyond me too. As this item is added in via functions file, you will need to look around for how to position a menu item via the functions.php file. … Sorry I couldn’t be more help.

        kalihenry

        I was just fiddling around looking for this code and saw in the admin panel that you can access the classes right from the menu itself. Just click at the top of your screen on screen options which will bring down a drop menu where you can select CSS classes. :)

          Henrik Jordahn

          I found that adding the code above very nicely adds login and logout to the menu, and adjusts to local language settings, Danish in this case.

          I would also like to have the login/out link floated to the right, but it seems that the menu item has no class, so there is no way to add behaviour to it in CSS.

          I overcame this by setting the menu items to float right, and added a class=left and set that to float left. All other menu items were then given class=left:

          #access .menu-header li,
          div.menu li {
          float: right;
          position: relative;
          }

          #access .menu-header li.left,
          div.menu li {
          float: left;
          position: relative;
          }

            Henrik Jordahn

            And upon further reflection, the solution is a lot simpler.
            The second to last line in the code above sets the menu item:

            $items .= ”. $loginoutlink .”;

            Change this to:

            $items .= ”. $loginoutlink .”;

            and add to the stylesheet:

            #access .menu-header li.right,
            div.menu li {
            float: right;
            position: relative;
            }

            Henrik Jordahn

            The code doesn’t display right, let’s try again, changing the brackets to sqaure ones.

            My aim is to insert a class=”right” in the code above, and I am doing that in the second to last line of the code:
            $items .= ‘[li]’. $loginoutlink .'[/li]';

            Changing to this:
            $items .= ‘[li class=”right”]’. $loginoutlink .'[/li]';

      Björn Wramstedt Rehammar

      Hey. Here is a solution for how to specify in which menu the login/out link should appear. Change the MENU-NAME according to your theme’s available menus. I think you find them under includes/function.php where the register_nav_menu… Cheers!

      theme_location == ‘MENU-NAME’ ) {
      $nav .= ”. $loginoutlink .”;
      }

      return $nav;
      }

      ?>

    deborah_sanders

    Hi Joe
    I found a plugin. When one login it takes them to the WordPress Logo. I have my Logo on the login page now. Just to let you the Login/Logout really help me alot.

    joshua_jones2

    Personally, I try to avoid calls to the output buffer whenever possible, as that can get expensive quickly. Instead, why not just add a value of false to the second argument in wp_loginout()? The code would be as follows:

    add_filter(‘wp_nav_menu_items’, ‘add_login_logout_link’, 10, 2);

    function add_login_logout_link($items, $args) {
    $items .= ” . wp_loginout(‘index.php’, false) . ”;
    return $items;
    }

      joshua_jones2

      forgot about the html stripping lol…. but you get the point…. just add the list element tags around wp_loginout()

    smamphey

    Hi there,

    I placed the code in my functions.php

    The code worked fine except that it places the login logout link in two places on my site. I have a top menu and a main menu. Ideally i would like the link showing only for the top menu.

    Is there a way to do that? Please find the code below. My website address is http://www.ghanalandlords*com/

    Thank you

    Mark

    I used the code and it looks good and seems to work – except the “log out” doesn’t seem to kill the session or truly log one out, because I can click on one of my protected-content pages after logout and still view the page, even though it’s set to only be viewable by those who are logged in.

    Harish

    Hi,

    Login link doesn’t seem to work for me. It gives me page cannot found error. Do you know what I might have done? I have changed login slug using Better WP security. Do you think that might be affecting this?

    tim_topham

    Hey this is perfect – just what I needed.

    Only issue is that I use a Genesis Sticky Header and it doesn’t show when you scroll down at the header goes sticky!

    How do I also add the login/out to the Genesis Sticky Header Menu?

    Thanks,
    Tim.

    Keith

    I’m a little curious – using the principle that Login/Logout shows in the menu depending on whether the membership is recognised, would it be possible to have, for example, “Join/Account” interchangeable in the menu dependent on whether one was logged in or not?

    Robby

    Thanks for the tips here! I had been using the BAW Login/Logout plugin to for similar functionality. But, they haven’t been updated in a few years and that always makes me a bit weary.

    Paolo

    Hi guys, just wanted to know that I solved my problem using your code. Since I had only a redirect issue with that, as other, here the solution I found that perfectly works:

    add_filter(‘wp_nav_menu_items’, ‘add_login_logout_link’, 10, 2);
    function add_login_logout_link($items, $args) {
    ob_start();
    if ( is_user_logged_in() ) {
    wp_loginout(‘index.php’); ****index.php if you want to take them to home after logout
    } else {
    wp_loginout( get_permalink( get_page_by_title( ‘Title page’ ) ) );
    }
    $loginoutlink = ob_get_contents();
    ob_end_clean();
    $items .= ”. $loginoutlink .”;
    return $items;
    }

    With this code people are redirect after login to the page (title page) you choose on this line:

    wp_loginout( get_permalink( get_page_by_title( ‘Title page’ ) ) );

    and when they log out they’re redirect at the home page.

    Hope that helps.

    Paolo

Comments are closed.