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.
396 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.
I want the same, background behind the login form, please.
A graphic or a bg color, cheerrrrrs, David
Mitico! Thanks for your great job, it works fantastic!
Here's my screen capture: http://goo.gl/EQqP
Beautiful!!
works nicely to me on WP 3.0.1 , without any problems or errors..
thanks a lot!
perfect!!! thank you bro
Just wondering how to change the background fill color BEHIND the login from the generic white!!
Nice work dude.
My clients are singing my praises.
So I will hand a large proportion of that praise over to you. Only, of course, after I have taken a small piece for myself.
glad both your clients and you are enjoying the plugin!
Great plugin I must say, I've been using it since 2008.. any updates for WP 3.0.5 version yet? as there got some errors for WP 3.0.5 version..
I've been looking around for a solution to this for a while, as I have never l¡ked (hated in fact) the standard wordpress log in, so this is great. Thanks!
Hi Ben,
Thanks for the plugin, it works great !!
I have one questions
1. When I go to the login page the error message is shown saying that the login fields are empty and also the login form shakes. It happens only when i use the plugin, IF I dont use the plugin it is like normal wordpress login. But I need this plugin to style the login page, which is very good. But I would like to remove this shaking effect and error message when the login page is loaded for the first time. I hope you know what I mean, I can show you the site since its an intranet, I dont have a web url.
Please let me know if this is from the plugin or something else
Jeffy
I have a problem with this plugin.. Now in the login page, it shows only textboxes of username and password..
I think the plugin is not compatible with WordPress 3.1 .. is it so?
I haven't tested the plugin with WordPress 3.1, I guess I should test it and see how things go
it works fine in 3.1 - i have multiple sites running with the custom login
Hi Ben, Awesome plugin...I'm having a bit of a problem with it. I am using wp-member so I hope that it's not conflicting...
A few questions:
1. Are the files supposed to be gif's or jpg? cause there's a mix between your instructions and the examples.
2. Are the files to be uploaded to wp-content/plugins/bm-custom-login/images or wp-admin/images. Again the instructions say the later, but your files show the former.
3. This is what my source code looks like when I view the page: http://tsm.s3.amazonaws.com/viewsource.png
This is the url I'm having problems with: http://www.thedecoratingandstagingacademy.com/...egister
Tracy
Thanks so much for your help
Canthis procedure be updated for WP3.1?
Thank you.
Warning: is_dir() [function.is-dir]: open_basedir restriction in effect. File(/wp-content/mu-plugins/) is not within the allowed path(s): (/f5/binaryjoy/:/nfsn/apps/php5/lib/php/:/nfsn/apps/php/lib/php/:/nfsn/content/content/nfsn/:/usr/local/php/lib/:/usr/local/php/5.2.17/lib/:/usr/local/php/5.3.5-nfsn1/lib/) in /f5/binaryjoy/public/wp-content/plugins/bm-custom-login/bm-custom-login.php on line 19
Binary Joy
its giving an error on ur login page #fail
Hi Ben,
Thanks for the beautiful plugin.
Wordpress 3.2 is out and and there is some glitch with picture maybe the changes of size, i don't know.
Will you make update for the new version?
thank you.
login-bkg-tile.jpg is showing up below log in panel - is now a background for message such as "back to yoursithttp://www.binarymoon.co.uk/2007/07/wordpress-tips-and-tricks-custom-login-page/#e blog." Anyone know why this is happening? Thank you.
Simple and it works. Oh if all plugins could be this straightforward. Thanks
Hi, you released new version and it doesn't work.
Works fine for me. Can you be more specific about what isn't working?
I'd forgotten how much I tweaked version 1.4 so I could have a larger, especially wider, background image. Can I request that as a future upgrade?
After upgrading to WordPress 3.2.1. my custom image is no longer presented.
I have downloaded the version today from your website but my image is still not presented. Where do we get your test version?
Thanks in advance. I have also posted at WordPress Plugs.
There's now a settings page where you can specify the image to use as the login background. I have a few things to do this weekend to improve it further.
ouh ok...that's why my image doesn't appeared. I'll have to test right now.
thanks!
I created image 312px x 600px with a little mod from your template file, but it doesn't seem right. Not as slick as previous image. I hope you can provide us with the new version of psd template file for the next release. thank you
I've downloaded and installed the Plugin as the tutorial showes me.
Also i made a new Background and uploaded all Files to ftp in the right Folder.
Finally the custom Login isn't shown - default Login only.
I run latest WP 3.2.1 Any Suggestions?
hey your Binary Joy login screen login plugin have some bugs of is_dir().
Yep - I know. I need to update the plugin to the latest version.
My site looks cool with these custom Login Page
first off, nice platform for doing the custom login.
As you've probably seen, there are several users who also like to update the page background in addition to a customized loginform background. For instance my own: http://www.graphicdistortions.com/wp-login.php
currently though, this incarnation does not allow for that without some minor hacking of the PHP and CSS file.
Is there an update coming out to address this?
FYI: the PSD file that you included with the plugin is defaulted to 390px width, but the default defined in the CSS section "#login h1 a" is 312px, so you lose all the nice rounded edges from the template.
This is quite a common request so I am considering it - yes
One day I will change the psd file as well. I just need to find some free time.
Hi Ben,
First of all, thanks a lot for your plugin. It has been working great in the past. Unfortunately ever since I've updated it, the format of the psd doesn't work anymore.
Could you please adjust this, or give me some hints on how to do it myself?
*prettyplease*
Thanks!
This is Good Plugin!
Maybe I'm Translate To persian & Publish For Iranian People!!
Thanks
Thanks for the tutorials about wp login but please fix you http://www.binarymoon.co.uk/wp-admin.php page
I don't understand?
We just customized our login page with some great CSS3 styles. Check it out live on our wp-login page http://www.destinyislands.com/wp-login.php
What is the size image you used? When I set mine up the image at top gets blocked by a message saying "you are logged out". How can I get rid of that message?
In order for it to work, I had to edit the wp-login.php page to make it all fit in the image, by adding an inline style to the URL.
Line:690
<a style="float:right; padding-right:26px;" href="/" title="">
I am not sure what the problem is but I would recommend against editing core files. You could easily add that style to the stylesheet to make it fit in if you want it to.
Hi Ben,
First, let me say thanks for the great custom login plugin. It really was easy for us "Newbies" not familiar with WordPress. I am having one problem though. I can't get my logo to appear on my new image background. I went into my FTP and uploaded a custom logo and put it into the wp-admin/image .gif file.
Can you please tell me what I am doing wrong??
Your help would be greatly appreciated.
Thanks!!
Geralyn
Excellent post. Never thought that customizing your Blog will go up to this level. The WordPress custom login is very useful, especially when you have a lot of Guest Bloggers. Thanks for sharing:)
i tried to used in wordpress ver:3.2.1 but its not working properly. i just upgrade my site and reinstall it but same problem. plz help to fix it asap.
thanks
Are you using the latest version of the plugin?
This is AMAZING, thanks so much. My login page looks a million times better Ben your a Star.
Is there a way to add an image to the page background? That would make it PERFECT.
Not at the moment but I have had a few comments about this so may add it in a future update.
Hey Ben. After I installed the plugin I lost all contact with my wp. any idea what might be the problem?
Sounds like it was a temporary issue with your web server. Your site seems to be loading now and I can see the custom login box
Hey Ben,
I love this plugin! It's nice to have a custom login as finishing touch for your website.
With the upgrade to WordPress 3.3 I noticed there was a change in CSS. The background image is now at the top of the screen, instead of on top of the loginbox.
I've added 1 lines of CSS to your plugin's CSS file (to #login to be precise) to correct this. Could you please check it out and update the plugin?
#login {
padding: 0 0 20px;
margin: 114px auto 0;
}
Thanks!
Sander
you could actually customize your login page in wordpress (wp-admin) by editing the wp-admin.css and color-fresh.css.
you could indeed, but then when you update WordPress you lose the changes and have to re-apply them. This is why WordPress plugins are great - they remove this requirement and keep things working longer.
I just downloaded this plugin. So excited I found it. None of the image template files are in the folders? Any suggestions?
Hey Eric - I don't think the plugin needs image templates anymore. Any images will do the job really
If you need something in particular then perhaps I can suggest something?