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.
347 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');
}