WordPress Tips

Add Login Logout Link To Any Nav Menu

In this tutorial, i’ll provide the PHP and in some cases a small amount of CSS which enables you to add a login and logout link to any navigation menu in any theme.

Update : This tutorial contains another 4 methods of adding login/logout links to any Genesis nav menu.

Here’s the forum question the solutions in this post answer:

I would like to add “Login” or “Logout” link (depending upon the logged in status) at the Primary Menu in eleven40 pro theme. Can anybody please help me with this?

In this tutorial, i’ll provide the code which is tested on these themes:

  • Divi by Elegant Themes
  • Twenty Twelve
  • Twenty Thirteen
  • Twenty Fourteen
  • Genesis Sample theme

I’ll also provide some sample code you can modify for use on other themes if needed which includes a class and CSS code to get rid of the list style bullets some themes generate in the nav menu.

Note: All PHP code should be copied from the view raw link in the Gist and pasted at the end of your child themes functions.php file using a code editor like Notepad++.

Add To Different Menus

Some of the code snippets on this page use the primary menu and others the secondary nav menu. You can modify the filter name to determine which nav menu your login/logout link displays in.

wp_nav_menu_items – works on all menus
wp_nav_menu_primary_items – only works on the primary nav menu
wp_nav_menu_secondary_items – only works on the secondary nav menu

Simply replace the name of the menu ( primary or secondary ) with the name your theme uses.

Leave a Reply

Your email address will not be published. Required fields are marked *