Elementor: On failed logins on the login form, redirect back to the login page and add a failed message

Elementor is a wonderful plugin, but as with any software under continued development (and what isn’t?) it does have a few shortcomings. The login form widget is no exception. It’s beautiful and easy to customize. Adding a custom login form element is an easy way to make a custom frontend for your users. However, it does have one fatal flaw: when you try to log in and fail, it redirects users to the unprofessional-looking default WordPress login page. Ouch.

Don’t worry, there’s an easy way around this! Just add the following code to your functions.php file. This will redirect the user back to the login page. It will also add a “$_GET” parameter (added to the end of the login page URL) that will let the page know that the login has failed. $_GET[‘login’] will equal “failed”. That way, if this variable equals “failed”, we can display a message. Here’s a tutorial on how to use $_GET and $_POST variables. It’s actually extremely easy.

// Redirect the user back to the login page after the login failed, and add a $_GET parameter to let us know. Courtesy of WordPressFlow.com
add_action( 'wp_login_failed', 'elementor_form_login_fail', 9999999 );
function elementor_form_login_fail( $username ) {
    $referrer = $_SERVER['HTTP_REFERER'];  // where did the post submission come from?
    // if there's a valid referrer, and it's not the default log-in screen
    if ((!empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') )) {
        //redirect back to the referrer page, appending the login=failed parameter and removing any previous query strings
        //maybe could be smarter here and parse/rebuild the query strings from the referrer if they are important
        wp_redirect(preg_replace('/\?.*/', '', $referrer) . '/?login=failed' );
        exit;
    }
}

// This is also important. Make sure that the redirect still runs if the username and/or password are empty.
add_action( 'wp_authenticate', 'elementor_form_login_empty', 1, 2 );
function elementor_form_login_empty( $username, $pwd ) {
    $referrer = $_SERVER['HTTP_REFERER'];  // where did the post submission come from?
 if ( empty( $username ) || empty( $pwd ) ) {
    if ((!strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') )) {
        //redirect back to the referrer page, appending the login=failed parameter and removing any previous query strings
        //maybe could be smarter here and parse/rebuild the query strings from the referrer if they are important
        wp_redirect(preg_replace('/\?.*/', '', $referrer) . '/?login=failed' );
        exit;
    }
   exit();
 }
}

Next, add a shortcode widget above your form and add . We’ll build out that shortcode to display the message on login fail.

Once we’ve added that shortcode, we need to add more code to the Functions file. This code does a few things. First, it checks to see if $_GET[‘login’] equals “failed”. So basically, it’s checking to see if the user tried and failed to log in. If so, it displays a message. I’ve added the message in HTML with inline CSS (not considered best practice), since I simply want this widget to be portable. You can build out any HTML you want inside the “echo”!

function generate_login_fail_messaging(){
    ob_start();
    if($_GET['login'] == 'failed'){
    echo '<div class="message_login_fail" style="background-color: #ca5151;color: #ffffff;display: block;margin-bottom: 20px;text-align: center;padding: 9px 15px; width: fit-content;margin: 0 auto;"><span style="color: #ca5151;background-color: #fff;width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;font-weight: 900;border-radius: 50%;margin-right: 10px;">!</span>Oops! Looks like you have entered the wrong username or password. Please check your login details and try again.</div>';
    }
    $return_string = ob_get_contents();
    ob_end_clean();
    return $return_string;
}
add_shortcode('login_fail_messaging', 'generate_login_fail_messaging');

Hope this is helpful!

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn