Creating a Logout Button in Divi

This post may contain referral links which may earn a commission for this site

Creating a Logout Button in Divi

Would you like to add a button to your Divi Builder pages to let your users logout? Here's how to do it.

Creating a Basic Logout Button

To create a simple logout button, you can just set the Button URL to something like this:

https://www.mysite.com/wp-login.php?action=logout

Replacing "https://www.mysite.com" with the URL of your site.

So your button module settings should look something like this:

When the user clicks the button, they'll be taken to a logout confirmation page from which they can complete the logout, like so:

Removing the Logout Confirmation

You may wish to get rid of the logout confirmation screen so that the user is logged out as soon as they click the button. You can do so by adding the following PHP code to your site (modified from this Stack Exchange answer):

// === START: Logout without confirmation ===

add_action('check_admin_referer', 'logout_without_confirm', 10, 2);

function logout_without_confirm($action, $result) {
    if ($action == "log-out" && !isset($_GET['_wpnonce'])) {
        $redirect_to = isset($_REQUEST['redirect_to'])?$_REQUEST['redirect_to']:'';
        $location = str_replace('&', '&', wp_logout_url($redirect_to));
        header("Location: $location");
        die;
    }
}
// === END: Logout without confirmation ===

(Note that this will disable the confirmation anywhere it would have been shown on your site, not just for this particular button.)

Clicking the button will now take you straight to the login form:

Redirecting to Another Page

While the steps above will create a button that logs the user out with a single click, it leaves them on the login screen, which may not be where you want them to end up. If you'd rather have them redirected to a different page once logged out, you can do so by modifying the Button Link to something like this:

https://www.mysite.com/wp-login.php?action=logout&redirect_to=https%3A%2F%2Fwww.mysite.com%2Fwelcome

The value of the "redirect_to" parameter in this link is the "URL encoded" form of the URL of the page you want the user to end up on. To get the URL encode form of a URL you can just paste your target URL into an online URL encoder.

In my example, my target URL is "https://www.mysite.com/welcome" and the encoded form is "https%3A%2F%2Fwww.mysite.com%2Fwelcome". Just replace this with your own encoded URL.

Now when the user clicks your logout button they should be logged out and redirected to the page you've specified.

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. Thanks for your sharing. I am recently taking the tutorial on Divi. Your sharing will definitely help me out in the future.

    Reply
    • You're welcome, Kayla!

      Reply
  2. Thanks for your blog! It helped me out since a long search in google.

    I am a bloody newbie but I found one step that is easier then your description:

    By the page: "Do you really want to log out?" Is as well an other link. If you copy this link in the button link you get a direct logout. If you combine it then with the redirect tip, you get a nice Logout button direct to the page you like without any questions. As well you don't need to change the PHP file and change the ordinary logout window.

    Reply
    • Hi Adi, thanks for the suggestion. I'm not sure that this will always work, however. The direct logout link you're talking about contains the "_wpnonce" parameter which is used to tie that logout link to a particular logged in session. This means that the link will work when first tested (as you are logged in when generating it and it is valid to log you out of that particular logged in session). However, it won't be able to log you out of subsequent sessions, or log out other users. To see this in action, login using a different browser and then try to log out – you should once again get sent to the "Do you really want to log out?" page (which now contains a logout link with a different _wpnonce value). The PHP code I gave works by letting you bypass the _wpnonce check. I hope that makes sense, and let me know if I'm wrong on this. Thanks!

      Reply

Submit a Comment

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

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. Thanks for your sharing. I am recently taking the tutorial on Divi. Your sharing will definitely help me out in the future.

    Reply
    • You're welcome, Kayla!

      Reply
  2. Thanks for your blog! It helped me out since a long search in google.

    I am a bloody newbie but I found one step that is easier then your description:

    By the page: "Do you really want to log out?" Is as well an other link. If you copy this link in the button link you get a direct logout. If you combine it then with the redirect tip, you get a nice Logout button direct to the page you like without any questions. As well you don't need to change the PHP file and change the ordinary logout window.

    Reply
    • Hi Adi, thanks for the suggestion. I'm not sure that this will always work, however. The direct logout link you're talking about contains the "_wpnonce" parameter which is used to tie that logout link to a particular logged in session. This means that the link will work when first tested (as you are logged in when generating it and it is valid to log you out of that particular logged in session). However, it won't be able to log you out of subsequent sessions, or log out other users. To see this in action, login using a different browser and then try to log out – you should once again get sent to the "Do you really want to log out?" page (which now contains a logout link with a different _wpnonce value). The PHP code I gave works by letting you bypass the _wpnonce check. I hope that makes sense, and let me know if I'm wrong on this. Thanks!

      Reply

Submit a Comment

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