How to change the logo on the login page in WordPress

In this article, I’ll show you how you can replace the standard WordPress logo on the login screen with your own using code.

So, you’re trying to login to the site through the wp-login.php page. On the screen you see the standard WordPress logo:

You don’t need it, you want your logo to be displayed instead. And the link should lead to your site, not to the WordPress site. To fix this, you will need to add the following code to the functions.php file:

<?php
/* That's what we put in - The Beginning */
function editLoginPage() { ?>
	<style type="text/css">
		#login h1 a {
			background-image: url(https://webgolovolomki.com/wp-content/themes/golovolomka/img/icons/help.svg);
			display: block;
			width: 272px;
			height: 92px;
			background-size: auto;
		}
	</style>
<?php }

add_action('login_enqueue_scripts', 'editLoginPage');
function editLoginPageTitle() {
	return 'Web Golovolomki';
}
add_action('login_headertext', 'editLoginPageTitle');

function editLoginPageTitleUrl() {
	return 'https://webgolovolomki.com';
}
add_action('login_headerurl', 'editLoginPageTitleUrl');
/* That's what we put in - The End */
?>

Now our login page will look like this:

Let’s now analyze in detail what we did.

We spelled out three functions: the first function (editLoginPage) adds the styles we want to the wp-login page. By default, the WordPress logo is prescribed in the styles, and we rewrite that by adding our own styles.

You just need to change the value in the background-image property. Insert a link to your logo there. Also substitute the right values in height and width, depending on the size of your logo.

Next, the editLoginPageTitle function changes the content inside the link. You don’t have to add it, because the content is hidden under the logo.

To make it clearer, open the inspector:

Notice the div with the login id and everything inside it. Now you have a better understanding of how the logo is displayed on the login page 🙂

And the last, third function editLoginPageTitleUrl returns the address of the site we want the user to go to when he clicks on the logo. Insert your value.

After that we add our functions to certain events (actions).

I’ve added a video at the end of the article. I tried to explain in detail how to change the logo on the login page in WordPress.

If you still have questions or something does not work – write in the comments.