WordPress Frontend Login Failed Re-direct + Blank Username or Password

A lot of the sites I develop these days feature three site “areas”.  We have the traditional frontend of the site that a normal visitors sees, we have the traditional wp-admin dashboard area in which we manage and configure WordPress, and then we have a middle ground which is login protected and allows site visitors to manage their profiles while preventing access to the full wp-admin.

This middle ground is what allows sites like Dock Skipper, Two Way Resume, and Boatzo to function.  There’s also a lot of custom development that goes into this since it’s not naturally supported by WordPress.  Today, we’re going to look at a very important function for integrating a frontend WordPress login.  While the basics of a frontend login are very simple, we need to figure out a way to handle failed login attempts without sending the user to the standard wp-login.php page.  Let’s dive into the first function:

// Redirect After failed Login
add_action( 'wp_login_failed', 'front_end_login_fail' );
function front_end_login_fail( $username ) {

// Getting URL of the login page
$referrer = $_SERVER['HTTP_REFERER'];    
// 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' ) ) {
    if (!strstr($referrer,'?login=failed')) {
   		wp_redirect( $referrer . '?login=failed' );  // let's append some information (login=failed) to the URL for the theme to use
   	} else {
	   	wp_redirect( $referrer );  // let's append some information (login=failed) to the URL for the theme to use
   	}
   	exit;
}

}

This first function is pretty straight forward. On a failed login attempt, it’s going to redirect the user back to the referring pages URL and append ?login=failed onto the end. Just add that snippet to the functions.php file in your active theme and you’re all set. So is that it? Unfortunately no. What many people don’t realize is we need a second function to handle a failed login request where the user leaves either the username field or password field blank. So we have a second function that is to be placed in your themes function.php file:

/**
 * Function Name: check_username_password.
 * Description: This redirects to the custom login page if user name or password is empty with a modified url
**/
add_action( 'authenticate', 'check_username_password', 1, 3);
function check_username_password( $login, $username, $password ) {

// Getting URL of the login page
$referrer = $_SERVER['HTTP_REFERER'];

// 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' ) ) { 
    if( $username == "" || $password == "" ){
        if (!strstr($referrer,'?login=failed')) {
	   		wp_redirect( $referrer . '?login=failed' );  // let's append some information (login=failed) to the URL for the theme to use
	   	} else {
		   	wp_redirect( $referrer );  // let's append some information (login=failed) to the URL for the theme to use
	   	}
	   	exit;
	    }
	}
}

And there you have it. Two functions that allow us to always keep the user on the frontend of the site even with failed login attempts. Hope this helps someone else in need!