How to Customize the WordPress Login Screen

customising-wp

By default, every WordPress site looks the same.

For a variety of reasons, people want to customize the WordPress sites with their own logo or styles.

In this tutorial we’re going to show you an example of how to customize WordPress the right way. We’re going give you an introduction to using functions and CSS to style your site in a way that’s safe from any updates.

The WordPress login screen

One of the components of WordPress that might be used frequently is the login page. This is a simple page containing only the login 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.

login-screen-default.png

1. Customizing without core hacks

How do we customize the WordPress login page? Not by hacking the core files, but by styling it through CSS.

WordPress offers us hooks (functions) that allow us to hook into WordPress and call specific functions during WordPress page cycle. There are 2 types of hooks,Actions and Filters.

  • Actions are hooks that WordPress core launches at specific points during the page cycle during which we can add our own functionalities.
  • Filters are similar to Actions, in that they occur during the certain points of a page loading. However they are used to intercept, manage and return data before a page is rendered of before data is saved in the database.

To be able to do customization on the login screen, we require 3 specific hooks:

  1. “login_head” to add our CSS in the head of the login page.
  2. “login_headerurl” to change the URL of the Login Logo
  3. “login_headertitle” to change the title of the logo link.

Below is an example of how we can create a new function to print our custom CSS and call the function within the login_head hook. This loads our CSS in the HEAD of the login page. We will learn in detail about this as we go further in this article.

As with all of the code in this article, add it to your theme’s functions.php file.

if ( !function_exists( 'our_custom_login_page_style' ) ) { function our_custom_login_page_style() { //echo 'CSS CODE…'; } } add_action('login_head', 'our_custom_login_page_style');

2. The structure of the login screen

Before going further, lets understand the HTML 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.

login-page-construction.png

3. Changing the Default WordPress logo

To 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.

function new_custom_login_logo() { echo ''; }

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.

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()”

login-screen-withlogo.png

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:

function new_wp_login_url() { return home_url(); } 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:

function new_wp_login_title() { return get_option('blogname'); } add_filter('login_headertitle', 'new_wp_login_title');

5. Custom form styling

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

function new_custom_login_page_style() { echo ''; } add_action('login_head', 'new_custom_login_page_style');

Here’s our end result:

login-screen-final.png

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.

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
9 Comments
Oldest
Newest
Inline Feedbacks
View all comments
3cstudio
10 years ago

Great tip! You can also simply add the plugin: Uber Login Logo – [url=http://wordpress.org/extend/plugins/uber-login-logo/]http://wordpress.org/extend…[/url] if you don’t need all the fields & related styles changed. 🙂

grote snor
grote snor
10 years ago

Why line break tags (br) within the PHP, that’s not going to work as it’s not valid, is this something going on with the code citation that’s adding those automatically? Anyway good tips, just remember to remove those line breaks anybody who is not sure why they get a parse error.

steve
steve
10 years ago
Reply to  grote snor

Sorry grote, looks like some of our code was corrupted. Hopefully its fixed now.

VinC
VinC
10 years ago

Thanks for the tutorial!
However, the second piece of the code in the tutorial throws a Parse error. It’s in this line:
h1 a { background-image: url(‘/.get_template_directory_uri(‘).’/foodolo_logo_wp-login.png) !important; height:130px !important; background-size: auto auto !important; }
Parse error: syntax error, unexpected ‘.’ on line 3

5ngua
5ngua
10 years ago

great article, how can I make a plugin for this instruction? When update wordpress all those modifications will lost, so I want to make a plugin for that. There are many custom login plugins, but I still want to create a simple one myself. Thanks!

Anikesh
Anikesh
10 years ago

Thanks so much buddy great job keep it up

Collins Agbonghama
Collins Agbonghama
7 years ago

Great article. We’ve had success using ProfilePress ([url=https://profilepress.net]https://profilepress.net[/url]) a plugin for building front-end login form form. The plugin does a step further to redirect the default WordPress login to page containing the front-end login form.

PowerSalesKC
PowerSalesKC
4 years ago

Anyone reading this as of WordPress version 5.2, login_headertitle is now deprecated – Link: [url=https://developer.wordpress.org/reference/hooks/login_headertitle/]https://developer.wordpress.org/reference/hooks/login_headertitle/[/url]

You are now required to use login_headertext instead – Link: [url=https://developer.wordpress.org/reference/hooks/login_headertext/]https://developer.wordpress.org/reference/hooks/login_headertext/[/url]

nyampah
nyampah
4 years ago

Hello, great article for almost 7 years
but i’m using style tag instead of  echo ‘ to make it work on my site 

9
0
Would love your thoughts, please comment.x
()
x