How build a custom login/register form with error handling?

Question

So, I'm working on a plugin in which I'm making a custom page containing a login form as well as one for user registration; I have the forms built and operational, below is my code.

<!-- Begin login form -->               
<form name="loginform" id="login_form" class="login_form" action="<?php echo esc_url( wp_login_url() ); ?>" method="post">

    <p>
        <input type="text" name="log" id="user_login" class="input" placeholder="Username" />
    </p>

    <p>
        <input type="password" name="pwd" id="user_pass" class="input" placeholder="Password" />
    </p>

    <button name="wp-submit" id="wp-submit" class="btn"><?php _e("Sign in", "shorti"); ?></button>

    <input type="hidden" name="redirect_to" value="<?php echo $_SERVER["REQUEST_URI"]; ?>" />

</form>
<!-- end login form -->

<!-- Begin registration form -->
<form method="post" id="register_form" class="wp-user-form" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>">

    <p><!-- Username -->
        <input type="text" name="user_login" id="user_login" class="input" placeholder="username" />
    </p>

    <p><!-- Email to send p/w to -->
        <input type="email" name="user_email" id="user_email" class="input" placeholder="email address" />
    </p>

    <p class="small-text">You will receive an email with a generated password<br />(which you can change in your "user settings")</p>

    <?php do_action('register_form'); ?>
    <button name="wp-submit" id="wp-submit" class="btn"><?php _e("Register!", "shorti"); ?></button>
    <?php $register = $_GET['register']; if($register == true) { echo '<p>Check your email for the password!</p>'; } ?>
    <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?register=true" />
    <input type="hidden" name="user-cookie" value="1" />

</form><!-- end registration-form -->

This works fine beside the fact that whenever there's an error message it redirects the user to wp-login.php. I'm needing the page with the form to handle all the errors with AJAX; so as to give a better user experience. What is the best way to go about doing this?

Answer 1

Look at the opening form element. The value for action determines where the form data is being posted to. By changing the value you can simply tell the form to redirect to itself rather than another page.

The codex offers an alternative approach on generating the mark-up for the necessary form:

http://codex.wordpress.org/Customizing_the_Login_Form#Make_a_Custom_Login_Page

Here's a much more in-depth tutorial:

http://digwp.com/2010/12/login-register-password-code/

You could always just use or fork an already existing popular Ajax based log-in plugin:

http://wordpress.org/plugins/login-with-ajax/

Answer 2

Here is what I do. Use login form to create login https://codex.wordpress.org/Function_Reference/wp_login_form

Below are the login logout redirects and login error handling. This will help you with login issue.

/** Login Redirect
 * Redirect user after successful login.
 *
 * @param string $redirect_to URL to redirect to.
 * @param string $request URL the user is coming from.
 * @param object $user Logged user's data.
 * @return string
 */
function my_login_redirect( $redirect_to, $request, $user ) {
    //is there a user to check?
    global $user;
    if ( isset( $user->roles ) && is_array( $user->roles ) ) {
        //check for admins
        if ( in_array( 'administrator', $user->roles ) ) {
            // redirect them to the default place
            return home_url('/wp-admin/');
        } else {
            return home_url();
        }
    } else {
        return $redirect_to;
    }
}

/*Login Error Handle*/
add_action( 'wp_login_failed', 'aa_login_failed' ); // hook failed login

function aa_login_failed( $user ) {
    // check what page the login attempt is coming from
    $referrer = $_SERVER['HTTP_REFERER'];

    // check that were not on the default login page
    if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') && $user!=null ) {
        // make sure we don't already have a failed login attempt
        if ( !strstr($referrer, '?login=failed' )) {
            // Redirect to the login page and append a querystring of login failed
            wp_redirect( $referrer . '?login=failed');
        } else {
            wp_redirect( $referrer );
        }

        exit;
    }
}

/*Login Empty Fields Error handling*/
add_action( 'authenticate', 'pu_blank_login');

function pu_blank_login( $user ){
    // check what page the login attempt is coming from
    $referrer = $_SERVER['HTTP_REFERER'];

    $error = false;

    if($_POST['log'] == '' || $_POST['pwd'] == '')
    {
        $error = true;
    }

    // check that were not on the default login page
    if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') && $error ) {

        // make sure we don't already have a failed login attempt
        if ( !strstr($referrer, '?login=failed') ) {
            // Redirect to the login page and append a querystring of login failed
            wp_redirect( $referrer . '?login=failed' );
        } else {
            wp_redirect( $referrer );
        }

    exit;

    }
}

/*Logout Redirect*/
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );

function go_home(){
  wp_redirect( home_url('/login/') );
  exit();
}
add_action('wp_logout','go_home');