Login Page Branding

/**
 * Display custom logo on the login page.
 *
 * @return  css
 */
function wpsnippit_custom_login_logo() {
echo '<style type="text/css"> 
      h1 a { 
        background-image:url('.get_bloginfo('template_directory').'/login/logo.png) !important; 
      }     
      </style>';  
}
add_action('login_head', 'wpsnippit_custom_login_logo');

The easiest way to make changes to the WordPress login page is to add some code directly to your active theme (child theme preferably). Most of this code will live in the functions.php file. This is a required file, so any code used here will work in any theme. I would recommend making these changes in a testing environment first before moving it to your live site. The first thing to do is open your theme’s directory and create a new folder in the root called login. We will place the new login logo inside this folder. Next, open up the functions.php theme file in the editor of your choice. This file contains extra hooks, functions and filters necessary for your theme to work. It is where scripts and styles are added to a theme, customization options are defined, and extra back-end functionality is bundled in. We will be adding all of our code to the bottom of this file. Any edits made to this file will only take effect to the theme it belongs to. If you choose to activate another theme later on, you will have to migrate this code to the new theme’s functions.php file.

One of the simplest changes you can make to the login screen is to swap out the default WordPress logo at the top of the form for your own, so that it fits in with the overall look of your site.
The first thing to do is save your logo image in the login folder you created. The default size for this image is 80 pixels x 80 pixels. Your image doesn’t have to be exactly that size, but make sure it is square so that it fits the dimensions. I would also recommend saving a transparent PNG file, so the image works on any background.
Simply save your logo image as logo.png to the login directory you created. Then, at the bottom of your functions.php file, add this code.

We are using the login_head WordPress action to append a small bit of CSS to the section of the login screen’s HTML. From there, we are changing the background image of the h1 tag to our own custom logo. Make sure to include the “!important” flag in your CSS so that the default logo image is overwritten.

«