WP Trick: Tweak a WordPress Login Page

Today, I finally figured out a WordPress tweak that had been driving me nuts for a while:

How to modify the WordPress Login Page!

When WordPress is installed, it looks like this:

WordPress LoginIt’s functional, but it advertises for WordPress, displaying their logo and linking to their website. I love WordPress, but as a website developer, when I’m creating websites for clients, it doesn’t do me much good to advertise for WordPress. Naturally, I want to advertise myself. With a little bit of code that goes in the functions.php file (or a custom plugin), I can do that.

add_action('login_head', 'af_custom_login_logo');
function af_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.plugin_dir_url( __FILE__ ) .'/images/login-logo.png) !important;
background-size: 311px 100px !important;
height: 100px !important;
width: 311px !important;
margin-bottom: 10px !important;
padding-bottom: 0 !important; }
.login form { margin-top: 10px !important; }

Basically what this is doing is targeting the “login_head” filter and swapping the WordPress logo for my logo (“login-logo.png”) and sets the height, width and some margin/padding around it.

From there, I needed to change the URL of the WordPress login logo to my own:
function af_url_login_logo(){
return 'https://andrewdforbes.com';
add_filter('login_headerurl', 'af_url_login_logo');

This tells it when you click on the logo, it will go to andrewdforbes.com.

Lastly, I needed to change login logo hover text away from “Powered by WordPress”:
function af_login_logo_url_title() {
return 'Developed by Andrew D. Forbes';

That’s it! Now it looks like this:

WordPress New Login