How to make a Custom Login Page in WordPress?

We saw how to customize WordPress login page logo and change it to your own logo with your own style.

We can create a separate login page as well if we have multiple users – for backend and frontend. Let’s see how to do that.

We can create custom login page by using the wp_login_form function.

We can use the function on any page of our Theme’s Page Templates.

To add the basic WordPress login form on any page just add this code:

<?php wp_login_form(); ?>

The wp_login_form function has few parameters that we can use to modify the form as per our needs.

We can define the IDs in the form and style the form elements using CSS, we can remove the “Remember Me” checkbox or change it’s texts. We can also redirect the user after successful login using the same function.

Most of the time all we need it this following form.

Use this code to modify the wp_login_form.

<?php
if ( ! is_user_logged_in() ) { // Display WordPress login form:
    $args = array(
        'redirect' => admin_url(), 
        'form_id' => 'loginform-custom',
        'label_username' => __( 'Username custom text' ),
        'label_password' => __( 'Password custom text' ),
        'label_remember' => __( 'Remember Me custom text' ),
        'label_log_in' => __( 'Log In custom text' ),
        'remember' => true
    );
    wp_login_form( $args );
} else { // If logged in:
    wp_loginout( home_url() ); // Display "Log Out" link.
    echo " | ";
    wp_register('', ''); // Display "Site Admin" link.
}
?>

The code above will do following things:

• It will redirect the user to the Admin Dashboard after successful login.
• It will change the form ID to “loginform-custom”
• Change the labels for username, password, remember me and login button.
• Check the remember checkbox by default.

👉 If the user is already logged in then the above code will just show 2 links. Log Out and Site Admin links.

If you want to print some texts on top, middle or bottom of the form vertically then use these filters with the function: login_form_top, login_form_middle, and login_form_bottom.

How to style custom login form in theme?

When we add custom login using our theme template, it doesn’t take the same look and feel form the default WordPress login form. It will look very basic HTML form. But we can target the form and change the look and feel of it using t=out theme stylesheet.

List of parameters we can use with the wp_login_form function

echo(boolean)

• This will tell the form whether to display the login form or just return the HTML code of form.
• It’s a boolean parameter so we can either pass true or false
• The default value is true

redirect(string)

• This will tell the form where to redirect the user after a successful login.
• You must pass an absolute value. For e.g. https://yogeshchauhan.com/category/wordpress/
• The default value is the same page as the login form. Basically, no redirect.

form_id(string)

• We can change form’s HTML attribute ID using this.
• The default ID is “loginform”

label_username(string)

• Change the label for the username or email address field using this parameter.
• The default value is ‘Username or Email Address’

label_password(string)

• Change the label for the password field using this parameter.
• The default value is ‘Password’

label_remember(string)

• Change the label for the “Remember Me” field using this parameter.
• The default value is ‘Remember Me’

label_log_in(string)

• Change the label for the “Log In” field (submit button) using this parameter.
• The default value is ‘Log In’

id_username(string)

• We can change the value of HTML ID attribute for the username field using this parameter.
• The default value is ‘user_login’

id_password(string)

• We can change the value of HTML ID attribute for the password field using this parameter.
• The default value is ‘user_pass’

id_remember(string)

• We can change the value of HTML ID attribute for the remember field using this parameter.
• The default value is ‘rememberme’

id_submit(string)

• We can change the value of HTML ID attribute for the Submit button using this parameter.
• The default value is ‘wp-submit’

remember(boolean)

• Using this parameter, we can specify whether to display the “Remember Me” checkbox or not.

value_username(string)

• If passed, this parameter will be the default value for the username field.

value_remember(boolean)

• We can specify whether the Remember Me checkbox should be checked or not by default using this parameter.
• By default, the value is false.

The return value is void if ‘echo’ argument is true but it returns an HTML login form if the ‘echo’ parameter is false.

Look at the source code of the file here.

Source: wp_login_forn function on WordPress

Share this post