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.
396 Responses to “WordPress Tips and Tricks – Custom Login Page” Leave a reply ›
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.
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
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
http://www.dedestruct.com(still under construction). But you can grab them and post them here if youd like for people.
In fact, I was wondering why no customized login is available when I installed it. You did it. Thanks a lot.
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.
I've styled the login page occasionally, but never considered a plugin solution to protect from future overwrites -- great idea.
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 ?
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.
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!
I thought when I read David's post yesterday 'I'll wait for a plugin'.
Thanks for endorsing my laziness
lol Chris - happy to oblige
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
Wow - the TMNT stuff turned up - That's really cool. I'd totally forgotten about that
Glad this helps you as well.
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
@ Joe that sky blue box behind the "Wordpress User" and "OpenID Identity" is coming from
http://joeanderson.co.uk/...min/wp-admin.css?version=2.2
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
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
Awesome job. Downloading...
I loved the idea of getting fresh whenever we login.
Thank you so much for this tutorial. Come and watch my custom login page and say what you're thinking about it.
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.
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.
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!
Wow, this is a great plugin and I will certainly recommend it to my student. Thank you and good work!
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?
I agree with these folks. Great resource. Thanks.
~sergio~
http://homteriors.kerrywebster.com/...m-custom-login.css
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.com/wp-login.php
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');
Thanks a lot Kerry
Great job Ben - thanks for the plugin.
Do you know if it works with WordPress Mu?
Cheers
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.
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.
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,
I forgot to customize the login screen and now it is. Well, I didn't use the plugin, but it's done.
am a bit sad. it's not working with my WP installation – WP 2.0.11 using PHP 4.3.8.
oh, well...
This is a great plugin. Thanks for sharing it.
Thx
Thanks Ben for your effort on this plugin. I am using it on my WP 2.2.2. Keep up the good work.
Ben,
Is there a any way to change the background color of the login page?
(I use black in my blog)
Ben,
Nevermind, I see the css file now! You rock!
"This is madness!"
Thanks a lot
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.
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]
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]
Kerry thanks a lot! I will try that!
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.
Correction: I caught the wrong file. It only gives me the error with the modified code.
@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.
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
Nice one, im going to uses this now
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.
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');
}
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....
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.
Ah yes! if you require to re use the stock images...but good plug in none the less...
Thanks for this one ... working great !!! 1 minute and i have my own login screen
This is a heck of an idea! I had honestly never even thought of customizing the wp login page. Brilliant find. Thanks!!
hi
the download link of the plug in is not working , any advice?
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
it is working now Ben
thanks
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
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.
Tim - I am actually holding off on updating the plugin as WordPress 2.5 will change everything anyway (what with the admin redesign).
Any chance the plugin will be updated for WordPress 2.5?
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
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.
room 34 (comment 50) needs some love for his update as well. Much cleaner redirect based on current page.
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?
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.
BRANDED LOGIN SCREEN
WordPress 2.5 compatibility.
http://www.kerrywebster.com/?p=136
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
Kerry - Thanks
Jonathon - There's actually a new version released that works with WP 2.5 - I just haven't written about it yet.
For WordPress 2.5 I wrote about how to do this manually by editing the CSS over at my blog here:
http://justcreativedesign.com/...ordpress-log-in-screen/
I also linked back to here
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. ..
Mac - I am not sure what you want to do. Could you try to explain a bit more completely?
just built my login using your plugin and tips. thanks!
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).
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?
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.
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!
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!
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.
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
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?
will it work for WP 1.5? and how?
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
Thanks for the update! Now it´s working fine in IE.
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.
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.
^^ I agree with Marc. I'm glad I read that post before automatically upgrading or I would have been a bit irritated.
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.
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.
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.
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 ?
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?
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.
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
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.
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]
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';
}
Can anyone tell me how to change the input box color, i mean like username box , pass box, etc..
Thanks
I can't use it. Upload the gifs in the right place but nothing shows up. M running wp 2.5