jump to navigation

Try Firefox - it's faster, and more secure than internet explorer. It even has a cute little mascot.

Journal

Wordpress tips and tricks - custom login page

July 25, 2007 | Web Design

I was actually inspired to write this post because of a 9rules note I started recently. David Airey beat me to the punch with his own version and credit should go to ayushsaran for starting the whole thing but here is mine at last.

This one isn’t so much a tip or trick as a nicety. It’s cool to have the wordpress login page branded up as your own. This is more significant for multi author blogs, or sites you have set up for clients.

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, firstly 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 that is 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 approximately 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.

Comments »

  1. Hi Ben,

    Great work creating a plugin for the change! That’d most certainly help out when updating client sites.

    I’m not sure you’ve worded article right. You mention how I set up a Flickr stream, but I didn’t. Have you done that?

    Thanks very much for the mention, and sorry again to steal your thunder.

  2. 2. Ben
    July 25, 2007

    Hey David - thanks :) I’m now using this on my own sites, that’s really the reason I created it in the first place.

    Thanks for pointing out the flickr thing as well. I set one up (link above) and must have gotten confused when writing the post.

    Don’t worry about stealing my thunder either - I’m a big boy - I can handle it :)

  3. 3. Ayush
    July 25, 2007

    Awsome post Ben,

    Ive been looking to make a plugin for the custom login for a while but never got around to it.

    Ive got re-created wordpress login PSDs on my new blog
    www.dedestruct.com(still under construction). But you can grab them and post them here if youd like for people.

  4. 4. nbeyond
    July 25, 2007

    In fact, I was wondering why no customized login is available when I installed it. You did it. Thanks a lot.

  5. 5. Ben
    July 25, 2007

    Ayush - There is actually a template psd file in with the plugin, although I didn’t recreate the wordpress login screen… maybe I should. BTW I like the design on your new domain :)

    nbeyond - I guess for wordpress themselves it makes sense to not have branding options but for developers this sort of thing is nice to have I think.

  6. 6. Darren
    July 25, 2007

    I’ve styled the login page occasionally, but never considered a plugin solution to protect from future overwrites — great idea.

  7. 7. mary
    July 25, 2007

    Nice idea. I was thinking modifying mine and didn’t know where to begin.

    I just have a question. Is is normal when I want to download I end up on a 404 ?

  8. 8. Ben
    July 25, 2007

    Darren - thanks

    Mary - not normal no. I’m surprised nobody else has mentioned that the download doesn’t actually work :S Thanks for pointing it out - all fixed now.

  9. 9. Chris In Cincinnati
    July 25, 2007

    I just hacked the login screen for a client project and I’m certain that with the next upgrade I’ll overlook the image files in wp-admin.

    Thanks for the fix, one last chance to look like a doofus in front of a client!

  10. 10. Chris
    July 26, 2007

    I thought when I read David’s post yesterday ‘I’ll wait for a plugin’.

    Thanks for endorsing my laziness :twisted:

  11. 11. Ben
    July 26, 2007

    lol Chris - happy to oblige :)

  12. 12. Luke
    July 26, 2007

    You are un genius. We’re using WP as a little CMS at work for a few sites … exactly what we needed :) Thanks

    Also … the TMNT stuff I won just arrived :) Thanks mate

  13. 13. Ben
    July 26, 2007

    Wow - the TMNT stuff turned up - That’s really cool. I’d totally forgotten about that :)

    Glad this helps you as well.

  14. 14. Joe Anderson
    July 28, 2007

    It’s a shame that a certain OpenID plug-in I use messages up my wp-login.php pages - take a look.

    If anyone knows how to fix it btw email me at computerjoe [at] gmail [dot] com :)

  15. 15. Ayush Saran
    July 28, 2007

    @ Joe that sky blue box behind the “Wordpress User” and “OpenID Identity” is coming from

    http://joeanderson.co.uk/blog/...

    h2 {
    >>> border-bottom: .5em solid #e5f3ff;
    color: #333;
    font: normal 32px/5px serif;
    margin: 5px 10px;
    }

    get rid of that border declaration,
    change the text color to something lighter
    and remove the margin to align the text left or force align it center.

    That should clean up your login page

  16. 16. Todd Harrison
    July 28, 2007

    A nice touch. A custom login page ha! I think the best thing to do is to just make it and when you have your clients then just don’t tell them unless they ask. It’s a nice way to customize your wordpress blog. or maybe your just board with the normal login page. in any case I do enjoy it and will use it. Thank you

  17. 17. Alex
    July 30, 2007

    Awesome job. Downloading…

  18. 18. blogtantra.com
    July 31, 2007

    I loved the idea of getting fresh whenever we login.

  19. 19. Ben-Inside
    July 31, 2007

    Thank you so much for this tutorial. Come and watch my custom login page and say what you’re thinking about it.

  20. 20. Jermaine
    July 31, 2007

    Hey, great posting, i never actually wanted to change the login page, but when someone offers a post like this …
    :-) thanks

    btw - appreciate your “dofollow” - i think the same way.

  21. 21. Matt Brett
    August 8, 2007

    Awesome plugin Ben! I’ve done this myself in past, but it was such a pain in the ass having to go back and manually change it after every update.

    Thanks for including a stylesheet as well. I was easily able to add a few more selectors to style the “error” message, labels, input fields and links.

  22. 22. eric johnson
    August 9, 2007

    i’m with matt, i’ve done this in the past but i always dreaded upgrading and forgetting to reload the files or worse, back them up. great job!

  23. Wow, this is a great plugin and I will certainly recommend it to my student. Thank you and good work!

  24. 24. sergio ordoñez
    August 12, 2007

    Hello, I have the plugin installed and it works, but I would like to change the css for the text color.

    How I could change this?

  25. 25. Brad
    August 13, 2007

    I agree with these folks. Great resource. Thanks.

  26. 26. Kerry Webster
    August 14, 2007

    ~sergio~
    http://homteriors.kerrywebster...

    Download my css for this plugin for a few ideas.

    You can see the login page I created with the changes I made to the plugin and the css mentioned above here: http://homteriors.kerrywebster...

  27. 27. Kerry Webster
    August 14, 2007

    By the way, awesome plugin. I took it one step further (if you are trying to mask wordpress from your client). I changed the login image url to the current sites URL and I changed the text to say ‘Powered by ‘ the name of the blog (see code below). This is done without change to the core applicaiton. The following code can be added to the bm-custom-login.php in the plugin folder. Don’t get me wrong here, I LOVE WORDPRESS but if you want to mask this one instance of a link to wordpress.org this is how I did it.


    function change_wp_login_url() {
    echo get_option('siteurl');
    }

    add_filter('login_headerurl', 'change_wp_login_url');

    function change_wp_login_title() {
    echo 'Powered by ' . get_option('blogname');
    }

    add_filter('login_headertitle', 'change_wp_login_title');

  28. 28. sergio ordoñez
    August 14, 2007

    Thanks a lot Kerry :)

  29. 29. pban
    August 14, 2007

    Great job Ben - thanks for the plugin.
    Do you know if it works with Wordpress Mu?
    Cheers

  30. 30. Ben
    August 14, 2007

    Wow - thanks to all the great comments above :)

    Kerry - thanks for doing that - it’s given me some more ideas for the plugin, not sure how worthwhile they would be though.

    pban - no idea, I can’t see why it wouldn’t though, I assume they use the same plugin system.

  31. 31. bfnh
    August 16, 2007

    recently added it to my site as well, and spent _way_ too much time trying to make sure that the bottom curve was as perfect as possible. (rounded rectangle shape w/a 13px radius did the trick)

    i was originally responding to say that i added some css to the included file, but noticed that kerry provided some nice examples in #26.

  32. 32. SEO
    August 17, 2007

    I just set up a new Blog, and funnily enough the very first modification, plug-in, customization etc that came to mind was Ben’s custom WP Log-in.

    Thanks heaps for this Ben, i’ve created a themed log-in for my company and will apply it to all themes and installations i do.

    On a completely unrelated note, your blue Firefox Toolbar button up top reminded me i havn’t reinstalled the Toolbar when i done Firefox… So i had better click it and get installing. :)

    Carly,

  33. 33. Sinklar
    August 19, 2007

    I forgot to customize the login screen and now it is. Well, I didn’t use the plugin, but it’s done. :-D

  34. 34. mnrmn
    August 20, 2007

    am a bit sad. it’s not working with my WP installation – WP 2.0.11 using PHP 4.3.8.

    oh, well…

  35. 35. Paul
    August 21, 2007

    This is a great plugin. Thanks for sharing it.

  36. 36. qba
    August 24, 2007

    Thx :-)

  37. 37. couchmouse
    September 6, 2007

    Thanks Ben for your effort on this plugin. I am using it on my WP 2.2.2. Keep up the good work.

  38. 38. Jay
    September 9, 2007

    Ben,

    Is there a any way to change the background color of the login page? :) (I use black in my blog)

  39. 39. Jay
    September 9, 2007

    Ben,
    Nevermind, I see the css file now! You rock!
    “This is madness!”

    Thanks a lot

  40. 40. sascha/hdrs
    September 13, 2007

    Hi, would it be possible to add an option to this plugin so that it can re-direct to the blog’s index page instead of the admin area after somebody logged in?
    The reason for this is that we run a WP blog as a portfolio and visitors can log in as guests to see all works (because some are hidden to non-guests). But in this situation it is confusing for the guest to be taken to the admin area.

  41. 41. Kerry Webster
    September 16, 2007

    Add the code below to the bm-custom-login.php
    One drawback is every wp_redirect () call will go to your home page. If this is what you want it works quit well.

    [code]
    add_action(’wp_login’, ‘wp_redirect()’);
    function wp_redirect() {
    if ( $is_IIS ) {
    header(”Refresh: 0;url=$location”);
    } else {
    header(”Location: $location”);
    }
    }
    [/code]

  42. 42. Kerry Webster
    September 16, 2007

    Ooops!!! I left the $location assignment out of the first post.

    [code]
    add_action(’wp_login’, ‘wp_redirect()’);
    function wp_redirect() {
    $location = get_option(’siteurl’);
    if ( $is_IIS ) {
    header(”Refresh: 0;url=$location”);
    } else {
    header(”Location: $location”);
    }
    }
    [/code]

  43. 43. sascha/hdrs
    September 17, 2007

    Kerry thanks a lot! I will try that!

  44. 44. sascha/hdrs
    September 17, 2007

    Hmm, WP keeps telling me ‘Plugin could not be activated because it triggered a fatal error.’, even without the altered code in the php file.

  45. 45. sascha/hdrs
    September 17, 2007

    Correction: I caught the wrong file. It only gives me the error with the modified code.

  46. 46. Kerry Webster
    September 18, 2007

    @sascha/hdrs
    The code is working on my site now. If you want you can check my site. Create an account and then login to see the redirect go to the home page rather than the admin page. Be sure and get the code from post 42 (not 41), and make sure the [code] & [/code] are not copied. Let me know if this helps. If not I can e-mail my bm-custom-login.php if you would like to test it.

  47. 47. puttee
    September 20, 2007

    Hi,

    pretty nice plugin…but one question.
    Is there a way also to change the font color of text under the login “form” for
    * Login
    * Lost your password?
    * Back to puttee
    ???

    thanks

  48. 48. Jordan Parker
    November 3, 2007

    Nice one, im going to uses this now :D

  49. 49. ADAC
    November 4, 2007

    Nice tip, we have a few wordpress blogs at my office and we were just talking about how boring our login is.

    Thanks For the tip.

  50. 50. room34
    December 19, 2007

    This is very cool. Exactly what I was looking for.

    A couple of things about the mod to make the login redirect back to the site main page instead of the admin dashboard:

    1) There’s a bug in the add_action line. It should read:

    add_action(’wp_login’, ‘wp_redirect’);

    In other words, remove the () after wp_redirect.

    2) Here’s a fix to the problem of this code ALWAYS making wp_redirect() send you to the home page. Just wrap the wp_redirect() code in a conditional that checks the current script name. Here’s how I’ve implemented the code on my site:

    if ($_SERVER[’SCRIPT_NAME’] == “/wp-login.php”) {
    function wp_redirect() {
    header(”Location: ” . get_option(’siteurl’));
    }
    add_action(’wp_login’, ‘wp_redirect’);
    }

  51. 51. faze one studio
    January 9, 2008

    hello, i have uploaded your plugin but have no clue what it doeas. however if you simply overwrite the two images in you admin folder will do the sam effect….

  52. 52. Ben
    January 9, 2008

    faze one - you’ve missed the whole point of the plugin. Yes, you can just overwrite the images, but when you upgrade the images will be overwritten again. Using the plugin it will always stay the same.

  53. 53. faze one studio
    January 10, 2008

    Ah yes! if you require to re use the stock images…but good plug in none the less…

  54. 54. thomas
    January 15, 2008

    Thanks for this one … working great !!! 1 minute and i have my own login screen :-)

  55. 55. DUI
    February 20, 2008

    This is a heck of an idea! I had honestly never even thought of customizing the wp login page. Brilliant find. Thanks!!

  56. 56. jullian
    February 20, 2008

    hi

    the download link of the plug in is not working , any advice?

  57. 57. Ben
    February 21, 2008

    Hi Julian - thanks for pointing that out - looks like wordpress.org have changed the download locations around. That’s what I get for direct linking to something I can’t control I guess :)

  58. 58. jullian
    February 21, 2008

    it is working now Ben
    thanks :)

  59. 59. Denis
    February 25, 2008

    Hi,

    can you tell me how i can change the background-color (or fill with a background-image) behind the LOGIN?

    Only white is a little boring.

    thanks & cheers
    denis

  60. 60. Tim Kissane
    February 28, 2008

    Ben, great blog and terrific tutorial! I love to see folks share their knowledge.

    @Denis: Try editing the 2nd body tag in wp-admin/wp-admin.css (at line 127 in my file).

    body {
    background: #000000;
    color: #000;
    margin: 0;
    padding: 0;
    }

    I added the background and color parameters.
    An image could be added by specifying the url for the background. You can see my login page by visiting http://timkissane.com and clicking login. ;-)

    Of course, this will have to be added back after an upgrade. Ben, can this be added to the plugin?

    Peace.

  61. 61. Ben
    February 28, 2008

    Tim - I am actually holding off on updating the plugin as Wordpress 2.5 will change everything anyway (what with the admin redesign).

  62. 62. Tony
    March 18, 2008

    Any chance the plugin will be updated for WordPress 2.5?

  63. 63. Ben
    March 18, 2008

    Not sure yet. The whole control panel has changed which will mean this is a bit on the awkward side. Will have to think about how it will work… :S

  64. 64. Jamie Oliver
    March 20, 2008

    Great plugin you have there, it has made it a lot easier skinning the login page. Cheers.
    And also thanks to Kerry for posting that PHP script.

  65. 65. Kerry
    March 22, 2008

    room 34 (comment 50) needs some love for his update as well. Much cleaner redirect based on current page.

  66. 66. William
    March 25, 2008

    hey ben,

    I’m using wordpress 2.5, and this does not work. I love this plugin, and want you to update it. If you do, can you email me?

  67. 67. Ben
    March 25, 2008

    William, and anyone else interested in a 2.5 version. I currently have no idea how the 2.5 version would work. The styles in 2.5 are totally different and currently no background image is used at all. It must be possible but it will be very different to what I had before, I need to think on this.

  68. 68. Kerry
    March 31, 2008

    BRANDED LOGIN SCREEN
    WordPress 2.5 compatibility.

    http://www.kerrywebster.com/?p...

  69. 69. Jonathan Blundell
    March 31, 2008

    looks like the login busts with Wordpress 2.5 I haven’t had time to play around with it yet, but if you come up with a solution I’d love to know

  70. 70. Ben
    April 1, 2008

    Kerry - Thanks :)

    Jonathon - There’s actually a new version released that works with WP 2.5 - I just haven’t written about it yet.

  71. 71. Jacob Cass
    April 3, 2008

    For Wordpress 2.5 I wrote about how to do this manually by editing the CSS over at my blog here:

    http://justcreativedesign.com/...

    I also linked back to here :)

  72. 72. mac
    April 7, 2008

    great job guy ,
    can you please tell me how i can resize the frame. lets say 390 x 900. how would i modify that input. ..

  73. 73. Ben
    April 7, 2008

    Mac - I am not sure what you want to do. Could you try to explain a bit more completely?

  74. 74. Blue
    April 12, 2008

    just built my login using your plugin and tips. thanks!

  75. 75. Lionel Chollet
    May 3, 2008

    Hello,

    thanks for this plugin!

    If your WordPress install is located in a subdirectory at your domain (e.g. yourdomain.tld/yourwordpress) but your blog address is at just “yourdomain.tld”, you may want to modify line #41 in bm-custom-login.php, from:
    ` echo get_option( ’siteurl’ );`
    to:
    ` echo bloginfo(’url’);`

    If you don’t modify this line, clicking on your logo on your custom login page might trigger an error 404 (page not found).

  76. 76. Michael
    May 15, 2008

    Hi!
    I use your plugin for a customized login at my page. In Firefox it works well, but in Internet Explorer 7 there´s no footer in the login form. Any ideas how to fix it?

  77. 77. Ben
    May 16, 2008

    Lionel - thanks for letting me know. I will modify the plugin accordingly :)

    Michael - I didn’t realise there were issues with IE (I’m not surprised though :S ), I will take a look.

  78. People who link to this post...

Leave a message tell me what you're thinking

Please feel free to comment - I like receiving them - however I would appreciate you using your real name. I am not here to improve your search engine ranking. Abusive/ Inappropriate posts and advertisements will be deleted.

Binary Moon