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

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