A simple guide to customizing the wordpress login form

In this tutorial I will share various techniques which can be used to customize the wordpress login form. We will make the customization without using a plugin

Here are the things which we will cover

Customize the logo on the login form
Customize the logo url
Customize the logo title
Customize the login form field labels
Customize the login button text
Customize the background color of login form
Customize the background image of the login page
Hide the remember me checkbox

Lets start.

Change the logo on the Login Form

Simply upload the custom logo image using the wordpress media library. Once you have uploaded the image, get the image url and copy it. Now paste this image url in the following snippet.

function spicewp_my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url('https://wplab-abhishekpathak.c9users.io/wp-content/uploads/2018/08/WP-logo-e1534250554344.png');
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'spicewp_my_login_logo' );

Pls note that you may use any url for the image. I am using the image upload to wordpress media library for the purpose of this tutorial. WordPress recommends the logo size to be 80×80

Change the Logo Image URL

By default, the logo links to the wordpress.org website. Use the following snippet to customize the logo url.

add_filter( 'login_headerurl', 'spicewp_loginlogo_url');
function spicewp_loginlogo_url($url) {
      return 'https://thewphosting.com';
}

We have made use of login_headerurl filter in the above snippet.

Change the Logo Title

Use the following snippet to customize the logo title

add_filter( 'login_headertitle', 'spicewp_loginlogo_title');
function spicewp_loginlogo_title() {
 
    return 'Your cutom title text here';
}

We have made use of the login_headertitle filter.

Customize the login form field labels

The default form field labels are “Username or Email Address” and “Password”. Use the following snippet to change the default labels.

add_filter(  'gettext',  'wpspice_register_text'  );

function wpspice_register_text( $translating ) {
	
	switch ( $translating ) {
		case 'Username or Email Address' :
			$translating = __( 'Your Custom user name field ', 'text_domain' );
			break;
		case 'Password' :
			$translating = __( 'Your Custom Password field', 'text_domain' );
			break;
	}
	return $translating;
	
}

Here we make use of the gettext filter.

Customize the Login button text

The gettext filter can be utilized to customize the text of the “Login” button and the “Get New Password” button. Here is the snippet

add_filter(  'gettext',  'wpspice_register_text'  );

function wpspice_register_text( $translating ) {
	
	switch ( $translating ) {
	
		
		case 'Log In' :
			$translating = __( 'Custom Login button', 'text_domain' );
			break;
		
		case 'Get New Password' :
			$translating = __( 'Custom Get New Password', 'text_domain' );
			break;
			
				
	}
	return $translating;
	
}

Customize the background color of the login form

Easily customize the background color of the login form with this snippet. You may also use a background image instead of the background color.

function my_login_form() { ?>
    <style type="text/css">
        body.login div#login form#loginform {
            background-color: #dbdbdb;
  //background-image: url("https://wplab-abhishekpathak.c9users.io/wp-content/uploads/2018/08/computer-2593921_1920-e1534486273328.jpg");
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_form' );

Here we are injecting custom css rules on the login page.

Add a background image to the login page

Add a background image to the login page with this snippet. It is exactly similar to the above snippet. The main difference is the css class which we are targeting. In the above snippet we targeted the login form, in this snippet we are targeting the login page.

function spicewp_login_page() { ?>
    <style type="text/css">
        body.login {
            //background-color: #dbdbdb;
  background-image: url("https://wplab-abhishekpathak.c9users.io/wp-content/uploads/2018/08/computer-2593921_1920-1.jpg");
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'spicewp_login_page' );

Hide the Remember me Checkbox

Here is the snippet to hide the “Remember Me” checkbox from the login form.

add_action('login_enqueue_scripts', 'spicewp_forget_me_not');
function spicewp_forget_me_not()
{
echo '<style type="text/css">.forgetmenot { display:none; }</style>';
}

The Final Result

This is how the login form looks now.

Conclusion

The default wordpress form is good enough for majority of the cases. However with basic knowledge of php and css , you can style the login form in any way you want.

I understand that not everyone is comfortable with coding. So in future posts I will be covering a few plugins which can be used to customize the login form without any coding.

We will be coming up with more practical tutorials. Till then happy website building 🙂