dots Created with Sketch.
Yogesh Chauhan's Blog

How to make a Custom Login Page in WordPress?

in WordPress on March 12, 2021

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

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
Column and Table Alias in PostgresPostgresKilling A Project Part 2: Who should make the decision to kill a project?MiscellaneousHow to scroll contents of a an element vertically using JavaScript?JavaScriptHow to check if a link has http or https in it in JavaScript?JavaScriptA Quick Comparison of JOIN and Subquery in SQLSQL/MySQLRevisiting variable scope in JavaScriptJavaScript