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

  1. Pingback: Wordpress Plugin Collection and Recommendations | Wordpress Hosting India
  2. 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

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

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

  5. Pingback: Custom images on wp-login wordpress login screen
  6. 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

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

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

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

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

  11. Pingback: Customized WordPress Login » Amor’s Blog
  12. 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

  13. Kerry – Thanks 🙂

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

  14. Pingback: Kerry Webster - ‘Branded Login Screen’ Plugin
  15. 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. ..

  16. Pingback: Custom Wordpress Login Plugin | The Aang Supriatna's Blog Area
  17. Pingback: Customize your Wordpress login
  18. 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).

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

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

  21. Yes Ben, Unfortunately I just upgraded WordPress to version 2.5.1 and now my log-in screen using BM Custom Log-in in IE is now wack.

    It works fine in Opera, Firefox and Netscape, but the login-bkg-bottom.gif doesn’t align properly anymore in IE. You can take a look at my web site at 117reunion.com to see the problem if you like.

    I am wondering if it is a possible code change that needs to be made to the wp-login.php file?

    Thanks!

  22. Hi Ben –
    I installed your plugin last night, and I am having the same issues with the background at the bottom that the last couple of posters are. It looked great in FF, Opera, etc., but it was shifted over in IE6.
    I played around with it a bit, and finally fixed it in IE6, but the changes broke the layout in the rest of the browsers, so I had to undo them.
    Have you had a chance to look into what is causing the shift in the footer area?
    Other than that issue, I really love being able to customize my login screen. Thanks!

  23. Hi Kim – I haven’t had a chance to look at it yet but it’s on my todo list. Hopefully I will get it working tomorrow. If you use wordpress 2.5 then you can use the automatic plugin update notifications to find out when I update the thing.

  24. We love the plugin but it now breaks in 2.5.1, ecoflock 1.1.4. Seems similar to comments #78, #79.
    again, we LOVE the plugin!
    aloha

  25. I’ve updated the plugin with support for wordpress 2.5.1 and a fix for Internet Explorer. Let me know if there’s any other problems.

    Brent – I have no idea what ecoflock is?

  26. 1.5? I doubt it but if it does you should just upload as you would a regular theme.

    You really should upgrade though, the extra features and security fixes are more than worth the effort. FWIW I don’t support anything less than 2.3

  27. Brilliant job Ben. The upgrade was seamless except for it removing my own personal log-in image and replacing it wit the default one. Good thing I save a copy of it on my computer. Maybe in the future on automatic upgrades done through the Word Press you should have it so that it doesn’t remove the user’s own images.

  28. Actually i just realized there is a small sliver missing now from the top of the log-in button in IE, but it is not an issue.

  29. This is an interesting conundrum, I am not sure what to do here. The problem is that the files I update will be downloaded by people when they first install the plugin, so they need something to show… maybe I should just rename the files and hope they realise what is happening.

  30. ^^ I agree with Marc. I’m glad I read that post before automatically upgrading or I would have been a bit irritated. 😉

  31. To me the simple solution would seem to be that you create two sets of the plug-in for download.

    The first one is available for download to new users and the second one is an upgrade version for either automatic or manual upgrade which does not replace the login-bkg-tile.jpg file in the imgs directory.

    Two download links. Seems easy enough, but I don’t know.

  32. I keep my custom images in another folder and just update the path in the css after upgrades. Maybe you can store that path in the Database and on a new install it will have the default images path, then once someone customizes they change the path. The upgrade should not overwrite the path in the database. You would have to create an admin screen to set the path and also some instruction on the page directing people to put custom images in the themes image folder. Maybe too much trouble…just some simple user training may be the answer.

  33. Wrong instructions. ”Create two images (login-bkg-tile.gif and login-bkg-bottom.gif) and then stick them in the wp-admin/images/” This does not work. you have to place the images in the plugins image folder. However this does not delete the WP LOGO. The logo is still on top of the custom image. Where do I delete the WP LOGO ?

  34. The redirect after login does not work for me!

    I have the following code in bm-custom-login.php:

    add_action(‘login_head’, ‘bm_custom_login’);
    add_filter(‘login_headerurl’, ‘change_wp_login_url’);
    add_filter(‘login_headertitle’, ‘change_wp_login_title’);

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

    Anything I did wrong here?

  35. Image template and non- PhotoShoppers
    Amazingly useful template, but the ‘.psd’ image template file excludes those without these programs. I noted that the image was 390 px by 700 px with 10 px rounded margins. I recreated this and loaded the ‘.jpg’ to my file and it worked great (except the hint of misaligned rounded border at bottom).
    NOTE: I look forward to universal adoption of CSS rounded corners — that will make all our lives much easier.

  36. Hellows – oops. I will fix that soon

    Jinsoo – I will see if I can add something like this to the plugin by default also hopefully it will work in the future.

    Mike – I realise the psd template excludes people without photoshop but like you say, it’s not hard to make your own. I am afraid I’m not going to start making new templates for other software but if you want to contribute one I’d be happy to include it and credit you.

    And yes – consistent rounded corners in all browsers would be great 🙂

  37. Love the plugin, have it running on our site – wp 2.5.1 – too easy to set up. It does however dissemble and overlay the top part of the new graphic with the original WordPress logo when I use with wp-security-scan.

    Will pass this along to other developer as well.

  38. the issue with this plugin and security scan is because of line 24-36 version check.. if you are running full version of WP short is fix
    replace
    [code]
    // check which version of wp is being used
    $blog_version = $blog_version = substr(get_bloginfo(‘version’), 0, 3);
    // split style sheets based upon current wp version
    If ($blog_version >= $versionCheck) {
    $pluginUrl .= ‘/bm-custom-login-2.css’;
    }else {
    $pluginUrl .= ‘/bm-custom-login.css’;
    }
    [/code]

    with
    [code]
    $pluginUrl .= ‘/bm-custom-login-2.css’;
    [/code]

  39. I made some changes to your plugin that allow for a javascript file to be included in addition to the CSS file. I was able to do a lot more customizing with this.
    you can see it here. http://wordpress.justechn.com/wp-login.php

    // full plugin path
    $pluginUrl = get_settings(‘siteurl’) . $pluginPath . plugin_basename(dirname(__FILE__));
    $scriptUrl = $pluginUrl;
    // check which version of wp is being used
    $blog_version = $blog_version = substr(get_bloginfo(‘version’), 0, 3);
    // split style sheets based upon current wp version
    If ($blog_version >= $versionCheck) {
    $pluginUrl .= ‘/bm-custom-login-2.css’;
    $scriptUrl .= ‘/bm-custom-login-2.js’;
    }else {
    $pluginUrl .= ‘/bm-custom-login.css’;
    $scriptUrl .= ‘/bm-custom-login.js’;
    }

  40. Pingback: SpiderMarket » Great Wordpress Plugins for Magazine Developers
  41. Can anyone tell me how to change the input box color, i mean like username box , pass box, etc..
    Thanks

  42. Pingback: 40+ Most Wanted Wordpress Tricks and Hacks
  43. Pingback: 9月森林 » 40+ Most Wanted Wordpress Tricks and Hacks
  44. Pingback: WordPress 后台主题赏析 | Dreamcolor's Cote
  45. Pingback: Mas de 40 trucos y hackeos para Wordpress | Pboza
  46. Pingback: 40+ Most Wanted WordPress Tricks and Hacks | Blogging Tips
  47. 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.

  48. Pingback: 40 Consejos para optimizar tu Wordpress » Comenta o Muere | Actualidad, Humor, Tecnología, Política, Ciencia, Música… y otros muchos temas de los que merece la pena hablar.
  49. 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

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

  51. Pingback: Schweizer WordPress Magazin » Anleitungen CSS und XHTML » WordPress Login Gestaltung
  52. 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.

  53. Pingback: Wordpress Plugin Centre - Wordpress tips - WordPress Tips
  54. Pingback: 谷歌客 » 30个优秀Wordpress技巧
  55. 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)

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

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

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

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

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

  61. Pingback: WordPress 常用技巧40+则,诚邀您的参与翻译 - WordPress中文站
  62. Pingback: Einchi » Blog Archive » Custom Your WordPress Login
  63. Pingback: 25 Brilliant WordPress Tips, Tricks and Plugins to Make Your Blog Stand Out | Oragle
  64. 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.

  65. Pingback: RCDM » Blog Archive » 40 consejos y trucos para Wordpress (muy interesante)
  66. 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?

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

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

  69. Pingback: Schweizer WordPress Magazin » Beitrag: WordPress Login Gestaltung
  70. 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 😛

  71. Pingback: How do I remove the wordpress logo from the login and register pages? | wp-Member.com Advanced Wordpress Membership Plugin
  72. 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.

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

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

  75. Pingback: WordPress 常用技巧40+则 : 从1981年2月开始的人生
  76. 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!

  77. Pingback: WordPress 常用技巧40+则 - 从1981年2月开始的人生
  78. Pingback: Customize Your Wordpress Login Screen With ‘Branded Login Screen’ Plugin
  79. Pingback: Pimping Your Wordpress Theme for Humans - Sugarrae
  80. Pingback: Branding Login Screen Wordpressmu! | ayo ngeBlog!
  81. Hi,
    May I know what happens after you login? Do we still see the default wordpress dashboard? Can we customize that?

  82. Pingback: Vizuālie sīkumi | Senteevs.lv
  83. Pingback: Adding The “Cool Factor” To Your Website - Web Development

Leave a Reply

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