Log in and out using custom pages, no logout confirmation and redirects for logging in and out 2023

Question

Good day, I'm having fun and games with having a custom elementor login page that i've designed myself that has a log in widget, having that redirect to a page with a different logged in menu and having a log out page that skips the "are you sure you want to log out" confirmation and redirects on logout to the custom log in page.

I have not looked into the log in redirect section just yet although I have successfully actioned a logged out to logged in menu switch. (i'm not a programmer) but I read on these WordPress Stack Exchange pages that something called a nonse was required. I've tried to action this as recommended:

The following is added to the bottom of my Elementor Hello functions.php file:

/**
 * Added in by Beanie
 */
function wpc_wp_nav_menu_args( $args = '' ) {
    if ( is_user_logged_in() ) { 
        $args['menu'] = 'logged-in';
    } else { 
        $args['menu'] = 'logged-out';
    } 

    return $args;
}
add_filter( 'wp_nav_menu_args', 'wpc_wp_nav_menu_args' );

/**
 * Added in by Beanie - get rid of unthemed logout confirmation page
 */
function change_menu($items){
    foreach ( $items as $item ) {
        if ( 'Logout' === $item->title ) {
            $item->url = $item->url . "&_wpnonce=" . wp_create_nonce( 'log-out' ) . '&redirect_to=https://google.com';
        }
    }

    return $items;
}
add_filter( 'wp_nav_menu_objects', 'change_menu' );

The problem is that I continue to get the logout confirmation page which is not themed.

Any guidance would be greatly appreciated. Thank you

Answer 1

congrats, you got most of it right!

But I suggest you check out the wp_logout_url() function. That's the proper way to log out WP. This function returns the URL that allows the user to log out of your site. It will handle the nonce creation for you, so you don't need to worry about that.

Modifying your code to handle that is pretty easy, here's an example :

function change_menu($items){
    foreach($items as $item){
        if( $item->title == "Logout"){
            $redirect_url = 'https://google.com'; // your custom redirect URL
            $item->url = wp_logout_url($redirect_url);
        }
    }
    return $items;
}
add_filter('wp_nav_menu_objects', 'change_menu');

Here, the wp_logout_url($redirect_url) function will create a correct URL for logging out, and then redirecting to the $redirect_url which you specify. This should help avoid the logout confirmation page.