Search for a plugin or theme

WordPress Logout Link – the Definitive Guide

WordPress Logout Link – the Definitive Guide

The logout link is very useful to add to your website. You can add it to multiple places such as the header menu, footer menu, or sidebar.

This article will show you how to find your website’s logout link, add it to various locations of your website, and redirect it to a specific page.

Find the Logout URL

When logged in to your website, the logout link is always accessible in the admin menu bar at the top right corner.

Unless turned off, the menu bar is available to all other users or subscribers altogether.

They can always use that option to log out of your website.

Disabling the admin bar for non-administrators will hide the logout link of the site as well.

If that’s the case, you’ll need to provide another alternative for your WordPress users to logout.

The default logout URL of WordPress is:

http://example.com/wp-login.php?action=logout

Now that we know that, we can add the link above to various locations on our Website.

Make sure to replace http://example.com with your own domain name.

Add Logout Link to Various Locations

In this section, I’m going to show you how to add the logout link to your header menu, footer menu, and sidebar.

Add Logout Link to Header

To add the logout option to the menu, we will need to edit the menu.

Navigate to Appearance -> Menus and select your desired header menu.

On the left side, click on Custom Links, and enter the logout link of your website (the one above) in the URL field. In the Link Text field write ‘Logout’ and click on Add to Menu.

Great, usually the logout link is the last option on the menu and I recommend you leave it that way.

Visit your website and test your new logout link from your header menu.

Once clicked, you will see a warning page where you’ll need to click on the logout link once again to finally logged out.

Later in this article, I’ll show you how to skip this annoying warning page.

Add the Logout Link to Footer or Sidebar

If your theme supports a footer menu and you’re using it, you can add a footer logout link the same way we did with the header.

Navigate to Appearance -> Menus and target the menu of your footer.

Add the link using the Custom Links option on the left and place it at the bottom of the menu.

If your footer is using widgets instead of a menu, add the logout URL to any widget of the header, footer, or sidebar.

Navigate to the widgets screen (Appearance -> Widgets) and look for the Meta widget.

Drag the Meta widget from the left to the location where you would like to display it.

Different themes have different options where to place the widgets. The Twenty-Twenty theme only has footer options but other themes have many others.

After you did it, when checking out your website, you’ll see that the Meta widget is loaded with various links. If you’re happy with all the extra links, great, leave it that way. If you would only like to add a logout link, we will need to use a different widget.

To add a log-out link, we can use the Custom HTML widget.

Drag the Custom HTML widget to your desired location. This time, I’ll drag it to the second footer location.

Enter the code below into the Custom HTML box and click Save.

<a href="http://example.com/wp-login.php?action=logout">Logout</a>

Make sure to replace http://example.com with your actual domain name.

Great, now when checking out the footer, we can see that the logout link was added successfully. Click on it and make sure it’s working.

Hide the Log Out Link to Logged Out Visitors

When we added the logout link to our website, we can see the link even if we are logged out.

Because there is no reason to display a logout link to users that aren’t logged in, we will need to hide it from them.

Although there are many plugins to conditionally display different menus to logged-in/out users, it’s simple enough to do it with CSS only.

In many themes, a specific class is added to the body tag when the user is logged in.

We need to find the logged in added class along with the menu item class that we would like to hide and create the CSS rule.

While you’re logged in to your website, click Inspect on the logout menu item that you would like to hide.

In most cases, the menu link will be nested inside a li element with a unique ID and class. We are going to target the class of the list item (li).

Few lines above it, you’ll see the body tag. Inside the body tag, you’ll see many classes. If your theme supports it, you should spot a logged-in class or something similar.

Now, when we know both classes, we can create the CSS rule.

From the admin menu bar, navigate to Customize.

Inside the Customization screen, chose the Custom CSS option and paste this code.

.menu-item-20 {
	display: none;
}
.logged-in .menu-item-20 {
	display: list-item;
}

Replace the number 20 with the actual number of your menu item and click Publish.

Great job, all you have left to do is to log out of your website and make sure the log out URL is hidden.

If you couldn’t find a logged-in (or similar) class in your body tag, you can still use a plugin such as user menus to achieve similar results.

Disable Logout Warning Screen

As I showed you above, when using the logout links that we added to the main menu, footer, or sidebar, it will show us a warning screen after clicking on the link.

There is a simple way to bypass the warning screen and disable it.

To do that, we are going to add a function to the functions.php file of our child theme.

If you don’t have one yet, read our article and learn how to create a child theme.

Navigate to Appearance -> Theme editor.

Look for the functions.php file of your child theme from the file lists on the right.

Scroll to the bottom of the file, paste this function and click save.

add_action('check_admin_referer', 'pfwp_logout_without_confirm', 10, 2);
function pfwp_logout_without_confirm($action, $result)
{
    /**
     * Allow logout without confirmation
     */
    if ($action == "log-out" && !isset($_GET['_wpnonce'])) {
        $redirect_to = isset($_REQUEST['redirect_to']) ? $_REQUEST['redirect_to'] : get_permalink( wp_logout_url() );
        $location = str_replace('&amp;', '&', wp_logout_url($redirect_to));
        header("Location: $location");
        die;
    }
}

After doing so, navigate back to your home page (or any other page of your website) and click on the logout link again.

If it was set up correctly, you won’t see the warning screen.

Redirect the Logout URL

You probably noticed that after logging-out, the first screen you’ll see is the default WordPress login screen.

That is not very user-friendly and we should fix it.

Just like we did above, we can also use a function in this case to address that.

This is the ultimate function because it will skip the warning screen and redirect the user to a different page on your website.

Paste this function at the bottom of the functions.php file of your child’s theme.

add_action('check_admin_referer', 'pfwp_logout_without_confirm', 10, 2);
function pfwp_logout_without_confirm($action, $result)
{
    /**
     * Allow logout without confirmation
     */
    if ($action == "log-out" && !isset($_GET['_wpnonce'])) {
        $redirect_to = isset($_REQUEST['redirect_to']) ? $_REQUEST['redirect_to'] : get_permalink(10);
        $location = str_replace('&amp;', '&', wp_logout_url($redirect_to));
        header("Location: $location");
        die;
    }
}

Make sure to replace the number inside get_permalink(10) with the actual ID of your desired page. We wrote an article on how to find WordPress page ID.

After entering the function, make sure to save the changes.

The last step is to test it and make sure it’s working properly. Clicking once again on the logout link should log you out and redirect you to a different page while skipping the warning message.

If you haven’t done so yet, your next important step will be to add a login link to your menu. Just like here, it’s also easy to do and simple to follow.

Conclusion

This article thought you in great detail everything you need to know about the log-out link. We also made a short video to take you through the steps and you can find it at the top of this page.

The small websites’ tweaks make a big difference. Our first user experience, for good or bad, happens when we try to log in or out on a website.

These tweaks are so easy to make and thus are a no-brainer, we gonna do it!

Go ahead and add it to your website. After you did it, let us know, what else would you like to learn to improve your website?

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply