How To Create Custom Login Form In WordPress

Recently, I came across a situation where my client wanted me to create a custom login form in WordPress. HTML developer has created an eye-catching login form and handed over to me. In this article, I show you how I used exact login form design and created a custom login form in WordPress.

Why Need Custom Login Form In WordPress

WordPress provided a built-in form for login to your dashboard. This form is available at back-end only with the default design. We can’t show this default form on the front end side as this design does not match with front-end.

WordPress Login Form

Use of wp_login_form function

WordPress provides a method wp_login_form() which can use to create front end login form. We just need to pass parameters to the function and it will display HTML form on site. Just call this function wherever you want to place a login form.

<?php
if ( ! is_user_logged_in() ) {
	$args = array(
		'echo'           => true,
		'remember'       => true,
		'redirect'       => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
		'form_id'        => 'loginform',
		'id_username'    => 'user_login',
		'id_password'    => 'user_pass',
		'id_remember'    => 'rememberme',
		'id_submit'      => 'wp-submit',
		'label_username' => __( 'Username' ),
		'label_password' => __( 'Password' ),
		'label_remember' => __( 'Remember Me' ),
		'label_log_in'   => __( 'Log In' ),
		'value_username' => '',
		'value_remember' => false
	);

	wp_login_form( $args );
}
?>

We have used the method is_user_logged_in() to check if user is already logged in. Our login form will display only for non-logged in users. As shown in $args array, ‘form_id’ => ‘loginform’ will add HTML id attribute ‘loginform’ to a generated login form. Same way, we can pass id to username, password as ‘id_username’ => ‘user_login’ and ‘id_password’ => ‘user_pass’ respectively. Below is the screen-shot a generated form.

Custom Login Form In WordPress

Once your login form is generated, you can adjust the CSS by using the id of a form, username fields etc. At this stage, I have applied CSS to this form as per provided by HTML developer. I am not going to show a final form design. The scope of this tutorial is just to show how one can achieve the same result.

I hope you understand how to create a custom login form in WordPress. For any questions or suggestions, please leave a comment below.

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

Leave a Reply

Your email address will not be published.