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.
323 Responses to “WordPress Tips and Tricks – Custom Login Page” Leave a reply ›
Thanks for this nice plugin. It allows a bit of professionalism to the login screen.
Hi
1. How do you change the button colour on the screen. I changed your 2 screen files colour to purple yet the button is still wordpress blue. So is there a button template to change.
2. How do you change the button itself. The button you showed on all the examples is not the WP2.5.1 button that appears on my login form. It is the same button I had before.
Hope you can help. Thanks so much.
Thanks for the plugin, very useful.
You've also got a really nice site design.
Same here with the latsest version of WP...they don't use the gif's anymore that are in that folder. You can change manually by changing the css file in the admin/css/logincss folder
@Dave - the latest version works with Wordpress 2.5
Hey Ben,
Love the idea, but can't seem to get it to work with WP 2.5. Do you know of any plugin conflicts? In other words, I have, say, Register Plus, which allows me to change the header image, but not alter the design in other ways (though if I disable this plugin, I still have the same issues). It seems like this version of WP has an entirely different login screen than prior versions which feature the rounded-corner look. Therefore, this BM plugin doesn't seem to fit in the allotted space. Anyone else finding this to be a problem? @Ben: ideas?
I am still curious about the button. Why is there no button in your plugin. As I mentioned on 3 July - the button is the default blue button from worpress 2.5.1. Kerry Webster says I need to use a button from another plugin (branded) called fade-button.png. I'm not sure why and not really sure how to use it in your plugin. Hope you can help. Thanks.
Vanesa - I have no idea about the problem you're seeing. There should be a button. The only suggestion I have is to make sure you're using the latest version of the plugin and that no other plugins conflict with it (I would try disabling them one at a time until it shows)
Emily - I am no aware of any conflicts. The plugin is very simple. That said it wouldn't surprise me if something went wrong somewhere.
Hi Ben, Yes there is a button the default wordpress 2.5.1 button not a button from your files. I have the latest version of your plugin bm-custom-login version 1.3. There is no button file in our files. I have deactivated my plugin. I downloaded your plugin again and installed it. Again there is no button from your plugin just the blue default button from wp 2.5.1. Maybe you could email me the button file as there definitely is not one in the plugin. Thanks so much.
Hi, the plugin works really great!!
However I also have a sidebar login widget installed and the white text was not showing on the front page with white background (it was fine on the login page because my background was orange). So I guess the sidebar widget was using the same css file, so how can I differentiate that?
Venesa - do you have a page I can look at to see the problem? There is no button file in the plugin - I don't change the style of the buttons so you will use the default wordpress button style (this changed between wp2.3 and wp2.5)
Barbara - that's another strange problem. I would never even have considered using the login box as a widget - and if I did I wouldn't use the css from the login page. Do you have a url I can have a look at?
Hi Ben, thanks for the quick reply, please check my construction site http://www.jingyung.com it's in Chinese. The login widget I added was called Minimeta plugin I downloaded from wordpress. Before I used your plugin the text was normal i.e. black but after your plugin the text becomes white which works OK if i inserted an orange background gif but wouldn't if i just use a white background. I guess this widget somehow shares the CSS from your plugin so the text is white. I want my text on login page white but not on this login sidebar...
Great job! I had a client that wanted to allow users to login, but needed to integrate the login page with the site design. This is exactly what we were looking for.
I've been looking for this very thing! Found it at last!
I have a Big trouble....
I use register plus plugin (http://skullbit.com/wordpress-plugin/register-plus/) but when BM CUstom Login is enabled no "validation emails" are sent to new users... with BM Cus loguien is off everythings go by mail Fine..
How Can I solve this?
Hi Ben
Is BM Custom Login suitable for Wordpress 2.6.1. If not when will it be available. I am currently using it on WP 2.5.1 but don't want to fall behind in the WP upgrades.
The button to sign on is still WP blue. Do I change this in Wordpress - color-fresh.css?
Hi Ben,
I think I'm having the same problem that Venesa was having. Did you ever figure out what the problem was and what the solution is? Thanks.
Mauricio - I would suggest not using the custom login plugin if it's breaking something else. I have no idea what the issue could be but bm-custom-login doesn't touch any of the emailing functionality. All it does is add a couple of style sheets to the administration page.
Everyone else - in my tests the plugin works fine with wordpress 2.6, I don't know what problem you are talking about it looks as intended. If you mean customising the login button colour then that should go in one of the css files in the plugin. The whole point of the plugin is that you don't edit core wordpress files (such as css-fresh.css) as these get overwritten when Wordpress is updated.
Maybe you are right.. Maybe the guilty would be phpmail or what is wordpress using for sending validation mails.
Thank you, I´m still looking for help
Hi Ben
I noticed your latest coment #119 says not to change the wp css files. Can you have a look at my login screen at http://catchronicles.net which is now online. I just don't know how to change it unless I change the wp css file. Roland says he may be having the same problem. Is anyone else?
Also I am not sure what this means in your DoFollow if I add the website - "will now get some link juice from Google when you comment and supply your site url".
Thanks so much for your help.
Mauricio - post again if you work out what the solution is. I can't see how it could be my plugin but if it is then I'd like to get it fixed.
Venesa - if you want to customise the button then I would suggest changing one of the plugins css (wp-content/plugins/bm-custom-login/bm-custom-login-2.css) files instead of the wordpress fresh css file.
Yes, I THink that the plug in has not anything to do with my problem. I think that the problem is related to the function of the going out mails of phpmail(). Now I´m using SMTP plugin for wordpress to see if this helps.
Thanks ben! It helps me alot. I am making a memebership site to provide people our stock market tips and free stock pick. I am trying to looking at a custom look login page awhile. Fortunlatey, I find your plugin. Once again thank Ben!
sir, you are THE MAN! I am so thankful for this plugin!
Hi,
May I know what happens after you login? Do we still see the default wordpress dashboard? Can we customize that?
hs - it's only for the login screen. Everything else remains the same I'm afraid.
I see. Thanks, Ben!
Great tip !
Like it ..
Thanks ..
I am using the wordpress 2.6.2 version. i was using the custome login before and it was working file.now when i upgraded the wordpress logo still appears inspite of the background image which i have uploaded.
please let me know what to do.
thanks.
i'm facing a big problem here..after installing this plugin i cant even login to my blog..evrytimes i login it will redirect me to the login page..plzz help me..plzzzz
If you're having problems with the plugin then just login to your ftp and delete the files, but I really doubt the issue is this plugin as it doesn't affect anything like that.
Hey Ben, thanks for the plugin. I changed some of the CSS as the text was getting broken and lost padding with german language settings. It should look exactly the same but work with a longer "Lost your password?" string.
#nav {
background:url( images/login-bkg-bottom.png ) no-repeat bottom left;
width:380px;
height:45px;
margin:0 0 0 -5px;
padding:0 0 0 28px;
}
I removed the text-indent and did the job with margin and padding.
cheers
For the life of me I cannot get this to work on WordPress MU. There are post that I've found where people say "modify a core file to make it default for all blogs, etc" but they never say what core file. As for "change the php file to point to the mu plugin DIR" ... that's already there.
I am so confused!
I'm having a problem with this plugin on Wordpress 2.6.2. Whenever I have the plugin installed, my custom login screen is broken and the wordpress logo is still displayed. It used to work great, but not anymore. What happened??
check out an example image of this problem here:
http://www.justinflood.com/picture1.png
Me too.
After upgrade to 2.6.3, i have problem with login css.
U can see it into http://www.portogaspar.com/wp-login.php
To Jason:
Place the Plugin in the plugins folder, not mu-plugins. Then get Plugin Commander and set the Custom Login plugin to auto-enable, and then hide the Custom Login plugin from the blog owners, all are settings in Plugin Commander. Don't edit core files unless you have to, but you shouldn't for this.
To Justin Flood:
Unfortunately, it seems that when you update to Wordpress 2.6.2 or higher, the Custom Login Plugin, loses it's CSS priority, or maybe can't find it. The CSS file from the updated Wordpress you installed takes over, but the plugin still tries to force the image in there, that is why the Wordpress logo is in there, with your login image and the padding is all screwed up. It might have something to do with hooks missing in the newer Wordpress. Hopefully an update will come.
Thanks for the tips Rich
It looks like i will have to look into the issue with WP 2.6 not liking the css files being included. I shall update everything as soon as I can
There is a formatting problem with mine... Is there a way to shift the login fields a bit down..?
Thanks.
What do you think, when will a new version be released?
Hi Ben!
I'm just posting to let you know that BM Custom Login uses some deprecated function calls, namely 'get_settings' which has been replaced by 'get_option'.
A simple search-&-replace will sort it out for you, and avoid filling our deprecated call log.
Thanks for your time and effort!
@Gustavo
You seem to have it working at the URL you provided. What did you do to fix it?
Anyone get this to work on WP 2.7? When I downloaded the two images, one a PSD template, and the other a bottom gif, it appears the PSD template is 2-3x too big compared to the square-ish box WP uses. The top and bottom images dont really line up when you upload your custom images. Also, how do you change the background wallpaper and the login button/hyperlink colors on the login page? They are currently default WP blue. Thanks.
This worked fine for me untill 2.7. I get a white border and slight layout breakage. I'm sure your aware of this, but thought I'd report it anyway
Great plug-in
I installed Recaptcha on Wordpress MU, it works correctly. There is
however an issue...... For some reason my login page http://www.realfam.com
(then click on log in on right sidebar) is all askew now. It seems
that even though recaptcha isnt being used on that page directly it
has made the fields wider and hanging the appearance. Others have
experienced this. Is there a fix?
Hi Ben,
Awesome work on the plugin, but as mentioned above, 2.7 has broken something with the CSS on the login page.
I also get the white border and a slightly shifted layout.
Sorry to be the bearer of bad news!
Thanks for your efforts.
Simon
Wordpress 2.7 'border problem'
To get rid of the white border simply go to login.css (wordpress\wp-admin\css\login.css), open it and remove one line:
border: 1px solid #e5e5e5;
from:
form {
margin-left: 8px;
padding: 16px 16px 40px 16px;
font-weight: normal;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 5px;
background: #fff;
border: 1px solid #e5e5e5;
-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
box-shadow: rgba(200,200,200,1) 0 4px 18px;
}
Everything should work afterwards.
Isn't this "border problem fix" reversed when upgrading WP version?
this is what fixed it for me.
instead of removing 'border: 1px solid #e5e5e5;'
i went into bm-custom-login-2.css and found
form {
color:#fff;
}
i then added 'border:none;' as a property and it seems to have worked.
everywhere else i have seen the first suggestion so maybe there is a reason for that.
so i'm not sure if it breaks something elsewhere in wordpress, but its fine for now.
Hey man, great plugin! I was trying to do this the hard way until I found it. One thing I noticed though; the end ">" was left out on the image tag for the custom header. Still, works like a charm! Thanks again