Having fun with WordPress login. Box or not.

Graphic designer David Airey recently posted a nice tip on how to customize the look of the WordPress login box. While it’s easy to apply and quite handy for a number of situations as it is, I’d like to take it a bit further.

Update: here is another take at customizing WordPress login (Binary Moon)- clean, simple, and with its own plugin.

First of all, if you are following David’s instructions, keep in mind that WordPress login box is not just an image or two. It has a style of its own. That style covers the “Username”, “Password”, and “Remember me” strings, and an error message, which appears when you enter an incorrect username or password. That style assumes a dark background. So if you will make your own images with light background, you might have some troubles seeing those strings. The error message being the easiest to forget about.

There are a few ways to work around this issue.

The plugin way

Perhaps, the easiest and simplest way is to have a plugin, which loads your custom style. WordPress has an action hook called ‘login_head‘ which is executed before the </head> tag of the login page is printed out. Here is an example with the simplistic style change. Feel free to go wild.

The custom login procedure

Another way to go about this issue is to replace the login screen with your own. All you need to know about how WordPress does it, you can learn from the wp-login.php file in the root folder of your WordPress installation. Basically, it just defines what to do when

• user wants to login
• user wants to logout
• user forgot password
• user resets password
• user wants to register (hint: custom registration forms)

You can start by copying wp-login.php (into my-login.php or just login.php or whatever you decide to call it). Once you have it working properly, you can edit the .htaccess file (you probably have it there already for your fancy URLs’ mod_rewrite rules anyway), and add a redirection from the old wp-login.php to your own version.

Non-admin member area

And, of course, nobody forces you to use WordPress login box on your web site anyway. It’s fine for most blogs to have a login page, which redirects the user to the administration interface upon successful login. But it’s not always what you want to do.

There are many web sites out there, that allow users to register, login, and see the same web site (not an administration interface) with a few more options. If you are building a web site with WordPress platform, you can have that too.

First of all, see how WordPress logs user in. Open the wp-login.php file around line 166. That’s where it starts. If you run your eyes through the next few lines, you’ll notice the following interesting bits:

• an action hook ‘wp_authenticate‘ (hint: you can plugin your functionality in here)
• wp_login() function call (hint: is there anything else I should tell you about?)
• an action hook ‘wp_login‘ and wp_redirect() function call (hint: both are upon successful login)
• wp_get_cookie_login() function call (hint: this is how you get login info from cookie)
• wp_setcookie() function call (hint: is there anything you want to save?)

Altogether, those are about 30 lines of code that you should spend some time understanding. Once you have them figured out, there is nothing you cannot do with WordPress login procedure - custom screens, redirects, security logs - all these are in your power.

---

Possibly related posts: (automatically generated)

• Tip #6 : Enhancing WordPress administration
• WordPress help. Where is it?
• CNET.com: Install a WordPress blog