How to change the logo on the login page in WordPress

🗓️ Updated: 12.08.2022
💬Comments: 0
👁️Views: 870

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:

How to change the logo on the login page in WordPress

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.

Was the article helpful?
👍
Yes - 2
👎
Not - 0
💬Comments:

CSS Головоломки в Telegram
Subscribe and don't miss:
Actual news
Interesting puzzles
Useful links
Our rating
🏆The best website hosting
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
How to make a burger menu – complete code and detailed explanation
Views: 18275
Appearance of elements on scrolling
Views: 16835
How to center an image with CSS
Views: 6945
How to make a smooth zoom of the image on hover – effect on pure CSS
Views: 6785
How to make a button click effect in CSS
Views: 6207
Check of knowledge
🤔How well do you know CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Color of 2022
The Pantone Color Institute has announced the color of the year 2022. It's a shade of lilac lilac shade called 17-3938 Very Peri.
#6667ab