Skip to content

WordPress Tips and Tricks – Custom Login Page

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?

Wordpress Custom Login screen samples

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.

Let me know what you think.

Share

415 Comments »

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

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

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

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

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

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

  7. Pingback: | Technoweblog
  8. 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.

  9. The same problem like Darrin explained! GIF is “overlapping” PNG which looks very ugly if working with transparent pictures!!! Any idea???

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

  11. Pingback: 10 Plugins For WordPress To Help Administrative Duties
  12. 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.

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

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

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

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

  17. 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/blog/wp-login.php?action=register
    Thanks so much for your help :) Tracy

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

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

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

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

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

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

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

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

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

    • 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?

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

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

  29. 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:)

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

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

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

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

  34. hi!
    I would like to ask about the plugin version of this.
    is that plugin compatible with i18n or WPML?
    best regards.

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

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

I seem to find myself working with Youtubes thumbnail images quite a lot (for instance on Miniclips videos section) – and I am always having to go searching for the parameters to use to generate those thumbnail images. So I […]