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?
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.
- Click here to download the Binary Moon Custom Login Plugin now!
- View the bm-custom-login flickr group
Let me know what you think.
Article Series
this post is part of a series of articles - why don't you check out the others below?
Bubble Bomb
Seths Puzzle Boxes
Gun Wing
Free Games 4 Bloggers
Comments »
July 25, 2007
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.
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
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.
July 25, 2007
In fact, I was wondering why no customized login is available when I installed it. You did it. Thanks a lot.
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.
July 25, 2007
I’ve styled the login page occasionally, but never considered a plugin solution to protect from future overwrites — great idea.
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 ?
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.
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!
July 26, 2007
I thought when I read David’s post yesterday ‘I’ll wait for a plugin’.
Thanks for endorsing my laziness
July 26, 2007
lol Chris - happy to oblige
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
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.
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
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
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
July 30, 2007
Awesome job. Downloading…
July 31, 2007
I loved the idea of getting fresh whenever we login.
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.
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.
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.
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!
August 12, 2007
Wow, this is a great plugin and I will certainly recommend it to my student. Thank you and good work!
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?
August 13, 2007
I agree with these folks. Great resource. Thanks.
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...
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');
August 14, 2007
Thanks a lot Kerry
August 14, 2007
Great job Ben - thanks for the plugin.
Do you know if it works with Wordpress Mu?
Cheers
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.
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.
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,
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.
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…
August 21, 2007
This is a great plugin. Thanks for sharing it.
August 24, 2007
Thx
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.
September 9, 2007
Ben,
Is there a any way to change the background color of the login page?
(I use black in my blog)
September 9, 2007
Ben,
Nevermind, I see the css file now! You rock!
“This is madness!”
Thanks a lot
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.
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]
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]
September 17, 2007
Kerry thanks a lot! I will try that!
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.
September 17, 2007
Correction: I caught the wrong file. It only gives me the error with the modified code.
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.
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
November 3, 2007
Nice one, im going to uses this now
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.
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’);
}
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….
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.
January 10, 2008
Ah yes! if you require to re use the stock images…but good plug in none the less…
January 15, 2008
Thanks for this one … working great !!! 1 minute and i have my own login screen
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!!
February 20, 2008
hi
the download link of the plug in is not working , any advice?
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
February 21, 2008
it is working now Ben
thanks
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
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.
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).
March 18, 2008
Any chance the plugin will be updated for WordPress 2.5?
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
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.
March 22, 2008
room 34 (comment 50) needs some love for his update as well. Much cleaner redirect based on current page.
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?
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.
March 31, 2008
BRANDED LOGIN SCREEN
WordPress 2.5 compatibility.
http://www.kerrywebster.com/?p...
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
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.
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
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. ..
April 7, 2008
Mac - I am not sure what you want to do. Could you try to explain a bit more completely?
April 12, 2008
just built my login using your plugin and tips. thanks!
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).
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?
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.
People who link to this post...