Custom WordPress Login Url, Url Title, and Logo

The default WordPress login page has a WordPress logo above the login form. That logo has a link to WordPress, and the link has a title of “Powered by WordPress”. Here’s how to change all that. This is the easiest way to make it look like a custom login page for your clients, without actually creating a custom login page.

Step 1 – Change the WordPress Login Logo

Choose to use an image logo or a text-based logo on the WordPress login page. If you don’t have an image logo yet, you can simply use your site name or any name as your text-based logo.

To use an image logo:

First, create your own custom logo file. The size should be a maximum size of 326px by 67px. Name the file site-admin-logo.png, or whatever. You can place the file directly in your custom plugin’s folder. Or, you can upload the image through your WordPress dashboard’s Media page, and then copy the URL of the image so that you can paste it into this code snippet.

Then add this code to your custom plugin:

PHP

// CUSTOM LOGIN LOGO PICTURE
function myown_login_logo() {
	echo '<style nonce="">#login h1 a {
		background: url(' . plugin_dir_url(__FILE__) . 'site-admin-logo.png) 50% 50% no-repeat !important;
		width: 326px;height: 67px;}</style>';
}
add_action('login_head', 'myown_login_logo');

If you uploaded the image through your WordPress dashboard’s Media page, then in the above code, you must change line 4 to replace this part:

url(' . plugin_dir_url(__FILE__) . 'site-admin-logo.png)

…with the url of your image, to something like this:

url(https://yoursite.com/wp-content/uploads/site-admin-logo.png)

In addition, the image can be named anything you want, as long as you edit the above line to match the image filename.

Go see how nice that looks.

To use instead a text-based logo:

Create a file called login.js

You can do this in any text editor. In the new blank file, paste this:

JavaScript

let h1 = document.getElementsByTagName("h1")[0];
let firstChild = h1.firstChild;
firstChild.textContent = 'My Cool Site Name';
firstChild.style.backgroundImage="unset";
firstChild.style.textIndent = "unset";
firstChild.style.height = "auto";
firstChild.style.width = "100%";

On line 3 of the above code, change My Cool Site Name to the text that you want to display above the WordPress login form. Then save the file, and place the file in your custom plugin’s folder.

Then, add this PHP code to your custom plugin:

PHP

// CUSTOM LOGIN LOGO - TEXT-BASED

add_action('login_enqueue_scripts', function($page) {
	wp_enqueue_script( 'customlogin', plugin_dir_url(__FILE__). 'login.js', null, null, true );
} );

Go see how nice that looks.

Step 2 – Change Where The Login Logo Links To

Whether you used an image logo or a text-based logo above, here is the way to make it link to your own site instead of linking to WordPress.org.

Use this function to make the logo that appears above the login form on the WordPress admin login page point to your own site. Add this PHP code to your custom plugin:

PHP

add_filter('login_headerurl', function() {
	return home_url();
});