Easily add Login – Logout button in WordPress navigation menu

Below is the script of the video. If you’re having a hard time digesting
what I’m saying, the script below might help!

Hi, in this tutorial we will try to add a login and logout entry on the main navigation of our website. So we’re gonna open our demo site. Now we got the Home and then the Contact Us as the main navigation. What we want to do is to add a Login or Logout button next to the navigation. The first thing that we need to do is head over on our dashboard and go to menus itself. Looks like we got the home and then the contact us. The important factor that we’re looking for, is the name of the navigation itself and the theme location.

Easily add Login – Logout Button

Shown in the video is that little piece of snippets. We’re going to copy the codes right there, then go on the editor. I’m just gonna open this in a new tab. Depending on your theme, really doesn’t matter what theme it is, all you need to do is look for the functions .php. The filename itself is functions.php. I’m gonna edit that. What we need to do is scroll down the very bottom.  And then we’re gonna hit a couple of enter keys and paste in the code. Just for the sake of commenting out, I’m just gonna add a comment which says add login logout in the menu. Then we’re just gonna hit update. Then I’m gonna reload the site and you can see the logout button that means I’m already login.

Easily add Login - Logout ButtonLet’s try opening the same url on a Firefox. Just copy and paste the url and as you can see the term there is login because I’m not login. And on the first one you can see the term logout, because I’m already login. If I’m gonna click login it will automatically go in the login page. But when I click logout it should automatically log me out.

Code Implementation

Let me just explain a little bit on our piece of code. (See video for the actual demo.) What it says is, we got a filter right there which is wp nav menus, then we got the items and the arguments. Now it says, when the argument theme location is equal to top. So that is the most important one, because that thing varies from theme to theme. Now we got that little thing right there which is the dumping the value of the arguments.Now let’s try to do that,. What I’m gonna do is head back on the functions.php. We’re gonna delete // right there and then hit update. Now if I’m gonna reload, it will display all the value of the arguments.

As you can see there, we got the theme location equal to top. If you’re using a different theme, then the value might differ. Now if there is no value using the theme location, then you might as well try different one something like menu_id right there. These are all unique from menu to menu right there. You cannot use the menu_class as an argument because all the menus might just display the menu as a class.

Changing Target Entity

We might as well use the menu_id, so If we’re gonna use it, just copy the menu_id. Let’s say your theme doesn’t have the argument theme location. So we’re gonna use the theme id. Copy that and then go back to your little piece of code,. Then change theme location to theme id. The value of the theme id is top-menu. I’m gonna copy that and paste it on our piece of code. I’m gonna copy the entire code, and then head back on our functions.php. Delete the code right there, replace it with the new entire code that we just edited. And with the new argument which is the menu_id.

Okay, so if I’m gonna reload again, the logout button should stay right there. We’re able to utilize another way of implementing the insertion of the menu item. That little piece of code is your gateway to properly inserting menu items! 

Okay I hope that helps and if you got any questions let me know in the comment below. Thanks!

Leave a Comment