Create a New Frontend Login Form in WordPress

Date Posted: April 28, 2014, 10:58 am


custom-login-form

Say you are developing a website that involves log-in form for users and your client doesn’t want the log-in form to be on a separate page or in www.yourwebsite.com/wp-login . In this tutorial you are going to learn how to create a custom log-in form and have it display on the front-end. Also we are going to create a post request handler and our own validations for user inputs.

First step is to create a page for our log-in form, the page should be a custom page and not a page template.

Here is the log-in form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="<?php the_permalink(); ?>" method="post" class="sign-in">
    <p>
        <label for="user-name"><?php _e('Username'); ?></label><br />
        <input type="text" name="user-name" id="user-name" value="<?php echo wp_specialchars( $_POST['user-name'], 1 ); ?>" />
    </p>
    <p>
        <label for="password"><?php _e('Password'); ?></label><br />
        <input type="password" name="password" id="password" />
    </p>
    <p>
        <input type="submit" name="submit" value="<?php _e('Log in'); ?>" id = "yellow-button" />
        <input type="hidden" name="action" value="log-in" />
    </p>   
</form>

And this is the Post request handler:

(Note that this handler should be placed before your get_header() function)

1
2
3
4
5
6
7
8
9
10
11
if ( $_POST['action'] == 'log-in' ) {
   
    # Submit the user login inputs
    $login = wp_login( $_POST['user-name'], $_POST['password'] );
    $login = wp_signon( array( 'user_login' => $_POST['user-name'], 'user_password' => $_POST['password'], 'remember' => $_POST['remember-me'] ), false );
       
    # Redirect to account page after successful login.
    if ( $login->ID ) {
        wp_redirect( home_url('account') );      
    }  
}

Here is the full code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
/**
 * User Login Page
 * Author : Carl Victor Fontanos.
 *
 */


# Send the user to his account or any page if already logged in.
if ( is_user_logged_in() ) {
    wp_redirect( home_url('/account/') );
}

# Get login error messages.
$login_errors = (isset($_GET['user-login']) ) ? $_GET['user-login'] : 0;     
   
if ( $_POST['action'] == 'log-in' ) {
   
    # Submit the user login inputs
    $login = wp_login( $_POST['user-name'], $_POST['password'] );
    $login = wp_signon( array( 'user_login' => $_POST['user-name'], 'user_password' => $_POST['password'], 'remember' => $_POST['remember-me'] ), false );
       
    # Redirect to account page after successful login.
    if ( $login->ID ) {
        wp_redirect( home_url('account') );      
    }  
}
     
get_header();
   
?>

<div id="content" role="main" class = "user-login" >   
    <h2 class="page-title"><?php the_title(); ?></h2>
    <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

    <?php
        # Output header error messages.
        if ( $login_errors === "failed" ) {  
            echo '<p class="input-error">Invalid username and / or password.</p>';  
        } elseif ( $login_errors === "empty" ) {  
            echo '<p class="input-error">Username and/or Password is empty.</p>';  
        } elseif ( $login_errors === "false" ) {  
            echo '<p class="input-error">You are now logged out.</p>';  
        }
    ?>
       
<form action="<?php the_permalink(); ?>" method="post" class="sign-in">
    <p>
        <label for="user-name"><?php _e('Username'); ?></label><br />
        <input type="text" name="user-name" id="user-name" value="<?php echo wp_specialchars( $_POST['user-name'], 1 ); ?>" />
    </p>
    <p>
        <label for="password"><?php _e('Password'); ?></label><br />
        <input type="password" name="password" id="password" />
    </p>
    <p>
        <input type="submit" name="submit" value="<?php _e('Log in'); ?>" id = "yellow-button" />
        <input type="hidden" name="action" value="log-in" />
    </p>   
</form>
   
    <?php endwhile; ?>
   
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Then add these codes to your functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function redirect_login_page() {

    $login_page  = home_url( '/user-login/' );  
    $page_viewed = basename($_SERVER['REQUEST_URI']);  
 
    if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {  
        wp_redirect($login_page);  
        exit;  
    }  
}  
add_action('init','redirect_login_page');

function login_failed() {

    $login_page  = home_url( '/user-login/' );  
    wp_redirect( $login_page . '?user-login=failed' );  
    exit;  
}  
add_action( 'wp_login_failed', 'login_failed' );  
 
function verify_username_password( $user, $username, $password ) {  

    $login_page  = home_url( '/user-login/' );  
    if( $username == "" || $password == "" ) {  
        wp_redirect( $login_page . "?user-login=empty" );  
        exit;  
    }  
}  
add_filter( 'authenticate', 'verify_username_password', 1, 3);  

function logout_page() {

    $login_page  = home_url( '/user-login/' );  
    wp_redirect( $login_page . "?user-login=false" );  
    exit;  
}  
add_action('wp_logout','logout_page');

Make sure to change the “user-login” to the page where your log-in form is located.

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me