Daniel Auener

I’ve built quite a few custom login-forms in WordPress. There are, as always, a lot of ways to realize that, but nearly all the clients I worked with, had similar requirements: On the one hand they wanted to preserve the usual WordPress login-form to let administrators, editors and authors sign in to wp-admin. On the other hand they wanted another usergroup to sign in to their site via a fully customized WordPress login-screen, to download protected documents or whatever.

Customized WordPress login-form

Generally the problem is solved fairly easily, using the WordPress-API. You can print out a standard login-form by using wp_login_form wherever in your theme you want it. There is even a way to specify the page, the user should be redirected to after a successful login. Here is an example, redirecting you to the home page:

<?php
    wp_login_form( array(
        'redirect' => get_bloginfo('url'), 
        'form_id' => 'sign-in',
        'label_log_in' => __( 'Sign in' ),
    ) );
?>

If you need to adjust the HTML-output, you can build your own sign in form markup by saving a file named searchform.php in your theme folder. Then you are just a few stylesheet-rules away from your customized form, with working login.

Handling login-fails

The problems begin when you fail to log in, because writing in a wrong username and/or password doesn’t redirect you to your customized form, it redirects you to the wp-admin site. Since the signing-in user is not supposed to log in to wp-admin, this redirect doesn’t make any sense. But again we find a straightforward solution in the WordPress-API. Add these lines to your functions.php:

function custom_login_failed( $username ) {
    $referrer = $_SERVER['HTTP_REFERER'];

    if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
	
        // redirect to your login page, you might want to add a parameter login_failed
        // to show an error message or something like that
        wp_redirect( ... );
	exit;
    }
}
add_action( 'wp_login_failed', 'custom_login_failed' );

You might think that’s all, but not so fast …

Handling empty logins

There is yet another way to get redirected to the wp-admin login form, and that is when you just don’t enter anything. Submit the form with an empty username and password field and you are on wp-admin again. That is because the wp_authenticate function, which handles redirection, ignores empty_username and empty_password as error codes and that is why our wp_login_failed action never fires. The solution is to change these error codes, if the user logs in from another site than wp-admin or wp-login.php. This is done by the following filter function (note the filter priority, which is important here).

function custom_authenticate( $user, $username, $password ) {

    if ( is_wp_error( $user ) && isset( $_SERVER[ 'HTTP_REFERER' ] ) && !strpos( $_SERVER[ 'HTTP_REFERER' ], 'wp-admin' ) && !strpos( $_SERVER[ 'HTTP_REFERER' ], 'wp-login.php' ) ) {
    	$referrer = $_SERVER[ 'HTTP_REFERER' ];
    	foreach ( $user->errors as $key => $error ) {
    		if ( in_array( $key, array( 'empty_password', 'empty_username') ) ) {
    			unset( $user->errors[ $key ] );
    			$user->errors[ 'custom_'.$key ] = $error;
    		}
    	}
    }

    return $user;
}
add_filter('authenticate','custom_authenticate', 31, 3);

Other ways?

I know of one alternative to the above code: Since wp_authenticate is a pluggable function, you could simply overwrite it. But you can only do this with a plugin, so you have to add a plugin to your site and activate it, which I think is a bit more hassle.

Is there another way you know of? Please let me know in the comments.