How To Customize Wordpress Login Screeen Easily

Components of WordPress that might be used frequently is the log in page. This is a simple page containing only the log in form and few links to recover password and go back to the main website. By default this page contains WordPress logo and title. To change the logo or to style this page you defnitely can hack into the core files, however this is not recommended. The drawback of modifying the core files is that when you update WordPress, you would lose all your customization.Thanks to the way WordPress works, you do not have to hack the core. You can use WordPress functions to add your own logo and modify the styling of the page without being impacted by core updates. So without further ado, lets show you the right way to customize your WordPress login screen.

                                             

STRUCTURE OF THE LOGIN SCREEN:

As we would be doing the customization through CSS only, its important to know the ID’s and classes used in the page.The classes for the Login Screen’s BODY element are login, login-action-login & wp-core-u By targeting the login class, you would be able to set custom background for the entire page or change color, etc. Understanding of the structure of this page and how the HTML elements are stacked below each other is important before you can add your own CSS rules.

Please see the image below to understand the structure in detail.

         

CHANGING THE DEFAULT WORDPRESS LOGO:

change the logo on the Login Page, we're going to create a new function called “new_custom_login_logo”. This function simply prints the CSS code.

Adding the code below to your themes functions.php file will add the CSS code in the head of the login page.

Make sure to add your logo inside the themes folder and change “logo_admin_login.png” with the logo file name. For better control using a png file with transparent background is recommended.

1.function new_custom_login_logo() {

2.echo '<style type="text/css">

3.h1 a { background-image: url('/.get_template_directory_uri(').'/logo_admin_login.png) !important; height:130px !important; background-size: auto auto !important; }

4.</style>';

5.}

Once we have created the above function we have to “hook” or register it with WordPress. To do this we call “add_action” where “login_head” is the name of the hook that tells Wordpress the event our function is associated with.

1.add_action('login_head', 'new_custom_login_logo');

NOTE: “get_template_directory_uri()” will return the template directory path. However if you are using this from a child theme you could replace it by “get_stylesheet_directory_uri()”

4. Changing the logo link & title

Now if you visit the login page, you should be able to see the new logo. However if you hover your mouse on it the title that appears is “Powered by WordPress” and when clicked will take you towww.wordpress.org. To change this behavior we call 2 specific WordPress filters “login_headurl” and “login_headtitle”. As the name suggests they are responsible to adding the URL and Title to the Login Page Logo. Add below code to your functions.php file and then refresh your login page.
Changing the link to the URL of your website:

1.function new_wp_login_url() {

2.return home_url();

3.}

4.add_filter('login_headerurl', 'new_wp_login_url');

Changing the title of the link with default blog name that can be sent from the Settings Page:

1.function new_wp_login_title() {

2.return get_option('blogname');

3.}

4.add_filter('login_headertitle', 'new_wp_login_title');

5. Custom form styling

Finally, let's add some basic color changes to the form:

01.function new_custom_login_page_style() {

02.echo '

03. 

04.<style type="text/css">

05.body.login  { background-color: #FFF; }

06.#loginform  { background-color: #194272; }

07.#loginform label {color: #FFF ;}

08.</style>

09.';

10.}

11.add_action('login_head', 'new_custom_login_page_style');

Here's our end result:

What we have done is just done some basic styling. You can add your own CSS based to target different HTML elements and further customize the login page to match your theme or company branding.