How to Setup Elementor Login Form with iThemes Hide Backend Feature

Introduction

In this article, we share how we setup an Elementor login form with custom code snippets to redirect a user back to the login form if there are errors during the submission of the login form.

After our search for a decent login form hit a dead end, with most form plugin authors wanting to charge an arm and a leg just for access to a login form, we ran into this video by WPTuts. While the code from this video works well with the default WordPress admin and login URLs, it hit a redirect loop when used in conjunction with the iThemes’s Hide Backend feature.

In this article, we share the full code for setting up a custom failed login error message for an Elementor Login Form, with further customisations of the php code snippets for it to work with the iThemes’s ‘Hide Backend’ feature.

First Up

Set up the login form, design and customise it to your heart’s content.

Redirect on Failed Login Code Snippet

Next, we add the following code to a new snippet using the Code Snippets plugin. The code below has been further customised to prevent a redirect loop so it works with the iThemes’s Hide Backend login slug. (Note: insert your iThemes ‘Hide Backend’ login slug to the relevant lines below.)

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
wp_redirect(preg_replace('/\?.*/', '', $referrer) . '?login=failed' );
exit;
} elseif ((!empty($referrer) && strstr($referrer,'wp-login') )) {
wp_redirect(preg_replace('/\?.*/', '', $referrer) );
exit;
} elseif ((!empty($referrer) && strstr($referrer,'wp-admin') )) {
wp_redirect(preg_replace('/\?.*/', '', $referrer) );
exit;
//update "yourbackendloginslug" with the login slug from your iThemes settings
} elseif ((!empty($referrer) && strstr($referrer,'yourbackendloginslug') )) {
wp_redirect(preg_replace('/\?.*/', '', $referrer) );
exit;
}

//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
wp_redirect(preg_replace('/\?.*/', '', $referrer) . '?login=failed' );
exit;
} elseif ((!empty($referrer) && strstr($referrer,'wp-login') )) {
wp_redirect(preg_replace('/\?.*/', '', $referrer) );
exit;
} elseif ((!empty($referrer) && strstr($referrer,'wp-admin') )) {
wp_redirect(preg_replace('/\?.*/', '', $referrer) );
exit;
//update "yourbackendloginslug" with the login slug from your iThemes settings
} elseif ((!empty($referrer) && strstr($referrer,'yourbackendloginslug') )) {
wp_redirect(preg_replace('/\?.*/', '', $referrer) );
exit;
exit();
}
}}}

Failed Login Error Message Code Snippet

Next, we add the following code to a new code snippet. This code generates the failed login error message and can be customised to suit your needs.

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: 90%;margin: 0 auto;border-radius: 5px;margin-top: 0px;margin-bottom: 20px;font-size: 12px;"><b>Looks like you have entered the wrong email address or password. Please check your login details and try again.</b> <br>If you reset your password but are still unable to log in, clear your browsers cache and try again. If the problem persists, please <a href="/contact/" style = "color: #fff"><u>contact us</u></a> and quote your login username or email address.</div>';
}
$return_string = ob_get_contents();
ob_end_clean();
return $return_string;
}
add_shortcode('login_fail_messaging','generate_login_fail_messaging');

Test Setup

Finally, we test the Elementor login form to ensure it is working as it should.

*The code snippets contained in this article was tested at the time of writing.

Because copying text is disabled on our website, if you would like this code sent your email, submit the form below. You will be added to our mailing list which you can unsubscribe from at any time.