WordPress comes with a login page that consists of a logo, login form, forget password link and back to website link. The WordPress login page is branded with the WordPress logo, which links to WordPress.org and the title attributes states “Powered by WordPress.”You may want to change this because the WordPress installation is used as a members’ site or you just want to. So, let me show you how-to change the WordPress login logo: the image, the link and the title attribute.

Logo Image

The WordPress login page logo is controlled with CSS, particularly the .login h1 a class. So, we need to create a function to add custom CSS to override that class. Use the following WordPress function to do just that:

// Custom WordPress Login Logo by Brandon Himpfen 
// Website: http://himpfen.com 
function custom_login_logo() { echo '<style type="text/css"> .login h1 a { background-image:url('. get_bloginfo( 'template_directory' ) .'/images/logo.png) !important; background-size:304px 50px; width: 304px; height:50px; overflow:visible; } </style>'; } 
add_action('login_head', 'custom_login_logo');

Customize the Function

To customize the CSS override we’ve created, you will need to edit line five (5), which looks like this:

.login h1 a { background-image:url('. get_bloginfo( 'template_directory' ) .'/images/logo.png) !important; background-size:304px 50px; width: 304px; height:50px; overflow:visible; }

I made the function output an image link to logo.png file, in the images directory, of the theme directory. So, the image link would look like this:

http://yourdomain.com/wp-content/themes/theme-name/images/logo.png

You can change the image name, file type or link to whatever you want. You do not need to use the theme directory like I’ve shown you; you could use a link to where ever you want.

You will probably also need to modify, background-size:304px 50px; width: 304px; height:50px;, of line five (5) with the image width and height.

By default, WordPress displays the logo as 80px by 80px, so that is why you would need to change the background image size.

Logo URL

As I stated previously, the logo links to WordPress.org, to change that, add the following to your theme’s functions.php file:

// Custom WordPress Login Logo by Brandon Himpfen 
// Website: http://himpfen.com 
function custom_logo_url() { return get_bloginfo( 'url' ); } 
add_filter( 'login_headerurl', 'custom_logo_url' );

The function will output the WordPress URL. You may not want, as the WordPress URL belongs to the member’s site and you may want the URL to be the main site URL. To do this, modify line four (4).

Change:

return get_bloginfo( 'url' );

To:

return 'http://yourdomain.com/';

Where yourdomain.com is the domain you want the logo to link to.

Link Title Attribute

To change the link title attribute, add the following to your theme’s functions.php file:

// Custom WordPress Login Logo by Brandon Himpfen 
// Website: http://himpfen.com 
function custom_url_title() { return get_bloginfo( 'name' ); } 
add_filter( 'login_headertitle', 'custom_url_title' );

The link title will display the title of your WordPress site. You can change this by modifying line four (4), which looks like this:

return get_bloginfo( 'name' );

Modify it to:

return 'Something Else Goes Here';

Change Something Else Goes Here to whatever you want.