BangMirza

Update (24/8/11): The code below should all still work, but a number of the samples are no longer active, sorry!

The WordPress admin login page is very easy to customize. With the code below, you can add your own CSS to the login page and make it look however you like. Check out the new Pro Blog Design login to see it in action.

Best of all, your customizations are all done in your theme files, so the changes will stay when you upgrade WordPress.

This is the first in a series of WordPress Hacks posts. The code is all done by Milo, and then written up into a blog post by me. There will be a new hack released every Thursday!

1 – Edit Functions.php

Your theme may or may not have a functions.php file in it already. If it does, paste the code below into the bottom of it. If not, just create a blank file in Notepad and save it with that name.

And remember not to leave any space before or after the <?php and ?> tags as you do this!

1 2 3 4 5 6

<?php function custom_login() { echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login/custom-login.css" />'; } add_action('login_head', 'custom_login'); ?>

2 – Edit Your Theme Files

We will need a place to store your new CSS styles and any images you might use. Seeing that they aren’t part of the main site, let’s create a new folder for them.

Create a folder in your theme’s folder and call it “custom-login“.

And inside that folder create a new stylesheet called “custom-login.css”.

3 – Add New CSS Rules

The custom-login.css file will be loaded each time your login page is loaded. That means that any rules you add here will be applied to the login page.

If you add new images, you can store them in your custom-login folder.

However, if you want to re-use images from your theme, just use CSS rules like the following to use the image from your theme’s images folder (That way, your browser won’t need to download the images again as it will already have them cached).

1

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;}

A Simple Template Example

The following is the stylesheet I’ve used to create my new login form. It is very, very simple, but it does the trick nicely. I’ve commented it, so feel free to adapt it and use it on your own site.