Custom Logo in wp-login Page

After setting your new WordPress site, i believe you should definitely change the default WP logo in the wp-login page and use your custom logo instead. So in this post i will show you how you can change it using a simple hook.

Of course you can add your custom css and change the default WP logo but there is also this nice hook which alters the background image via css and can be put in your Child Theme’s function.php file.

Whether you decide to change the stylesheet or add the hook below to use your custom logo, you should use a Child Theme. The Child Theme is useful not only for this hook but also for every single one modification you want to add to your theme. The reason for that is pretty simple. When you use a Child Theme to change stuff etc all these modifications remain intact when you update your parent theme.

My Custom logo – The hook

 

function gt_change_login_logo() { ?>

<style type="text/css">

body.login div#login h1 a {

background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/netpad_logo.jpg);

background-size: 253px 66px;

width: 253px;

height: 66px;
}

</style>

<?php }

}

add_action( 'login_enqueue_scripts', 'gt_change_login_logo' );

I believe the hook is pretty straight forward. It sets a background image named netpad_logo.jpg for the specified link. The image is located inside the folder images within your Child Theme’s directory.

You can use any format and name for the image as long as you remember to change the value inside the hook as well. Also, you can add a folder named images inside your Child Theme folder and upload your custom logo there.

You might have to test the width and height values for your custom logo to fit in, which in my case it is 253×66 pixels.

Finally, the background-size property sets the size of the background image used above.