In this article, I’ll show you how easily you can change the WordPress Login Page Logo with your own logo. And also you can customize the design layout of the login page by applying some sort of code.

By default, WordPress displays its own logo at the top of the login form with the URL. The code something look like this.

Change the Login Logo

To change the WordPress logo to your own, you will need to change the CSS styles associated with this heading:

<h1><a href="https://wordpress.org/">Powered by WordPress</a></h1>

WordPress uses CSS to display a background image — the WordPress logo — in the link (<a> ) inside the heading tag (<h1> ). You can use the login_enqueue_scripts  hook to insert CSS into the head of the login page so your logo loads instead.

To use the code below, replace the file named site-login-logo.png  with the file-name of your logo, and store your logo with your active Theme files in a directory named /images :

Just paste the below code to themes functions.php file.

function my_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(https://dummyimage.com/300x100/000/fff);
		height:100px;
		width:300px;
		background-size: 300px 100px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

The size of your logo should be no bigger than 80 x 80 pixels (though even this can change with custom CSS). Adjust the above padding-bottom value to the spacing you want between your logo and the login form.

The above code enqueue this script inside an admin area. So now you have changed WordPress default logo to own custom logo.

To change the link values so the logo links to your WordPress site, use the following WordPress hooks add_filter( ‘login_headerurl’, ‘my_login_logo_url’ ); edit it and paste it below the previous in the functions.php file.

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

The above WordPress hook changed the logo URL as well as the logo URL title with your site name and info.

If you want to customize more login page so that you can just enqueue new CSS File to the admin and apply more CSS so that this will not break any WordPress functions.

If you have a lot of login page styles, you may want to make your own custom login style sheet. This code, added to your functions.php file, would load a CSS file named style-login.css, stored with your active Theme files:

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/style-login.js' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

Here’s how you can completlty customize WordPress login page with you own styles.

If you want to know more about WordPress login page selectors visit codex.wordpress.org

Recommended reading:

1. 5 Most Reliable Digital Marketing Strategies For Small Business
2. 10 Easy-to-Use Tools To Improve SEO in WordPress
3. How to Create a Blog in WordPress (Step by Step)
4. Create A Custom Admin Menu With Admin Page WordPress
5. 7 WordPress Functions.php File Tips & Tricks
6. Almost A Million WordPress Sites Targeted In Extensive Attacks
7. Create a Custom Post Type in WordPress
8. WordPress .htaccess file Tips & Tricks