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.
He issue with the wordpress logo overlaping is related to the WP security Scan plugin.
December 10, 2009
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.
December 21, 2009
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.
December 21, 2009
hi, my login page > http://www.sunset.gen.tr/wp-login.php (H)
May 9, 2010
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.
December 18, 2009
Simple and it works. Oh if all plugins could be this straightforward. Thanks
December 18, 2009
try it and it works perfectly, Thank you for this great plugin !
December 20, 2009
This is fantastic! Exactly what I was looking for. I will be adding a screenshot to my flickr group shortly. Thanks!
December 24, 2009
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.
January 7, 2010
I will be trying the baby out thanks!
January 21, 2010
Hi, works great, very slick!
January 30, 2010
This is awesome! Works terrific! Easy to implement! Thank you so much!
February 5, 2010
Sorry, this did not work
( All I get is HTML lines! HELP!
March 2, 2010
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!
March 4, 2010
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.
March 13, 2010
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?
April 9, 2010
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.
April 11, 2010
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.
April 20, 2010
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
June 14, 2010 • @Africafreak
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
June 25, 2010
Did you ever find the answer to this? I posted on here a couple weeks ago and no one has gotten back to me.
July 21, 2010 • @apeoplepath
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.
August 4, 2010 • @apeoplepath
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.
April 24, 2010
than's a lot! That the exact thing i was looking for !!
May 6, 2010
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.
May 23, 2010
The same problem like Darrin explained! GIF is "overlapping" PNG which looks very ugly if working with transparent pictures!!! Any idea???
June 23, 2010
I've solved the problem and published it on my blog.
June 29, 2010
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
June 29, 2010
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!
July 2, 2010
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
July 15, 2010 • @apeoplepath
@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;
}
July 22, 2010
Is this website abandoned??? I still haven't found an answer to this problem. Has anyone else?
July 21, 2010 • @apeoplepath
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.
August 3, 2010
I want the same, background behind the login form, please.
A graphic or a bg color, cheerrrrrs, David
September 20, 2010
Mitico! Thanks for your great job, it works fantastic!
Here's my screen capture: http://goo.gl/EQqP
Beautiful!!
August 12, 2010 • @BBlogger_Net
works nicely to me on WP 3.0.1 , without any problems or errors..
thanks a lot!
October 15, 2010 • @niconectado
perfect!!! thank you bro
October 22, 2010
Just wondering how to change the background fill color BEHIND the login from the generic white!!
December 12, 2010 • @martinvaresio
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.
January 16, 2011 • @justsomedia
glad both your clients and you are enjoying the plugin!
January 18, 2011
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..
February 8, 2011 • @eshark
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!
March 3, 2011
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
March 23, 2011
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?
March 31, 2011
I haven't tested the plugin with WordPress 3.1, I guess I should test it and see how things go
March 31, 2011
it works fine in 3.1 - i have multiple sites running with the custom login
March 31, 2011
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
March 31, 2011 • @tracyselena
Canthis procedure be updated for WP3.1?
Thank you.
April 5, 2011 • @revmark
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
April 9, 2011
its giving an error on ur login page #fail
May 16, 2011
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.
July 10, 2011 • @ShoeiGiftShop
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.
July 14, 2011
Simple and it works. Oh if all plugins could be this straightforward. Thanks
July 20, 2011
Hi, you released new version and it doesn't work.
July 29, 2011
Works fine for me. Can you be more specific about what isn't working?
July 29, 2011
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?
July 29, 2011
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.
July 29, 2011 • @amediaguy
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.
July 29, 2011
ouh ok...that's why my image doesn't appeared. I'll have to test right now.
thanks!
July 30, 2011
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
July 30, 2011
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?
August 3, 2011
hey your Binary Joy login screen login plugin have some bugs of is_dir().
August 6, 2011
Yep - I know. I need to update the plugin to the latest version.
August 6, 2011
My site looks cool with these custom Login Page
August 20, 2011
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.
September 1, 2011
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.
September 1, 2011
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!
September 10, 2011
This is Good Plugin!
Maybe I'm Translate To persian & Publish For Iranian People!!
Thanks
September 13, 2011 • @alirezach70
Thanks for the tutorials about wp login but please fix you http://www.binarymoon.co.uk/wp-admin.php page
September 22, 2011 • @tutspress
I don't understand?
October 6, 2011
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
September 25, 2011 • @dislands
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?
January 16, 2012
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="">
September 26, 2011 • @clairepoulton
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.
October 26, 2011
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
October 26, 2011
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:)
November 22, 2011
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
November 29, 2011 • @monjurulhoque
Are you using the latest version of the plugin?
December 9, 2011
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.
December 2, 2011
Not at the moment but I have had a few comments about this so may add it in a future update.
December 9, 2011
Hey Ben. After I installed the plugin I lost all contact with my wp. any idea what might be the problem?
December 13, 2011
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
December 13, 2011
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
January 2, 2012 • @Sander166
you could actually customize your login page in wordpress (wp-admin) by editing the wp-admin.css and color-fresh.css.
January 21, 2012
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.
January 22, 2012
I just downloaded this plugin. So excited I found it. None of the image template files are in the folders? Any suggestions?
January 23, 2012
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?
January 26, 2012
Ben,
Thank you for the great plugin!
I am able to get everything working great, except the register link. What am I doing wrong?
Jeff
February 25, 2012
Hi Ben
I have installed the plugin, it works but i get the following error
Warning: is_dir() [function.is-dir]: open_basedir restriction in effect. File(/wp-content/mu-plugins) is not within the allowed path(s): (/var/www/vhosts/aptart-design.co.uk/httpdocs/:/tmp/) in /var/www/vhosts/aptart-design.co.uk/httpdocs/wp-content/plugins/bm-custom-login/bm-custom-login.php on line 55
any idea how to fix this?
Thanks
April 13, 2012
hi!
I would like to ask about the plugin version of this.
is that plugin compatible with i18n or WPML?
best regards.
May 8, 2012
There's no translations included, but it's fully prepared for localisation
May 9, 2012
great!
is it compatible with WPML?
May 9, 2012
Hi there your flickr photos of this plugin look amazing! I am dying to use it however I cant seem to change the "Your Logo" text? I.e put an image in there as can be seen here:
http://www.flickr.com/.../6821170587/in/pool-446919@N23/
I can make a background image but cant seem to figure out how to change the actual sign in box? Can you please help?
Also there is no psd in the images folders?
Many thanks,
Barry
June 1, 2012
Hello there, I have installed, activated and modified the plugin according to taste. Just noticed that it states the website in the top left hand corner of the login page and it's annoying: http://www.shaunhillphotography.co.uk/wp-login.php
Please see what I mean for yourself and let me know how to fix this.
Thank you.
June 28, 2012
Hai. I found the plugin and start to work on it. It was oke to doe the first part. The second the background whas more to do. What is he excact size HxBr ??? I change the one I have to use a x times. but I think I havet it.
Check it on: http://www.knipselkrantcuracao.com
Great job and a great plugin.
August 2, 2012
I like how the background image is kept separate from the wordpress admin folder, hence making upgrades to the software hassle free. It is a great idea making the wordpress login panel personalised.
September 9, 2012
This plugin has certainly helped. I think its a great idea.
It's something I've been wanting to change for a while now as it's a page I see most days when logging on to write and blog. Changing the look of the login page should be implemented on all wordpress websites if you ask me.
I like your examples posted on flickr. They gave me good ideas toward changing my own blog which I'm working on at the moment. Also found some fantastic visual examples gathered together in this post. Check these out. Shows exactly whats possible when you put your mind to it!
September 10, 2012
I have installed the plugin, it works but i get the following error
September 20, 2012
Oh oh Love this plugin , due to that my client got impress to me..
November 1, 2012
Glad it worked well for you!
November 1, 2012
is it possible to make the background image to automatically adjust the resolution that you are using?
December 8, 2012
I can't seem to get this to work. The images don't load... is it compatible with WP 3.5.1?
February 20, 2013