It's cool to have the WordPress login page customized to fit your own website branding. This is even more significant for multi author blogs, or sites you have set up for clients as it adds that little extra something.
Since writing this post in 2007 I have released a plugin called BM Custom Login which does everything described below
I was actually inspired to write this post because of a 9rules note I started. David Airey beat me to the punch with his own version and credit should go to Ayushsaran for starting the thing but here is mine at last.
The process is very simple. Create two images (login-bkg-tile.gif and login-bkg-bottom.gif) and then stick them in the wp-admin/images/ folder from your WordPress installation. With a bit of effort you can create something nice.
The problem with this is two-fold, first how do you create the images? Secondly what happens when you upgrade?
How do you create the images?
This isn't overly challenging. All you need to do is make a picture based on the default template. But wouldn't it be nice if there was a template file you could base your image on? It would save so much time!
You'll also need to create a new footer image... but I've solved that problem too.
What happens when you upgrade?
One of the things I have tried to do with my WordPress tips and tricks is stick to things that don't require changing core files. I don't like the idea of having to change things every time I upgrade the software, and in this case the images will get overwritten when you install new versions of the software.
The Solution? Ben to the rescue!
Ok, so it's not the most complicated of problems, or solutions for that matter, but I have an answer to both.
The image template was easy... I made one.
The upgrade issue was a little more challenging, and took me about 10 minutes longer to put into action. I give to you, my first WordPress plugin (and how useful it is), the Binary Moon Custom Login plugin - as seen in action on the Binary Joy login screen.
The plugin itself sits in the plugins folder alongside the images - which you can change as required. The footer image has been changed to a gif with a transparent middle which means you can use any images you like for the main background and they will fit seamlessly.
Because this is a plugin and the images are kept separately from the admin folder upgrades are nice and easy. Just upgrade as normal. This is particularly handy for client sites where they may not be aware of what you have done to customise things.
- Click here to download the Binary Moon Custom Login Plugin now!
- View the bm-custom-login flickr group
- bm-custom-login project page
Let me know what you think.
347 Responses to “WordPress Tips and Tricks – Custom Login Page” Leave a reply ›
He issue with the wordpress logo overlaping is related to the WP security Scan plugin.
It appears to be. I have the same issue. When I deactivate the WP Security Scan plug-in the login looks like what we have designed but with the WP Security Plug in active there is an overlap. Any suggestions as we would like to keep the Security Plug in installed.
Found a solution - loaded on WordPress 2.9 with WP Security Scan
It appears that the "WP selection" array in the bm-custom-login.php does not select the proper css file. The plug in was using the bm-custom-login.css file. I copied the css from bm-custom-login-3.css to the bm-custom-login.css file and now it works fine.
hi, my login page > http://www.sunset.gen.tr/wp-login.php (H)
Hi there! Thanks for an awesome plugin. I was wondering if it is possible to change the hyperlink so as not to cover the entire logo but only a part of it.
Simple and it works. Oh if all plugins could be this straightforward. Thanks
try it and it works perfectly, Thank you for this great plugin !
This is fantastic! Exactly what I was looking for. I will be adding a screenshot to my flickr group shortly. Thanks!
Great info. Hey I was wondering if you had insight on a plug-in which would allow only my main to be view. If your not a registered user I would be able to force the potential user to subscribe and login...please advise.
I will be trying the baby out thanks!
Hi, works great, very slick!
This is awesome! Works terrific! Easy to implement! Thank you so much!
Sorry, this did not work
( All I get is HTML lines! HELP!
Does this plugin work with WP 2.9.2?
I'm having some compatibility issues... Just seems to have broke when I did the upgrade today.
Any help is appreciated.
Thanks!
Hi, The plugin is awesome!!!!! Thanks very much!
One Question: I'm using wordpress in spanish, so I wondering if is it possible to change the plugin's language because, now the login page messages are all on english...
Thanks again.
I have made the area around the border transparent but now it shows the background image below the footer image. How can I make it so the background image from the top part stops and lines up with the footer instead of bleeding through the bottom where it's transparent?
Heya... you are aware that your "login" example is not working, aren't you? Your own login screen seems to be missing the top image, resulting in an unreadable form.
Guess you should know.
Great plugin! I have successfully modified and uploaded the image file and my login screen looks great.
There is one small error, though, and that is with the 'Remember Me' section of the login.
The checkbox to click is visible, but the text 'Remember Me' accompanying the checkbox is missing.
How can I rectify this?
Thanks.
Hi there DT!
I am having the exact same issue, but in my case the "Username" & "Password" no longer appear either...
Were you able to solve the issue in the meantime???
Thanks for getting back to me!
Michael
Hi Michael,
It appears the username & password also wasn't appearing for me either.
No, I'm afraid I wasn't able to solve the issue. In fact, I have now disabled this plugin because I couldn't afford to have my members unable to reset their passwords etc.
I am wondering if the plugin is clashing with the WP theme that I'm using? I will be applying a new theme shortly and will be able to see if that is indeed the issue.
In the meantime, I am diasppointed that the plugin author seems to have given up on this comments section and doesn't address any of our issues.
Maybe there's another plugin out there that will do a similar thing?
Sorry I could be much help to you.
DT
Did you ever find the answer to this? I posted on here a couple weeks ago and no one has gotten back to me.
By the way, I found the answer to this........ Very embarrassing. If anyone looks in the css-3 file the reason you don't see the "remember me" and "lost my password" is because the default for the plugin is to be on a dark background. So both these are set as white at the start. To make things easier Ben or whoever the author is even spells out in the css what the different code goes to.
So to fix these go to plugins -> edit -> select BM custom login and pull up css sheet #3. Then:
at line #28 you will see this css code
#login label {
color:#FFFFFF;
}
change #FFFFFF to whatever font color you like
the other line is the folliwing
line #54
.login #nav a, .login #nav a:hover {
color:#FFFFFF !important;
}
The plugin works perfectly. Thank you for the nice plugin.
I cannot seem to get this to show on my main page. I have activated it. I am new to WordPress so that may be my issue but I have followed everything you said and I do not see the login screen at all.
than's a lot! That the exact thing i was looking for !!
Good one I've been looking for this. But Can you tell me how ti embed login form in a page and I also have a request for you.
There are many multi-author blogs out there, and all would love a Author Adsense plugin!!! There are few already but non of them work with 2.9
I hope I'll be a good response from you.
The same problem like Darrin explained! GIF is "overlapping" PNG which looks very ugly if working with transparent pictures!!! Any idea???
I've solved the problem and published it on my blog.
Hi there! Thanks for an awesome plugin. I was wondering if it is possible to change the hyperlink so as not to cover the entire logo but only a part of it.
Imran14826
http://www.livetv.pk
This is such a great way for admins to login to wordpress! I have seen this on quite a number of blogs, and soon to implement on mine! Fantastic post!
Hi, I notice there are a few people with my problem but the answer isn't posted here. There isn't a "remember me" anymore, and the link for "lost my password" is missing.
http://gethiredasap4her.com/wp-admin/
Is there an answer somewhere, I have looked through your site a couple times and don't see anything with the answer.
Thanks for any help.
Jodi
@Jodie
The text in your labels is currently in white on the CSS - so look for the part in the bm-custom-login-3.css file and change from white (#fff) to another darker colour - #000 is black for example
#login label {
color:#000;
}
.login #nav a, .login #nav a:hover {
color:#000 !important;
}
Is this website abandoned??? I still haven't found an answer to this problem. Has anyone else?
Got the plugin to work great! Just wondering how to change the background fill color BEHIND the login from the generic white, to either a picture or a gradient fill. Any help would be appreciated. Thanks.
Mitico! Thanks for your great job, it works fantastic!
Here's my screen capture: http://goo.gl/EQqP
Beautiful!!