How to add a Logout Link to your menu

This one should be easy – right? You just copy the logout URL from somewhere else on your site, add a new Custom Link item to the menu, and set the URL to the one you copied? Wrong! Unfortunately it’s not that easy. And that may be why you’re here reading this.

If you do it this way, your users will be redirected to a “Are you sure you want to do this?” page before being asked to click “Logout” again.

The reason for this is the WordPress logout URL is customised for each user. The logout URL has a “nonce” which is unique to the logged in user. If the “nonce” is incorrect then the user will be redirected to a “Are you sure you want to do this?” page.

Therefore, we need to dynamically generate logout links, unique to the current user. This is possible using the Replacements functionality in Max Mega Menu Pro.

Step 1:

Create a new Custom Link item and add it to the menu:

The URL is not important, we’ll use the replacements functionality to swap out the URL with a customised logout link further on.

Step 2:

Once you’ve added the item to the menu, save the menu, then hover over the “Logout” item and click the blue Mega Menu button. Click the “Replacements” tab.

  1. Set the Mode to “Replace the menu item URL”.
  2. Set the HTML to:
    [maxmegamenu_logout_url]
  3. Click “Save Changes”.

Making sure the Logout item is only visible to Logged in users

Click the “Roles” tab and set the Display Mode to “Logged in users” and Save.

You’ll now have a dynamic logout link inside your menu, which is only visible to logged in users.

Related Articles