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 ›
I managed to fix the issue with white border, but for some reason on Google Chrome, it displays the login with light gradients around it.
Also when I'm loading the login page, it downloads the original Wordpress login then covers it with my custom login after it downloads. Having a glimpse of the Wordpress logo and then mine is a bit.. silly. I was wondering if there was a work around for this?
Hi,
Great Plug in...it seems when I log out no matter from what account, I get an error message that says
"You are attempting to log out of
Please try again."
Have you seen this before? separate white page that comes up on a while page and the words and Please try again is a hyperlink. If I click, it may go back or log out...I cannot find a pattern.
Thanks for any thoughts..
A
great plugin. I'm having one small problem though. how do i change the "register" link and "lost your password" link to a white color? Any help would be appreciated.
here's my login page:
http://www.truegameheadz.com/blogheadz/wp-login.php
-Thanks
Gerard,
Go to the same file in which you removed the border (wordpress/wp-admin/css/login.css) and change the font color for "label" from 777 to FFFFFF
So is it 2.7.1 compliant now? I tried it a few weeks ago on a 2.7 site - and did not have luck.
But I am not CSS expert.
I also wish that this custom login plugin was 2.7.1-compatible without having to change the CSS every time that WP is upgraded. Unfortunately, I am not a PHP expert. Is there any way to make this plugin continue to work even after a WP upgrade? Thanks!
Hi, i love this plugin!
but i change my blog to php5 and now i have this error:
http://www.smr.info/bmcustomlogin.gif
Any tip on how to fix the custom login?
greetings Jo
Hi Ben this is a great plugin. are you continuing development?
I really need to put some time into this. I had heard rumours that the customised functionality would be added to WordPress 2.8 but since that doesn't seem to be the case anymore I think I shall look into updating the plugin so it works with WP2.7+ soon
hi MemberWP,
I`ve also faced the same problem but i`ve fixed it by editing the login.css file in wp-admin/css folder. there u have to remove all the borders.
---------------------------------------------------------------
something like this down here:
---------------------------------------------------------------
* { margin: 0; padding: 0; }
body {
border-top-width: 30px;
border-top-style: solid;
font: 11px "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
}
form {
margin-left: 8px;
padding: 16px 16px 40px 16px;
font-weight: normal;
}
form .forgetmenot { font-weight: normal; float: left; margin-bottom: 0; }
#login form .submit input {
font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
padding: 3px 10px;
border: none;
font-size: 12px;
cursor: pointer;
text-decoration: none;
margin-top: -3px;
text-shadow: rgba(0,0,0,0.3) 0 -1px 0;
}
#login form p {
margin-bottom: 0;
}
label {
color: #FFF;
font-size: 13px;
}
form .forgetmenot label {
font-size: 11px;
line-height: 19px;
}
form .submit { float: right; }
form p { margin-bottom: 24px; }
h1 a {
background: url(../images/logo-login.gif) no-repeat top center;
width: 326px;
height: 67px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}
#nav {
text-shadow: rgba(255,255,255,1) 0 1px 0;
}
#backtoblog a {
position: absolute;
top: 7px;
left: 15px;
text-decoration: none;
}
#login { width: 320px; margin: 7em auto; }
#login_error, .message {
margin: 0 0 16px 8px;
}
#nav { margin: 0 0 0 8px; padding: 16px; }
#user_pass, #user_login, #user_email {
font-size: 24px;
width: 97%;
padding: 3px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #e5e5e5;
background: #fbfbfb;
}
Hi - I was having some problems with all the new CSS compliant features of Wordpress 2.7.x so here's how I 'fixed' this plugin.
--------------------
In your bm-custom-login2.css file simply add the following to the bottom of the css file:
--------------------------
form {color:#fff;
border: none;
-webkit-box-shadow: none;}
label {color: #FFFFFF;}
#nav {text-shadow: none;}
.login #nav a {color: #FFFFFF !important;}
Hi Ben,
Thanks for this great plugin!
I am having a problem with a border around the form which will not go away.
Here is my login screen: http://www.bcradvertising.com/wp-login.php.
The CSS which draws that line is in http://www.bcradvertising.com/.../login.css?ver=20081210.
I have removed the border= code from login.css, but it's still appearing.
Can you (or someone on this board) please tell me how to truly remove that border?
Thanks!
-Josh
John brilliant thanks fixed it for me was trying to figure it out for an hour until I spotted your post!
Also Brilliant plugin Ben Thanks!
Ben,
Thanks so much for the personal reply to my question about removing the white border on the login screen.
I wanted to post it here to help others...
Thanks again,
-Josh
In your bm-custom-login2.css file add this to the bottom of the css file:
form {color:#fff;
border: none;
-webkit-box-shadow: none;}
label {color: #FFFFFF;}
#nav {text-shadow: none;}
.login #nav a {color: #FFFFFF !important;}
Any progress on 2.7.1 compatibility?
you can actually dupe the wp-login page into a template file within your theme folder. make sure to give it proper header required for template pages. then go to "add new page", make a page title "login" or whatever, and then choose the theme file you just uploaded from the "page template" area, in the attributes box. final key thing is to note the permalink of this page, mine was "/login/".
then you have to make a few small edits to the scripts to make the page work, and there's a lot of code to avoid and be knowledgeable of before getting too frisky.
the edits to turn this into a template file:
right at the top: require /wp-load.php, change that to be ABS_PATH . 'wp-load.php'.
next search/replace all instances of "wp-login.php" with your permalink, without leading slash, mine was "login/".
after that, go crazy. i renamed my wp-login & wp-register files in the core directory just to be sure that they weren't handling the script processing. it takes a bit of comfort with PHP, but this can easily be styled to act like all of the other pages in your site, and should require no problems if you update your wordpress version, especially handy with new auto-update feature.
Hey,
Loving the plug in but have one slight problem.
None of the CSS files seem to be activated, hence I cant change anything like text colour or positioning.
Is this a problem with 2.8 or is there something I am missing.
Any help would be much appreciated - I cant believe how many years I spent editing my WP-logon file oblivious to this plug in
-- Simon
Actually, My bad.
The CSS was updating, the problem was that I kept viewing a local cached copy of the login screen. All I had to do was delete temporary internet files and I can see everything
THANK YOU FOR AN AWESOME PLUG IN!!
Hi!
I use WP 2.6.5 and hesitate upgarind 2.7 for my some reasons.
But when install BM custom login 1.4, the login page became only white background...
I search 1.3 but nowhere source.
Please upload old versions.
I am afraid I don't have any old versions of the plugin. I would recommend upgrading the plugin regardless as it hasn't changed that much and should be backwards compatible. I would also recommend upgrading WordPress, the security features and new dashboard make it a worthwhile thing to do.
hey ben, first off very well done! the idea is genius!
i've been using it for a while on one of my sites OnThisIsland.com and it looked awesome! but now its just white.
any help or reasons as to why!?
thanks again
Did you upgrade the plugin through WordPress? If so it might have deleted your "login-bkg-tile.jpg" file in "/wp-content/plugins/bm-custom-login/images/". I had the exact same issue myself.
Hi Ben,
To avoid display problems in WP v2.8 the css styles must be modified in the following way:
#login form {
margin-top: 0px;
border-style:none; /* replaces border:none that is ignored by Firefox v3.5 */
-moz-box-shadow:none;
}
.login #nav a{
color:#FFFFFF !important; /* added to override default colour */
text-shadow:none; /* added to remove shadow */
}
#login form .submit input {
margin-right: 11px;
background:#3C8D6D none repeat-x scroll left top !important; /* override Firefox and replace background colour of the button with YOUR CUSTOM colour (you may want to change the colour or to use a gradient image instead of the colour) */
border-color:#86cdb1 !important; /* override button border colour with YOUR CUSTOM colour */
text-shadow:none !important; /* remove button text shadow */
}
#login form .submit input:hover {
border-color:#FFFFFF !important; /* override button border colour with YOUR CUSTOM colour on mouse hover */
}
Hi Ben,
One thing more... To avoid box shadow in the middle of the login form when viewd in Safari and other webkit-based browsers, one should add: -webkit-box-shadow:none to #login form. So, finally it should look like:
#login form {
margin-top: 0px;
border-style:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
thanks for the pointers. I shall add this to the next release
Love the plugin...
The image used to work on my website but now just the bottom image works. The other image is now just a white box.
How do I fix this?
Fails in 2.8 now? Any thoughts on how it can be fixed or is it not 2.8 specific?
Doesn't work correctly in 2.8.2
Pls help.
Hi,
I noticed that this plugin isn't compatible with Wordpress 2.8.x
Are you working to fix it or I have to deactivate it?
I am using it on my test site with WordPress 2.8. I can't see any reason why it wouldn't work properly. Could you link me to your login page so I can have a look?
I just can't seem to figure out how to remove the Wordpress overlay.
I assumed that in the sample I would use one of the laters you had set up. The big white box said do not edit so I keft it there. I deleted the WP later and used one of your other layers. Put my color and image and text on it.
Looked in the CSS files but couldn't tell if I should leave them alone or put a pound sign in front of the command. I still see the big WOrdpres logo on the screen.
Using WP 2.8.6 and FireWorks for image editing.
BM Custom Login + sabre = http://oziblog.ru/wp-login.php
Hi Ben,
this is the login page:
http://www.lesenfantsterribles.org/wp-login.php
René
A ha - my guess for why those pages are blank is that the images seem to get removed when you use WordPress built in plugin updater. Currently the only workaround I can think of is to store the background image somewhere other than the plugin directory but I am not sure how we should manage that so that it's the same for everyone.
If you reupload your background image then it should still work
YES! You take the point.
I deactivate the plugin, downloaded it again from your site, uploaded with my images and... TADAAAA it works!
Good job.
René
I have done the same as Q-design, but still doesn't work normally - pls help.
I have tryed 1.4 with wp 2.8.2 - doesn't work: http://oziblog.ru/wp-login.php
1.3 with wp 2.6.2 - works: http://oziblog.ru/2/wp-login.php
Help pls with version 1.4 on 2.8.2 pls - what should I do to make it work?
Hi Liko - I wonder if the problem is to do with the fact you are using translations. I have noticed in the past that translated versions of wordpress don't seem to register the version number correctly. Looking at the source code for the page the wrong css file is being included in the site, and the css file is chosen based upon the version number
Could you try renaming the file bm-custom-login.css to something like bm-custom-login.css.backup and then renaming the file bm-custom-login-3.css to bm-custom-login.css and then the page should load the correct content. Hopefully it will then work as expected but we now need to work out how we can make it work when you upgrade in the future. I wonder if we will need to file a bug report or something (assuming it is a bug with WordPress and not a bug with my code)
Any translations are in wp-content>>languages
The version of the wp is hide for the most same.
I did what you have said and now everything is OK. Thx!
1 more thing: as I can remember, the plagin didn't upgreded automaticaly - zip was downloaded but I had to unzip it myself.
Any way, thx very much for your plagin
How about making it so we don't have to use a jpg? My logo optimizes better as a gif - MUCH smaller than just using jpg format, which is really for gradients and photographic images.
I'm not convinced optimization on a page used as rarely as the login page is that necessary but if you want to change it you can always modify the css file yourself
I found out how to fix the drop shadow display issue in WordPress 2.8.3. Basically, WordPress has added some new CSS to the login. The issue is with the drop shadow. To delete the drop shadow, add the following code at the bottom of the "bm-custom-login-3.css" file, foud in "ROOT > wp-content > plugins > bm-custom-login > bm-custom-login-3.css":
/* Makes Login Display Correctly in WordPress 2.8.3 */
form {
color:#fff;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-khtml-box-shadow: none;
box-shadow: none;
}
label {
color: #FFFFFF;
}
#nav {
text-shadow: none;
}
.login #nav a {
color: #FFFFFF !important;
}
I am using WordPress 2.8.3 and it works. http://baneydesign.com/wp-login.php
Hope this helps!
Adam
Hello Ben, is your plugin stable now for latest Wordpress? Also how would I prevent the 'register' link from showing on login page. I need to keep 'register' optioned in my WP dashboard but dont want it on general view but more of a 'by invite' only. If you or someone can answer this then I'll download the plugin & give it a try! I'm already in conact with my theme designer to figure out how to remove the register link from the meta section of the sidebar.
Thanks for the new login option. I am a Nbee. Im having trouble with it working though. The WP logo is covered but I cannot change colors to fonts, backgrounds and so on. How is this done? Look forward to your answer.
Thank you very musch for this very usefull information
i'll follow the step then i'll out it in my bog eadoking.com
thanks again bro
hi!
i wish that u can have the image template in pdf so any graphic editing software can import it. right now as i'm using inkscape, not photoshop, i cant open it
thx
nuhaa
Hi Nuhaa - can you really import pdf into anything? I've never given out images in that way before. I can understand why you're asking this and will think about other solutions. I'm not convinced about pdf but perhaps png would work ok.
Not the best plugin I have used and there is to much extra editing and mucking around involved for this to be a useful plugin (sorry but that is how I feel)
Hi Jason - sorry you feel this way. Could you explain what you dislike and how you would change it? With some constructive comments maybe I can make it work in a more usable way so that it satisfies your requirements.
For some reason, commenting out the width=380 line for #nav in bm-custom-login-2.css and bm-custom-login-3.css fixed a problem with the bottom bar not lining up with the form upper area for me.
Latest WordPress 2.8.4.
Thanks for the plugin -- it's just what I needed and I don't mind a bit of tweaking (as long as it's css)!
That sounds quite strange. I will have a look to see why that change make's a difference
Worked like a charm! Thanks for the plugin!
Worked great I just removed the width=380 line from #nav in the css files 2 and 3 and it all worked correctly!
For some reason I can't even get the sample image to overlay the original Wordpress login screen. Here is an example:
http://img208.imageshack.us/img208/1073/brokenf.jpg
I am missing something?
thank you so much for this very nice plugin, ben! it's exactly what i need.
quick question tho.. i've been getting a message just below the login area. it wasn't there when i tested it in my localhost. i don't think it's anything serious, but it looks messy
can you tell me how to remove this message:
PHP Warning: is_dir(): open_basedir restriction in effect. File(/wp-content/mu-plugins/) is not within the allowed path(s): (c:/Inetpub;c:/HostingSpaces;c:/Windows/Temp) in C:\HostingSpaces\alicesite\alicewebsite.com\wwwroot\news\wp-content\plugins\bm-custom-login\bm-custom-login.php on line 19
This could be a problem with WPmu - I haven't tested the plugin with that I'm afraid. Will add it to my todo list.
how odd, i'm not using WPmu. :-/
Hey Brian
I keep getting a wordpress log in overlapping my custom job:
example: a9fb0b8b9e32
Ben,
Is there a generic .psd template that has no text or logos added to it? I saw where you mentioned there was one in the Flickr group somewhere but I was not able to find it. Would love to have one.
By the way, I love your plugin, thank you!!
Hey Brian,
Just realized I never posted my sites to display the problem..
Here are two examples:
1.) http://collegeskim.com/wp-admin
2.) http://fauskim.com/wp-admin
I'm having the same problem...
Hi Ben,
What an excellent idea. It was not quite what I was looking for, but I will definitely remember your plugin for eventual later use.
Michael
Hey man, this is grate plugin, works grate for me!
Thanks
I just noticed two very minor issues in the readme.txt file. All the steps are "1. " also shouldn't "/wp-content/plugins/bm-suctom-login/images/" be "/wp-content/plugins/bm-custom-login/images/". (Notice it said "suctom" instead of "custom".) Another one is that for some random reason you have a "`" on the first step of the installation & this is in both the readme file as well as in the plugin directory.
One last note the second error is also on the page for the plugin in the plugin directory. You can see it here
One last note please fix your plugin to be truely compatible with WordPress 2.6 since it isn't yet. The following post explains what I'm talking about.
http://willnorris.com/...pet-peeve-hardcoding-wp-content