415 thoughts on “WordPress Tips and Tricks – Custom Login Page Leave a comment

  1. Pingback: Branding Login Screen Wordpressmu! | sigidnugroho.com
  2. 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.

  3. 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

  4. 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.

  5. 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;
    margin:0 0 0 -5px;
    padding:0 0 0 28px;
    I removed the text-indent and did the job with margin and padding.

  6. 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!

  7. Pingback: Blog Roundup for the 25th of July 2007 :: Christopher Ross
  8. Pingback: My Favorite Community Building Wordpress Plugins | Scott Fish
  9. 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:

  10. Pingback: Aronil - Custom Wordpress Login
  11. 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.

  12. 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

  13. There is a formatting problem with mine… Is there a way to shift the login fields a bit down..?


  14. 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!

  15. Pingback: DNyap » Blog Archive » My Favorite Community Building Wordpress Plugins
  16. Pingback: Wordpress - Custom login page « Motikhavdi
  17. 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.

  18. 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 πŸ™‚

  19. 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?

  20. 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.


  21. 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;
    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.

  22. Pingback: Mommy’s Idea Book » Blog Archive » Custom Login Page
  23. 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 {
    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.

  24. 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

  25. Pingback: Complete Wordpress Theme Tutorial « Kolmex
  26. 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?

  27. 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..

  28. Pingback: Adding The “Cool Factor” To Your Website | WpBlogHost
  29. 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

  30. 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.

  31. 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!

    1. 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

  32. 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;

  33. Pingback: Plugin To:Customize/Change Your WordPress Login Page! | TechZoomIn
  34. 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;}

  35. 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/wp-admin/css/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?

  36. 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!

  37. 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,

    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;}

  38. 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.

  39. 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

  40. 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 πŸ˜€


  41. 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.

    1. 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.

  42. 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

    1. 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.

  43. 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 */

    .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 */

  44. 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;

  45. Pingback: 40+ Most Wanted Wordpress Tricks and Hacks | Overflowed Media
  46. 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?

  47. Pingback: WP Plugin: Customize Your Wordpress Login Page « iNK
  48. 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?

    1. 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?

      1. 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.

    1. 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

  49. 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.

  50. Pingback: Plugin: custom login page by Binary Moon | Best Wordpress Themes | Free WordPress Layouts
    1. 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)

  51. 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 πŸ™‚

  52. 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.

    1. 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 πŸ™‚

  53. 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 {
    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!

  54. 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.

  55. 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.

  56. Pingback: Unlimited New Useful Wordpress Tips,Tricks & Hacks - Themeflash : One Stop For All Your Web Resources
  57. 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

  58. Pingback: 10 Ways to Customize and Personalize your Wordpress Blog | Pro Blog Design
  59. 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


    1. 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.

  60. 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)

    1. 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.

  61. 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)!

  62. Worked great I just removed the width=380 line from #nav in the css files 2 and 3 and it all worked correctly!

  63. 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

    1. 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.

  64. 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!!

  65. 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.


  66. 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

  67. Pingback: Case Study: Creating a branded WordPress registration & login process
    1. 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.

      1. 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.

    2. I’ve recently been coming around to this philosophy: that plug-ins and the themes should be decoupled as much as possible. It’s part of the challenge when your core codebase keeps getting updated every few months. For those who prefer to do things the old way, I wrote a tutorial on how to make a custom login page for WordPress, but I very much like the idea of this plugin!


  68. 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.

  69. This is fantastic! Exactly what I was looking for. I will be adding a screenshot to my flickr group shortly. Thanks!

  70. 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.

  71. Pingback: January – Hopefully the start of a good year | NDE Designs
  72. Pingback: 65 Of The Best WordPress Tutorials « Junkiee.Net

Leave a Reply

Your email address will not be published. Required fields are marked *