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.

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. 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. To be able to do customization on the login screen, we require 3 specific hooks: “login_head” to add our CSS in the head of the login page. “login_headerurl” to change the URL of the Login Logo “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.

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

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:

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.