By default WordPress login page displays WordPress logo which redirects to WordPress.org site but you can personalize it to fit your website branding fairly easily. This post will help you to achieve this.

First, I would like to mention that there are several WordPress plugins offering you to customize the login page. But every plugin you add to a WordPress site can cause the site to slow down since for each plugin WordPress has to find and read at least one extra file and check the site database for settings. So if a plugin is designed to perform relatively simple tasks and if you are comfortable with editing PHP there is no need to install additional plugin. Instead you can simply put the required code into your theme functions file.

So let’s customize WordPress login page. Open your active theme’s functions.php file and add the following bits of code. If your theme doesn’t contain a functions.php create a blank file in a text editor and save it with that name.

1. Change the login page logo

<?php
function change_login_css() {
  echo '<style type="text/css">
    h1 a { 
      background-image: url('.get_template_directory_uri().'/images/login-logo.png) !important; 
    }
  </style>';
}
add_action('login_head','change_login_css');
?>

Don’t forget to change the file name and path according to your needs.

2. Change the default logo URL

<?php
function change_login_url() {
  echo home_url();
}
add_filter('login_headerurl','change_login_url');
?>

By default logo redirects to WordPress.org site. The code above will change the URL to your own homepage.

3. Change the default logo title

<?php
function change_login_title() {
  echo get_option('blogname');
}
add_filter('login_headertitle','change_login_title');
?>

Default title attribute of the logo image is “Powered by WordPress”. The code above will change it to the name of your site specified in the Site Title field in General Settings panel.

Of course, you can do a lot more than that. For instance, let’s add few more CSS lines to the first function and change login page background, link colors, input fields borders, button, etc.

<?php
function change_login_css() {
  echo '<style type="text/css">
    h1 a { 
      background-image: url('.get_template_directory_uri().'/images/login-logo.png) !important; 
    }
    .login { 
      background: #e5e5e5;
      background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
      background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
      background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
      background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e5e5e5", endColorstr="#ffffff",GradientType=0 );
      background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%); 
    }
    .login #login a { 
      color: #333 !important; 
    }
    .login #login a:hover, .login #login a:focus { 
      color: #00aeef !important; 
    }
    #loginform label { 
      color: #333; 
    }
    #loginform input:focus { 
      border: 1px solid #00aeef; 
    }
    #loginform .button-primary { 
      background: #1b1b1d; border: 1px solid #111113; 
    }
    #loginform .button-primary:hover { 
      background: #00aeef; border: 1px solid #ccc; 
    }
  </style>';
}
add_action('login_head','change_login_css');
?>

And here is the final result:

All customizations are done in your theme files, so the changes will stay when you upgrade WordPress.

Hope you’ll find this post useful.