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 Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
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

36 Responses

    Nicholas Black

    How do I make it so the log in redirects to a specific URL on my website, instead of the default wp-login page?

      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.

      Luko Del Ponte

      Simply add Custum Link to your Custom menu. In Label put “Log In” text and in URL “specific URL on your website” :)

    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.

        Kali Henry

        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]';

    Cathie Heart

    Thank you for sharing this code. Is there a way to only have it show on the primary menu and not primary and secondary menu in combination?
    Thanks.

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

      ?>

            Joseph Foley

            Thanks, Björn.

            Duan

            Hi Björn,

            I used your code and changed the theme location to ‘Secondary Navigational Menu’, the name of the menu I want the log in/out link to appear in, but nothing showed on my custom nav menu. Is there anything else that I might need to change to get it appearing?

            Duan

            Hi again,

            I only just realised that you meant change the MENU-NAME, meaning, the name that the theme assigns the menu, not what I called it when I made it.

            Anyway the problem is that the theme I am using only supports a primary menu as the main menu, HOWEVER, it does support the addition of a custom menu as a widget in the sidebar, now I just don’t know where to find what that would be called!

            Here is function.php for perusal, I hope you can help!

            http://pastebin.com/raw.php?i=hb10b9BZ

            Regards,
            Michael

    deborah_sanders

    Hi
    How do I Change my Login page from the WordPress page
    Thanks

    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.

    sahilthakur

    wow very good………… i like it

    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

      Joe Foley

      Looks like you’ve fixed it. I only see one.

    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?

      Joe Foley

      Harish – Yes, that would be my guess.

    tim_topham
    • Single
    • 4
    • #17452

    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?

    Ashish

    Thank you very much to provide such nice information for beginners.

    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.