Brand Your WordPress Login Page Without A Plugin

There is a Custom Admin Branding plugin for that, but why bother when you can insert a few lines into your theme’s functions.php file? 😉

However, if you like to change up your site’s theme sometimes, you probably want to change the log in page too. A lot of people have been really hooked into branding their WordPress log in page, especially since guest blogging has become popular.

Here is the code I put together for Blondish.net. This is all merely adding CSS and an action to your theme’s functions.php file. (Note: some people like to be tidy and can put this in another file and reference it to the functions.php file.)

Adding the action for your custom login:

add_action('login_head', 'my_custom_login_logo');

Replace the WordPress logo:

function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a { background-image:url('.get_bloginfo('template_directory').'/images/blondishnet-2011-bottom-logo.png) !important;height:80px;width:401px;margin-bottom:5px;no-repeat scroll center top transparent; }

Adding your own background to the login page:

html, body {background: url('.get_bloginfo('template_directory').'/images/blondishnet-bg.png) !important;}

Removing the Back to blog link:

#backtoblog { display:none; }
</style>';
}

Customizing the login box area:

#login {width:401px !important;}
.login form {background: url('.get_bloginfo('template_directory').'/images/blondishnet-bg2.png) !important;}
.login label {color: #fff; font-size: 16px;}
input.button-primary:active, button.button-primary:active, a.button-primary:active {
background-color: #EEA2BB !important; background-image: none !important; color: #BA314C !important; border-color: #BA314C !important;}
input.button-primary, button.button-primary, a.button-primary {background-color: #EEA2BB !important; background-image: none !important; color: #BA314C !important; border-color: #FAD5E1 !important;}
.login #nav a, .login #backtoblog a {color: #BA314C !important;}
.login #nav a:hover, .login #backtoblog a:hover {color: #000 !important;}
</style>

Replacing the WordPress.org link that is on the login page (where you put your site’s name or logo):

<script type="text/javascript">
function loginalt() {
var changeLink = document.getElementById(\'login\').innerHTML;
changeLink = changeLink.replace("http://wordpress.org/", "' . site_url() . '");
changeLink = changeLink.replace("Powered by WordPress", "' . get_bloginfo('name') . '");
document.getElementById(\'login\').innerHTML = changeLink;
}
window.onload=loginalt;
</script>

Now, the full code in action:

add_action('login_head', 'my_custom_login_logo');
function my_custom_login_logo() {
echo '<style type="text/css">
.login h1 a { background-image:url('.get_bloginfo('template_directory').'/images/blondishnet-2011-bottom-logo.png) !important;height:80px;width:401px;margin-bottom:5px;no-repeat scroll center top transparent; }
html, body {background: url('.get_bloginfo('template_directory').'/images/blondishnet-bg.png) !important;}
#login {width:401px !important;}
.login form {background: url('.get_bloginfo('template_directory').'/images/blondishnet-bg2.png) !important;}
.login label {color: #fff; font-size: 16px;}
input.button-primary:active, button.button-primary:active, a.button-primary:active {
background-color: #EEA2BB !important; background-image: none !important; color: #BA314C !important; border-color: #BA314C !important;}
input.button-primary, button.button-primary, a.button-primary {background-color: #EEA2BB !important; background-image: none !important; color: #BA314C !important; border-color: #FAD5E1 !important;}
.login #nav a, .login #backtoblog a {color: #BA314C !important;}
.login #nav a:hover, .login #backtoblog a:hover {color: #000 !important;}
</style>
<script type="text/javascript">
function loginalt() {
var changeLink = document.getElementById(\'login\').innerHTML;
changeLink = changeLink.replace("http://wordpress.org/", "' . site_url() . '");
changeLink = changeLink.replace("Powered by WordPress", "' . get_bloginfo('name') . '");
document.getElementById(\'login\').innerHTML = changeLink;
}
window.onload=loginalt;
</script>
';
}

You can customize more of the page too, so just view the source of your login page (or you can click “Inspect Element” in Chrome or Firefox to get view the element you need to change) and you can put other CSS attributes into the code above.