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;
}

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

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.

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

Photo: login icon from BigStock

Tags

Comments (31)

  1. 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

    • 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.

      • 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. :)

        • 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;
          }

          • 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;
            }

          • 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]‘;

  2. 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.

  3. 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;
    }

  4. 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

  5. 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.

  6. 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?

Participate