Blog > WordPress

Sep 10

Snippet: WordPress 3.0 Menus – Add a login / logout link

Adding custom links to the WordPress 3.0 menu system

The new WordPress 3.0 menu system is pretty powerful and provides some very interesting new options for creating menus in WordPress. Previously, I have always used wp_list_pages and a custom Walker class to provide hierarchical menus based on the page structure, but that’s a topic for another post. This super-short snippet shows you how to add a login / logout link to one of your WordPress menus.

WordPress contains some special functions for creating login and logout links: wp_login_url and wp_logout_url. They both take a string argument which is the URL you want them to redirect to after performing the login/logout action. In the example below I am adding the login / logout link to the beginning of the menu and redirecting to the home page (index.php) in both cases.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// functions.php
function add_login_logout_link($items, $args)
{
if(is_user_logged_in())
{
$newitems = '<li><a title="Logout" href="'. wp_logout_url('index.php') .'">Logout</a></li>';
$newitems .= $items;
}
else
{
$newitems = '<li><a title="Login" href="'. wp_login_url('index.php') .'">Login</a></li>';
$newitems .= $items;
}
return $newitems;
}
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

If the current user is logged in, they will see a logout link and vice versa. To use this snippet, copy and paste the code into your theme’s functions.php file. You can easily change it to redirect to the dashboard after login, or have the login / logout link at the end of the menu like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// functions.php
function add_login_logout_link($items, $args)
{
if(is_user_logged_in())
{
$newitems = $items;
$newitems .= '<li><a title="Logout" href="'. wp_logout_url('index.php') .'">Logout</a></li>';
}
else
{
$newitems = $items;
$newitems .= '<li><a title="Login" href="'. wp_login_url('wp-admin/index.php') .'">Login</a></li>';
}

return $newitems;
}
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

You can also place the login / logout link elsewhere in the menu structure. However, you need to split the menu items apart, locate the right position, insert your menu item and then stick the menu items back together again to return. An example of putting the link second is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// functions.php
function add_login_logout_link($items, $args)
{
$newposition = 2;

// split the menu items into an array using the ending <li> tag
$items = explode('</li>',$items);

// setup our new link (without the end li tag)
if(is_user_logged_in())
{
$newlink = '<li>' . $args->before . '<a title="Logout" href="'. wp_logout_url('index.php') .'">' . $args->link_before . 'Logout' . $args->link_after . '</a>' . $args->after; // no </li> needed this is added later
}
else
{
$newlink = '<li>' . $args->before . '<a title="Login" href="'. wp_login_url('index.php') .'">' . $args->link_before . 'Login' . $args->link_after . '</a>' . $args->after; // no </li> needed this is added later
}

$newitems = array();

// loop through the menu items, and add the new link at the right position
foreach($items as $index => $item)
{
// array indexes are always one less than the position (1st item is index 0)
if($index == $newposition-1)
{
$newitems[] = $newlink;
}
$newitems[] = $item;
}

// finally put all the menu items back together into a string using the ending <li> tag and return
$newitems = implode('</li>',$newitems);

return $newitems;
}
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

Note that in the above example, I have also used the before, after, before_link and after_link args values so that the additional link has the same display properties as the generated ones. Also the add_filter function takes 4 arguments: the “hook” or point in the code where this code should be executed, the function to be carried out, the priority (1 is executed first, 12 is executed last) and the number of arguments the function accepts. Using priority 10 means the code is executed near last.

A Note on Snippets: When customising a CMS such as WordPress it is often the simplest pieces of code which are the hardest to either find or remember. These snippets are placed here for my own reference and will hopefully be useful to others. If you find them useful or have any suggestions, please let me know.

Share this...

Comments

17 Comments to "Snippet: WordPress 3.0 Menus – Add a login / logout link"

22nd Oct

Ruben says:

Thanks for posting this! I’ve been scouring the Net for this on a client project that requires easy login/logout access for member only access to certain pages. Your snippet works perfectly!
22nd Jan

zeaks says:

Thanks for this. Is there a way to also display the “dashboard” or “admin” link once a user is logged in as well?
1st Feb

Allen says:

Thanks for this! The only problem I had was that the menu was no longer centered after adding the add_login_logout_link function. Is there any way to fix this?
28th Feb

hArm0ny says:

Hi ErisDS,
thank you for posting this. I was looking for something like that. I am using several Menues on my site. Using your Snippet works fine, but it puts the logout link in every menu.

Do you have a hint for me how I can change your Snippet to only put the logout link in a certain menu?

If I find a solution, I will post it here…

best wishes meanwhile.
1st Mar

hArm0ny says:

ok, wrote a lot, but i got lost while posting.

to make it short:
http://wordpress.stackexchange.com/questions/2143/customizing-only-a-specific-menu-using-the-wp-nav-menu-items-hook

this link helped me a lot to solve my issue
21st Jul

Elliott says:

Thanks alot :)
5th Oct

Ebizzle says:

Cool, cool. My only problem with that is I have 2 menus displayed adjacent to each other (top navigation (aka primary), and middle nav (aka secondary)), when I do insert the

1
if( $args->theme_location == 'primary' )

part, and after login, the secondary nav dissapears. Besides, during logout mode, the loginout functions are still in BOTH menus.
So my question is, How can I make it so that when I am putting the loginout function it’ll be displayed in the FIRST menu, but NOT removing my secondary navigation links AFTER login. (Again, I don’t want the loginout link to be displayed in the second navigation menu… AT ALL) ….
28th Oct

Panos says:

You are a God man…many many thankzzzzz….
22nd Nov

New Age Politics says:

I used this technique on my website menu. Thanks for the work.
7th Dec

Brad says:

Thanks! Worked like a charm and was very happy to discover that I could place the login link into the sub-menu of the main menu. Great work.
11th Dec

Dominor Novus says:

Very useful and straightforward but any ideas on how to right align this custom link (versus the left-aligned standard links). The list mark-up seems to prevent it.
21st Feb

Jon Page says:

Hello, I have been scouring around the net for over a week now searching for possible solutio of my problem.
This post is very much interesting, however, I don’t know where do I insert that codes, since I am using two-menu-template (secondary and primary).
I tried the tutorials on wordpress about link customization but it seems like it doesn’t work. Because according to the forum I should make the link like this: [http://sitename.com/wp-login.php?(plus the redirect link for logging out)] but it does not work… everytime I click the login/logout menu… it will log out and will not log in….
Please help how to fix this..?
1st Mar

Sarah says:

Is there any way of adding this to a submenu (dropdown)?
Thanks
22nd Mar

The Frosty says:

Awesome little snippet. Now I’m going to try and build a column so these links are dynamic in the menu page.
28th Mar

Ben says:

Hi,
Thanks a lot for this! It really helped me out. Had previously hardcoded login/logout links but when switching to WP menus it didn’t work. Thanks again!

Take care.
26th Apr

Xiso says:

Ty for sharing it. keep the good work
12th Sep

nappy cakes says:

many thanks for this information I have been trying to find this solution for my nappy cakes website for months.