I posted how to Brand Your WordPress Login Without A Plugin, but I was asked by Ash of Ash Blue Web Design how to change the URL on the login page from WordPress to your own URL. Well, after mulling it over and since I have been coding a few WordPress plugins, I thought I would dig a bit for the solution.

After you have followed the first tutorial, here is how you can change that URL.

As a reminder, the full code from the previous tutorial is:


function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important;height:160px;width:322px;margin-bottom:5px;margin-top:-70px; }
body { border-top-style:none; }
html {background:#fff url('.get_bloginfo('template_directory').'/images/bgr_html2.png) repeat-x;}
#backtoblog { display:none; }
</style>';
}

add_action('login_head', 'my_custom_login_logo');


Before the ‘; after the style tag, you will put the following javascript code, which is pretty self explanatory. We are switching one URL for the other, but specifying that it is your site’s link.


<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>


So, in the end, the full code is:


function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important;height:160px;width:322px;margin-bottom:5px;margin-top:-70px; }
body { border-top-style:none; }
html {background:#fff url('.get_bloginfo('template_directory').'/images/bgr_html2.png) repeat-x;}
#backtoblog { display:none; }
</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>

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 WPAddict. This is all merely adding CSS and an action to your theme’s 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">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important;height:160px;width:322px;margin-bottom:5px;margin-top:-70px; }


Remove the border at the top of the login page:


body { border-top-style:none; }


Adding your own background to the login page:


html {background:#fff url('.get_bloginfo('template_directory').'/images/bgr_html2.png) repeat-x;}


Removing the Back to blog link:


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


Full code:


function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important;height:160px;width:322px;margin-bottom:5px;margin-top:-70px; }
body { border-top-style:none; }
html {background:#fff url('.get_bloginfo('template_directory').'/images/bgr_html2.png) repeat-x;}
#backtoblog { display:none; }
</style>';
}

add_action('login_head', 'my_custom_login_logo');


You can customize more of the page too, so just view the source of your login page and you can put other CSS attributes into the code above.