Web Development Blog

Here is a step-by-step tutorial on how to customise WordPress Login page for your website/blog. This tutorial will show you how to change the WordPress logo and link on the Login page without hacking the core code nor installing a plugin.

1. Copy and paste the following code into functions.php file of your current theme. If there is no functions.php in your current theme folder, create one.

<?php
function custom_header() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/admin/login.css" />';
    echo '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>';
    echo '<script type="text/javascript" src="' . get_bloginfo('template_directory') . '/admin/login.js"></script>';
}
add_action('login_head', 'custom_header');
?>

2. Create a folder called admin in your current theme folder. This is where you will put all your css, js and images for the custom Login page. I like to create a separate folder for admin css and images because it keeps things neat and clean.

3. Create a css file and name it login.css. You can give it any name you wish but remember to change it accordingly in custom_header() function in functions.php file of your current WordPress theme. In this css file, you will be putting CSS overrides for the WordPress login page. Mine looks like this:

#login h1 a {
	background: transparent url(images/logo.gif) no-repeat scroll 0 0;
	display: block;
	height: 66px;
	text-indent: -5000em;
	width: 386px;
}

#login {
	width: 368px;
}

The above code simply replaces the WordPress logo above the Login box with the custom logo I have in images folder and makes the width of the login box a bit wider. You can do many other things from this CSS file to customise your WordPress login page; for example, changing the background image, changing the text styles, changing the look and feel of buttons, etc.

4. Create a javascript file called login.js in admin folder of the current WordPress theme that you have created earlier. As with the css file, you can name it any thing you like, just as long as it matches the one used in custom_header() function. And because I have also included jQuery library from Google AJAX Libraries API, I can use jQuery methods to overwrite any event or perform new actions via login.js javascript. My login.js file looks like below:

$(document).ready(function(){
	$("#login h1 a").attr("href", "/");
});

The above code replaces the href attribute of the logo link via DOM. So rather than going to the WordPress website when someone clicks on the logo on Login page, it will go to the website’s homepage.

So, that’s it. 4 simple steps to customising your WordPress Admin Login page. If you are using WordPress as a CMS, it is a good idea to customise the Admin Login page to ensure that you get a similar user experience and look and feel for both the front end of the website and the backend. For your inspiration, have a look at this Flickr Group Pool featuring a collection of Custom WordPress Logins.

Found this article useful? Share it with your friends: