Create a New Frontend Login Form in Wordpress

Create a New Frontend Login Form in WordPress

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.

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me