Recently, I came across a situation where my client wanted me to create a custom login form in WordPress. The HTML developer has created an eye-catching login form and handed it over to me. In this article, I show you how I used the 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 the 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 the front end.

Use of wp_login_form function

WordPress provides a method wp_login_form() which can use to create the front-end login form. We just need to pass parameters to the function and it will display the HTML form on the 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 the 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 the HTML id attribute ‘loginform’ to a generated login form. Same way, we can pass the id to username, and password as ‘id_username’ => ‘user_login’ and ‘id_password’ => ‘user_pass’ respectively. Below is the screenshot of a generated form.

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.