Custom WordPress Login Screen
242Update (24/8/11): The code below should all still work, but a number of the samples are no longer active, sorry!
The WordPress admin login page is very easy to customize. With the code below, you can add your own CSS to the login page and make it look however you like. Check out the new Pro Blog Design login to see it in action.
Best of all, your customizations are all done in your theme files, so the changes will stay when you upgrade WordPress.
This is the first in a series of WordPress Hacks posts. The code is all done by Milo, and then written up into a blog post by me. There will be a new hack released every Thursday!
1 – Edit Functions.php
Your theme may or may not have a functions.php file in it already. If it does, paste the code below into the bottom of it. If not, just create a blank file in Notepad and save it with that name.
And remember not to leave any space before or after the <?php and ?> tags as you do this!
1 2 3 4 5 6 | <?php function custom_login() { echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login/custom-login.css" />'; } add_action('login_head', 'custom_login'); ?> |
2 – Edit Your Theme Files
We will need a place to store your new CSS styles and any images you might use. Seeing that they aren’t part of the main site, let’s create a new folder for them.
Create a folder in your theme’s folder and call it “custom-login“.
And inside that folder create a new stylesheet called “custom-login.css”.
3 – Add New CSS Rules
The custom-login.css file will be loaded each time your login page is loaded. That means that any rules you add here will be applied to the login page.
If you add new images, you can store them in your custom-login folder.
However, if you want to re-use images from your theme, just use CSS rules like the following to use the image from your theme’s images folder (That way, your browser won’t need to download the images again as it will already have them cached).
1 | html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;} |
A Simple Template Example
The following is the stylesheet I’ve used to create my new login form. It is very, very simple, but it does the trick nicely. I’ve commented it, so feel free to adapt it and use it on your own site.
1 2 3 4 5 6 7 8 9 10 11 12 | /* Custom Login Styles */ html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;} /* Page background. Can't use the body tag for this! */ h1 a { /* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */ background:url(../images/pbd-title.png) 0 0 no-repeat; width:415px; height:70px; } body.login {border-top-color:#dff4fc;} /* Top bar background color */ .login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;} /* Link effects in top bar */ .login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* Rollover link effects in top bar */ |
More Advanced Customizations
Of course, you can do a lot more than that. If you check out the screenshot below of a site Milo created for Intellivative, you can see that she’s modified the design of the login form itself, just using a few more CSS rules.
You may find it useful to check out the default WordPress login stylesheet as well. You will find it in /wp-admin/css/login.css and some of the colors will be set through /wp-admin/css/colors-fresh.css (Unless you changed the color scheme in your admin panel, in which case it is colors-classic.css).
If you update your login form, let us know in the comments and I’ll collect the links here!
Update: Andi Saleh has created a great login page with this technique.
Update 2: Andrea from WPMU Tutorials has turned this into a plugin for all your WPMU users out there!
WordPress Hacks Series: The code in these posts was written entirely by Milo, a web designer from Oxford, Britain. Check out her website for free WordPress themes and her blog, or follow her on Twitter!
Enjoy this post? You should follow me on Twitter!
killer!
Amazing tip. Many thanks!!
dfgdfgd
Great Tip!!! Thank a whole lot!!!!
Tank you for plugin.
Awesome tip. :) Completely forgot that this should be editted too when you’re going fo a real complete look. I wonder if we’ll start seeing more of these little additions in premium WP themes…
Excellent post – will try to implement on my blog, it shows professionalism.
Thanks for the great tutorial!
Anthony
Great, indeed…! Thanks for sharing this excellent tip!
I just updated my login page, making it match the main design. What do you guys think?
And can someone please let me know if the style breaks is Opera and Safari. I haven’t tested it there yet. :D
Will be waiting for more great hacks. Keep em coming, guys! :D
Love the login design… Very Inspiring
Looks Awesome, great work.
I have a question. How do I install this on my wordpress site?
Mike
This came in a timely manner. I was just looking into this. I wondering if you will do a post or if anyone know how to fully integrate the register and login into the site, such as http://ugaf.org/login/?action=register
Awesome. i lost for words :D
Keep posting a good post like this guys :D
Thanks for the tips. Hopefully, I can make my blog look as professional as yours
Brilliant! I’ve been wanting to do this for ages and was going to just muddle through it myself, but now I have your well written article for guidance! Thank you!
Thank you very much. This is extremely useful.
Thank you for the article. It’s simple but very useful :). Changing CSS of the login page will make our blog more personal, and usual people don’t reconize this is a WP blog :)
Thanks a lot. This will definitely help when I move to a hosted solution.
Currently I’m running off of Blogger, and although it is a good service for the price (free!) customization is not exactly top notch.
I’ll be subscribing to your feed :)
Awesome tip!
Great tip indeed ! First time i have such a wp mod is possible. And i think it is really good for overall site branding.
Glad you all enjoyed the post! I’m agreeing with everyone here, it really does take your site that little extra step towards being fully your own.
Static,
We might well do! Any little advantage I suppose. :)
Andi,
That looks brilliant, I’ve added the link to the end of the post now. Thanks for sharing!
@ Andi, the design doesn’t break in Opera. Looking great.
It looks very nice, i will try to do it =).
Thanks
Nice tip Michael. Adds a nice finish to a client’s site
huh, looks like – I can do something about it too, thanks for the tips! :)
thats awesome! the steps are easy to follow and appreciated!
great work!
learning to do it!~~
This is one of those things that you know you’re going to need to know how to do sometime soon and you expect you’ll do a search on Google when the time comes … now I don’t have to! Thanks Michael – this one’s going straight to delicious etc.
That’s a great tip! Thanks!
That’s really awsome!
It’s beneficial for the blog having multiple authors. Do you know about changing the way the user register on the blog?
Usually WP sends randomly generated password to the users email , sometimes that may be frustating. Is there any way thru which they openly choose their password while registering.
Please if possible mention that also.
-Mohit
We use wordpress for all our website and clients websites, and this is something which we didn’t really bother to do. It’s surprising how much it finishes the website off. Your post is really easy to understand seems very simple and will finish the website perfect.
Thanks for the really great post! I never knew that you could edit the login page like this – it makes for a nicer user experience, for sure.
After reading your article, I updated my blog’s login page, which you can see at http://www.tutwow.com/wp-login.php.
Thanks again!
This is something I’ve been doing for a while on client sites that are running on WordPress. It makes the site look that much more polished.
Hye Michael, can u look at my login page http://missmully.lovesylph.com/wp-login.php.. something wrong at wp-login.php.
what must i do?
“Warning: Cannot modify header information – headers already sent by (output started at /home/lovesylp/public_html/missmully/wp-content/themes/pinkswirls/functions.php:9) in /home/lovesylp/public_html/missmully/wp-login.php on line 255
Warning: Cannot modify header information – headers already sent by (output started at /home/lovesylp/public_html/missmully/wp-content/themes/pinkswirls/functions.php:9) in /home/lovesylp/public_html/missmully/wp-login.php on line 267”
Hey,
The error is probably in your functions.php file. Have you copied the code over completely? (Might have left out a word or 2 at the end somewhere?).
If you don’t spot anything, email it to me (michael at this site’s address :) ) and I’ll take a look at it just to double check and be certain. I’ve made every error possible with these files in the past! :D
i can’t spot anything wrong.. i only copy paste the original code from above.
:) double check on this : http://lovesylph.com/download/functions.txt
i’m using wp 2.7
Did you used an include in functions.php? Sometimes it gives a Cannot modify header notification because of the includes. Try inserting it in the functions.php file
Hi,
I have the same error above as the12 and was wondering if you two had an luck resoling that problem? Thanks!
This is really very nice idea. But if you would like to have a professional website, such solution is not good to you and your company. I hope it is easy to understand why.
quick question.. how do you get the nice stylized “code” areas?
Hey John :)
I’m using this plugin: http://wordpress.org/extend/plugins/wp-syntax/ – Works a charm!
A correction – you probably should use bloginfo(‘stylesheet_url’), not the template url?
Sorry I mean stylesheet_directory
Thanks for that. I was having trouble because I was using a child theme and didn’t know how to reference it, as opposed to the template.
This is stellar! I have a client that will be using WP and this is exactly what I need and want for their log in screen!
Tadd Mencer’s Latest Post: When life gives you lemons
Great Tutorial… I be using it soon (I hope)
I just wanted to note that this works really well if you’re replacing the default WordPress logo image with your own logo image file, but it doesn’t work if you’re using HTML/CSS to create the typography for your h1 header title. In order to make that work you have to make changes in wp-login.php and login.css in the wp-admin folder … but you would probably have to make those changes all over again next time you upgrade WordPress.
So if you have created your site with a h1 header title using tags and CSS styling, then in order to achieve this customised login page you’ll have to create a separate image file to replicate the header title, then follow Michael’s instructions with your new image file.
Hope that all makes sense.
http://www.tripst3r.com/wordpress/wp-login.php
It is really easy, and works super well. My custom log in link is above!
Is, there a way to center an image?
I follwed the code that you have here. but then i turned around and decided to create an html page index.html
I can see the text fields to enter username / password but the box doesn’t form?
When, I click on loss password the hacked version that I did from here shows, but the image isn’t the same size what i’d like to do is click on lost password, and the same page from the main page loads up the same way and you can enter your email or user name and you will be sent the password but when I log in, and try to see the main site, it boots me to the login site any reason why? how can I get pass it?
really nice and killer tips..great!
I find some nice article on the website design which infact great help for all webmaster like me.
Nice information xD..Keep share.
I receive functions.php errors when I try to login.
All I want to do as add a full page background image behind the login area.
I have tried many different plugins but can’t get this basic thing to happen.
If you customize your login screen to make it match your site better I would advise anyone to also customize the login url to something other that wp-login for security reasons. There is even a plugin out right now that is call WP Hide Dashboard that can also help manage what you show people that you allow access to your backend as well.
Thanks for the informative article on WordPress custom theme
This is a great article and really useful, the only problem is left is that if you change the logo to your own logo, the logo still links to wordpress.org
Any ideas on how you can overide?
so expert for me, but, i will try for that… nice tutorial, BeD-BoY
This is something that I never considered possible until I just stumbled upon this article. Great tutorial and thank you very much for showing me this.
Great tip, this is just what I was looking for!
Thanks,
I tried it and i just got a blank screen. Then I took out all the code now when I try to log out I get a blank white screen. please help
this is my site http://www.cac-tv.com
Thanks!
This is really bad can you tell me how to get my login page to work again?
Thanks for the really great post :D
ahhh.. I copied/pasted the first bit of css at the end of my functions.php… and it completely destroyed everything… I can’t log in… I can’t view the blog… nothing……. this is the error i receive when I go to my site:
“Parse error: syntax error, unexpected $end in /home/nctrnlk1/public_html/blog/wp-content/themes/atlantica/functions.php on line 130”
please HELP!
Splashbox is an online marketing company with 20 years industry experience. We specialise in Search Engine Optimisation (SEO), online marketing and website design. Our team is made up of successful, business-minded individuals who are passionate about design and understand the importance of achieving a strong market presence and providing a sound return on investment. Our strong business acumen will always find a balance between eye-catching designs, cost-effective and profitable solutions.
wow! thanks for the idea. Ill try to modify my wp login too. hehehe. :)
nice tutorial,, thanks for the directions.. :),
So, what happens when you update WordPress to a new version? Do you have to redo the work each time?
The problem is that often after update wp version our changes may not work. There is plugin – register plus – has also posibility to change login screen.
Thanks for sharing the helpful tip.
Thanks for the article. All visitors are sent to the login page while we still develop the site but here’s our login page: http://pinoygossipboy.ph/wp-login.php .
Hi,
the link is not working.
I will tried it on my site… this is great custom, specially for multiple author blogs.
hey, it’s cool!
please tell me how to completly remowe the top bar (“<- Back to [blogname]")
Hey JSS, I think pgb used this code in his site:
.login p#backtoblog a:link, .login p#backtoblog a:visited {
display:none;
}
now that won’t “completely remove” the link, but just hide it in plain view. Meaning you can still see the element if you view the page source.
-Joe
Yeah that’s what I did.
Get article. Thanks for sharing the info. I want to take this a bit further. When someone logs in I want them to be redirected to a specific URL. I found one plugin that does that, but as soon as you go back to the /wp-admin.php page it does not redirect you. Any ideas how to make that happen? Basically I want “clients” to login and be redirected to a page I set up for them. Each client has a separate page.
My comment was deleted.
Only comments that look like spam get deleted, and I even go through the whole lists of comments automatically listed as spam.
Sorry if your comment was caught up in that. Feel free to repost if you were asking a question or adding an opinion to the post! :)
Hello
I did everything you recommended and it still does not work?
I have WordPress 2.9.1.
Naveen
Thanks for all your work on this. It was nice to learn how to do this without a plugin.
Brilliant! Thanks!
good article :)
Another killer tutorial Michael . You amazing .
That’s a great tutorial, but I get this “Warning: Cannot modify header information – headers already sent by”, too. There’s nothing wrong with my functions php file. Did anyone find a solution for that problem?
Sorry Nicole, I’m using this exact same code on the same WP version as you and it’s working for me.
Given the error there, is there a chance you’ve added another function somewhere with the same name? (Or that a plugin you’ve added has done so?)
Thanks for sharing.. ^^
*-*
hello from Brasil
Even log in page is not shown to the visitors and it is important to them. It is still a cool thing to design it, for your own happiness that you have a great design. Thanks for sharing this information.
hello i ust wnted to ask a quick question where would i enter this coding because i am using ix as my web hosting and i am a little puzzled as to where i out this code in. can someone help me please
thanks
Oscar
This website is Very useful for me
its like what i want, thanks to michael..
http://www.jurusinternetmarketing.com/wp-login.php
hello from indonesia ;)
great for wordpress rebranding!
thank you very much!
here’s my new login page!
http://marketinglistinfo.com/wordpress/wp-login.php
wow,, its pretty cool! i’ll try it,, so any thx!!!! :)
Really got to give this a go as it looks very professional for end clients and adds to the branding for customer sites – so looks like you have thought of everyting for them. Thanks for sharing this tip!
I apologize first! I am such a newbie to customizing my blog, but continue to work very hard! I added your code to the bottom of my functions.php file. I created the folder ‘custom-login’ and created the css file ‘custom-login.css’. My gut feeling is that I need to do something else like tell WordPress that I am using a whole new login page. Is this done in the function? Any help will be greatly appreciated! Thank you!
Actually I tried this on a fresh WordPress install today, and it doesn’t appear to make any difference. It is running BuddyPress too, but I don’t know if that should make a difference. I’ll try it with BuddyPress disabled and report back…
Awesome tut! Been using it as a reference for any clients’ WP site I do. Thanks!
It seems to work at the wp-login.php page, but it breaks the wp-admin (white screen). This only occurs when I add that snippet of code to the functions.php page. Here is the code I cut-pasted
<?php
function custom_login() {
echo '’;
}
add_action(‘login_head’, ‘custom_login’);
?>
Did I miss copying anything? I am also using 2.92 so this may be the glaring issue…
Thanks for this tut!
Thanks for this great tut :-) It works awesome on all my WP-sites and I am using it as a professional extra on any client site I built too. Great work :-)
Hi,
I have tried this on local machine and it works great – when copying the files over to the live site, nothing changes at all!!??
Please could someone help me with this?
Thanks
Hey Michael,
You mention in your post that:
“You may find it useful to check out the default WordPress login stylesheet as well. You will find it in /wp-admin/css/login.css and some of the colors will be set through /wp-admin/css/colors-fresh.css”
The following files have a nicer format (i.e. – they are easier to read) for anyone using wordpad as their text editor because they contain line breaks rather than just a single line of code:
/wp-admin/css/login.dev
/wp-admin/css/colors-fresh.dev
Thanks for the great post!
Nice tip, thanks for sharing! I’ll have to check that out :D
To all receiving the “Warning: Cannot modify header information…” errors:
I received this as well when I first used this code because I pasted it directly into the functions.php file via the WordPress editor. I fixed it by downloading the functions.php file, opening it in Textpad, re-pasting it again there in order to ensure no spaces were present (sometimes they get hidden even though it looks fine) and then re-uploading the file to my WP theme directory.
Hopefully that’s helpful.
Thanks for the code, Michael!
Thanks for the tip John, that explains a lot! I never use the built-in editor just because it can make such a mess of the actual files when you next edit them in a normal text editor :(
First I copy pasted the code in fucntions.php and got the same header erroe just like others. I removed the spaces my moving the cursor one by one and it got fixed. In this line : echo ”; there is a space before get_bloginfo and there is a space after (‘template_directory’) If both these spaces are removed the problem gets solved.
I have made a simple login screen. Check Webfroze.com Thanks for the nice post.
Looks sharp Mukundan, nice work!
Thanks for letting me know about the spaces, I’ve taken them out now. I hate leaving nice code to the mercy of the WordPress text editor… :(
OK for starters I’m very new to this whole blogging thing and I have followed the directions to the best of my ability. Now here’s my problem…
I get a blank (white) screen for my blog this happened after I copied and pasted the code that was given in step 1. I copied it at the end of the functions.php and updated the code, and boom one big white screen for log in and my whole site. PLEASE HELP!!!! I am using the most up to date wordpress.
Oh, I can’t get this to work. My site continues to load the default login screen. The wordpress theme I’m using already has a function.php I’ve tried to simply paste the full code at the bottom but it doesn’t work. I get default login.
I’ve also tried to paste it into my functions.php with the tags because they’re already there.
Please help, thanks!
Hi,
i would like to move the login form up and right in the page any idea of what changing. I tried in the original login.css… But i can only reduc the form or make it large…
Thx
I am new to the WP world after hearing and reading about it for a couple years, is there a way to force someone to register before posting and still have the admin approve the ad ??Is there
Thanks for the tutorial….
I was unable to find author’s name when i posted first comment.
I have it now……………
………..THANKS A LOT MICHAEL :)
Hello,
I also found a site with describes how you can easily hook into the wordpress logo link & linktitle.
function collage_custom_login_link($url)
{
// Return a url; in this case the homepage url of wordpress
return get_bloginfo('url');
}
function collage_custom_login_title($message)
{
// Return title text for the logo to replace 'wordpress'; in this case, the blog name.
return get_bloginfo('name');
}
add_filter("login_headerurl","collage_custom_login_link");
add_filter("login_headertitle","collage_custom_login_title");
lets you edit the logo link. You use css to change the logo itself.
5 pts for you sir! many thanks, great tip!
Thanks for this title and site link tips. It’s work for 3.0.1… :)
And where would this site be?
Id like more details on where to put this code exactly
First of all Thank You Michael for sharing!
And Thank You Stephan for your code, too!
I noticed that the logos of all colleagues used this method before your comment are linked to the WordPress site. This was the first thing I did not like in this method! Because it seems wrong to see a company logo that pointto another firm or site. :-).
With your code everything is OK.
I have done other modifications, which also suits me and if someone wants to use it – be free to try it!
I attach the code, because the site is still the local server!
// Start My mdification
//Custom login
function custom_header_login() {
echo ”; echo get_header();
}
add_action(‘login_head’, ‘custom_header_login’);
function custom_footer_login() {
echo get_footer();
}
add_action(‘login_footer’, ‘custom_footer_login’);
function collage_custom_login_link($url)
{
// Return a url; in this case the homepage url of wordpress
return get_bloginfo(‘url’);
}
function collage_custom_login_title($message)
{
// Return title text for the logo to replace ‘wordpress’; in this case, the blog name.
return get_bloginfo(‘name’);
}
add_filter(“login_headerurl”,”collage_custom_login_link”);
add_filter(“login_headertitle”,”collage_custom_login_title”);
// End My mdification
That way I use the current site design!
When site is launched online I will shere link with You!
Once again thank You for shared information!
Good Luck!
Opps!
I was glad that I managed to find something myself, but I had to look at the code before you share!
Rows with echo get_header and echo get_footeer not actually work properly!
The page looked good until I looked at the source code and saw that header and everything before the Login form, repeated 2 times – i.e. I have towice header and body tags!
Very stupid on my part for which I apologize! Michael if You whant delete my posts or if any developer has grasped the idea, offer the correct code!
Once again thanks for sharing, and sorry for mistake!
Thank you so so so much :)
This is superbly awesome tips.. hoho
Thanks a lot! I’ve done a login screen for Airplane Theme (http://www.wptown.com/) . If anybody is interested in it, CSS file is there: http://el-13-06.iet.su/wp-content/themes/airplane_theme/custom-login/custom-login.css and login page: http://el-13-06.iet.su/wp-login.php
Here is my custom wp-login.php Thanks for the great tutorial!
http://www.PS3Blog.net/wp-login.php
Thanks a lot Michael for such a useful article!!!
I had already replaced my login logo image but was too lazy to go further and shape it a bit better.
With the tip concerning the CSS and the awesome logo page of Tosh (PS3Blog.net), I’m definitely going to reshape my page :-)
Keep up the good work!
Roger
I too was having trouble with an error with the headers. I originally pasted the code at the bottom of the functions.php file and it had thrown errors. I then removed the ?> and also the <?php so that I had one large php code snippet as opposed to two on the page, uploaded it and it seemed to work.
Hope this helps!
Awesome tutorial
Great tutorial. Complete and easy to understand, even for a newb like me.
I made a custom page at http://galleryd.net/wp-login I’m pretty excited about, although it took some tweaking and I’m not completely satisfied with the functionality.
I got my login page looking pretty much like I want, after doing some tinkering with where to best insert my images and how to offset elements and so forth. My only problem (that I know of ) is when the login page is pulled up within an iphone browser, part of the login form is cropped off of the left side of the page and it is not possible to scroll left and access it. To get my page background and then core graphic to show up right, I used this code:
/* This is for the page background /*
html {background:url(images/background/fat_lines_mid.gif) 0 0;}
/* This is for the torn paper and title graphic /*
body {
background:url(images/loginD.gif) no-repeat 0 0;
background-position:center;
margin-left:auto;
margin-right:auto;
display:block;
width:auto;
}
/*This is to properly offset the actual login form from my center graphic (described above) */
#login {
background:transparent;
position:relative;
display:block;
margin-right:47%;
margin-left:auto;
margin-top:255px;
}
#login form {
background:url(images/background/metal-brushedlight.jpg);
background-attachment:scroll;
border:0;
}
The full CSS is available here:
http://galleryd.net/wp-content/themes/freshy2/login.css
Any tips are welcome.
Very nice tutorial! Thank you very much! :)
Awesome. i lost for words :D
Keep posting a good post like this guys
Hey, great tutorial! I’m using it on my new website.
Is there a way to get rid of the link to wordpress? I don’t mind giving them credit in a link at the bottom or something instead, but this is my logo now!
thanks for sharing. great tutorial!
Excellent article
Thanks a lot
I’m curious as to why you’d create a post with some code we need to paste in a file, that actually doesn’t work. Why waste our time with this. Numerous people have left comments about this code producing a blank white screen after it’s uploaded. Why can’t you just update the code knowing there is a problem with it. Every person who comes to this post seeking a solution will waste their time as I have. What’s the correct code????
this works really well if you’re replacing the default WordPress logo image with your own logo image file, but it doesn’t work if you’re using HTML/CSS to create the typography for your h1 header title
reat looking theme and nice and simple!
thankz.
Thanks for posting this tutorial. I have been looking for this info for a long time. Well done!
Hey Michael,
I’m trying to do a simple customization of a login screen and I’m using this tutorial as a guide. All I really want to do is get a background image to repeat on my login page. Your tutorial also showed me how to change the wordpress logo to be larger than the default one(thanks).
Anyway, I used your css code example and altered it with my image information.
Here’s what I have: (I know I’ll probably need to change the repeat-x to just a repeat to get my image to repeat in both directions, but I just want to get it to show up without altering your code too much first.
/* Custom Login Styles */
html {background:#002653 url(../images/BSFD_BlueBackgroundSquare.png) 0 0 repeat-x;} /* Page background. Can’t use the body tag for this! */
h1 a { /* Title image (The “WordPress Logo”). Remember to update the height and width your image’s dimensions */
background:url(../images/bsfd_login-logo.png) 0 0 no-repeat;
width:500px;
height:136px;
}
body.login {border-top-color:#dff4fc;} /* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;} /* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* Rollover link effects in top bar */
The custom logo (bsfd_login-logo.png) is working fine, but my background image (BSFD_BlueBackgroundSquare.png) is not showing up on my login page and the background color doesn’t appear to be working either (not that I’ll need it once my repeating image shows up). I have both logos in the images folder for my theme (suffusion). I am using Worpress version 3.0.1.
Here is a link to my login page http://bsfd.org/schedule/wp-login.php.
Do you see anything wrong with my code? I’m not a css expert by any means. Any help you could offer would be great!
Thanks in advance.
Joel.
Awesome Man!!! Pro Blog Rocks!!!!
really nice tricks its really awesome man,…
but can you give me the way to create a different page for user in wordpress, i mean we have 2 different page for login, first is for the owner of the blog, and the second is for user, and also how to create a custom registration page in WordPress..
Nice tutorial. Thanks :)
NICE! Thanks for the tut. I am now implementing this into all my customers sites.
I was getting a syntax error at first. I had to remove the tags as my theme’s functions.php already had an opening tag in it.
Hi, its so easy. wanna try it.
it would be nice if we can put some parallax. :)
e. With the code below, you can add your own CSS to the login page and make it look
You could also try and use Login Style it’s a wordpress plugin, that I use on my blogs and it really helps branding your sites.
This worked perfect. Was really easy to do as well. I do get a new screen now when I log out asking me if I want to log out. Can I get rid of this or add my background to it?
Never mind, its not doing it anymore was an error of some short.
This didn’t quite work for me, but it did point me in the right direction to achieve the same effect by editing login.css I guess I’ll just have to update the css file with each WordPress update!
Does not allow me to add this to functions.php in wp 3.0 – major issues
How to get code this to get it to reference a child theme stylesheet? When I used [code] .get_bloginfo(‘template_directory’). [/code] it referenced the parent theme. I’d prefer not to put my css in there because of updates.
I saw that this was answered in a previous comment…
To reference the directory of a child theme:
Instead of ‘template_directory’ it should be ‘stylesheet directory'</strong
Kudos! Works great!
New comment, just for updates, since I forgot to click the update button.
I have the files all installed and working but cant work out where to put the image in the WordPress template I am using.
Auto Focus pro and
Thematic
I have the custom-login folder in the Thematic root folder but can’t find the images folder nor know how to link to it. in your file you have the code
url(../images/pbd-body.jpg) 0 0 repeat-x;}
any idea where my image should be and what code i need to point to it.
Thanks in advance
managed to get the logo up and running by putting the jpg file into the root and altering code to ../image.jpg it is repeating all across the screen and I need to work out how to add some padding so I can see the top. All is looking a lot better now though :)
Just made the image a lot bigger and can see my own image on the login now \o/ it will do but I would like to get rid of the hover over window pointing to WordPress. Anyone?
Hey Micheal,
Thanks a lot for this post. I used your method on my personal blog. You can find it here: http://trs.mabogunje.net/wp-login.php.
As a student of computer science myself, having to use plugins like Theme-My-Login was really hurting my design sense. It’s really great to have a more native solution. Stop by my blog if you get a chance and tell me what you think. :)
Is there a trick or modification that can be made to prevent the user from seeing an unnecessary WP profile page?
I would prefer they be redirected
a) to the home page of the site , or
b) preferably the point they were at in the site before logging in.
to add to the post and discussion- i dug around in the login.php and saw that you can filter the URL and title of the link that by default goes to WordPress. add the following to your functions.php (the same place you put the link to your custom-login.css in Step 1 of this tutorial.
[code]
function custom_login_link() {
return get_bloginfo(‘url’);
}
add_filter(‘login_headerurl’,’custom_login_link’);
function custom_login_title() {
return “Powered by Bacon”;
}
add_filter(‘login_headertitle’,’custom_login_title’);
[/code]
here is my form:
http://www.kathyisawesome.com/wp-login.php
great tutorial! a really easy way to customize sites
Just made the image a lot bigger and can see my own image on the login now \o/ it will do but I would like to get rid of the hover over window pointing to WordPress. Anyone?
In addition to filters mentioned previously, you can use jQuery to fill the last bits of customization of the logo link, logo title, and https/http issues.
We are using define(‘FORCE_SSL_ADMIN’, true) in config.php so we needed to deal with linking from the https login back to http for the “back to blog”.
Just echo the javascript below in your custom_login() function in your theme’s functions.php.
[script]
jQuery(document).ready(function() {
jQuery(\’a[href=”http://wordpress.org/”]\’).attr(“title”, “Back to ‘.get_bloginfo(‘name’).'”);
jQuery(\’a[href=”http://wordpress.org/”]\’).attr(“href”, “‘.site_url(null, ‘http’).'”);
jQuery(\’#backtoblog a\’).attr(“href”, “‘.site_url(null, ‘http’).'”);
} );
[/script]
See in action at https://www.c-spot.com/wp-login.php?action=register
Thanks to all involved for the great ideas.
Hi sorry for the silly question but how do I echo te java in the php file I cant seem to get this correct
many thanks
Hi! I was surfing and found your blog post… nice! Nice tutorial. Thanks :)
. :) Cheers!
Thank you so much this is superbly awesome tips. As a student tenant Screening of computer it is really great for me.
Thanks so much!
I dug around in the login.php and saw that tenant Screening you can filter the URL and title of the link that by default goes to WordPress. add the following to your functions.php.
AWESOME i love it
I guess I’ll just have to update the css file tenant Screening with each WordPress update!
I believe there is a plugins for this. Which also available there is admin logo plugins for customization. Go to http://kerrywebster.com/my-current-plugins/ . I have been using this plugins for years without any issue. Also quite easy to use. Go check it out!
I have customised my login page at blludog.c.o.m thanks for this helping designers improve their skills.
Hi there. I REALLY like this custom wordpress login article. The custom login that ProBlogDesign and Andi Saleh made are really inspiring. I used your tips to make a custom login for a client and I have to say it looks really impressive!
Thanks a lot. I really love articles like these. Keep up the good work.
thanks so much ! i am finding it !
Thank you very much. With the amazing tutorial i could realize a very nice Login area. You find it here: http://www.tarifemonster.de/wp-login.php
Thanks for this tutorial.
For those with the “Warning: Cannot modify header information – headers already sent ” problem, make sure the last line of functions.php is ?> followed by a carriage return!
I did something formiliar for my internship. here: http://testomgeving4.tussendoor.nl/wp-login.php
Thank you for the article. It’s simple but very useful..
Thank you very much for the idea Michael…
Wow! I love the login you did for Intellivative! I’d never guess it was run on WordPress!
Thanks, but you lost me at the “Simple Template Example” step. Do I need to know CSS in order to write the code that goes into my custom-login.css file? I have to confess I’m not sure exactly what part of your example is the code and what part is the comments.
All I want to do is take a 1024×768 image (for my login page background), upload it to the custom login folder I created (correct?), and change the WordPress logo to a logo of my choice (how exactly do I do that, and must the logo have a transparent background?).
Once I’ve uploaded the custom-login.css file, the background image, and the logo image to the custom login folder, is that the last step? Will (or should) the new-look login page appear automatically then? And will the registration page and the password-recovery pages also have this new look?
Nice article. But your LogIn screen is still showing “Powered by WordPress”.
This can also be fixed.
Fantastic tip indeed… Thank you very much
Soccer is my favorite,so is David Beckham
terrific tutorial and a really easy way to customize sites.
This has really been a very helpful tutorial.
This is great! I am trying to get my own Article Directory off the ground. This helps!
GREAT TUTORIAL!!!
I just had my registration page customized thanks to this!! :)
I can’t believe it’s this simple.
All of your visitors ought to save this page.
the best !
Your Pro Blog Design login doesn’t work anymore. Apparently it did get blown away by an upgrade.
Your post is really easy to understand nd simple..!!!
Thnx for the post..!! :)
Good job. Thanks…
Here is what I did with help from this tutoral!
http://www.staynovandreevaviolins.com/wp-admin
Thank you, again, for sharing!
This will help me brand up my WP themes when I start selling them soon. Thank you.
I have 2 other blogs that are like 2 versions
Thank you for the great tutorial, it was very helpful and did the job as described. Much Appreciated
fabulous face painter we found binx at 166 hill side terrace in staten island his number was givin to us by a friend 718-314-7887. Binx the clown was talented, creative, and expedient, in addition to being prompt, professional and generous with his time and attention. My six year old was transported, and so were his friends and a few of us parents too who jumped in line… Thank you, Binx the clown for setting imaginations alight. Please stay in nyc another year so we can hire you again!
strange all examples in this tutorial at the bottom visit to basic WP login screens. :(
Why?
And BTW it’s maybe a good idea to add some page-navigation to the comments section.
My site looks cool with custom login page ;)
trop fort, c’est ce que je cherchais comme infos, tu es formidable !
Nice article once again.
However, I would like to make a request. Could you write a tutorial on how to remove the alternate text that appears when you hover over the navigation menu. This is default in WordPress when your create category menus.
Thanks in advance
here is mine !
http://blackspirit.org/black/site/wp-login.php
thanx a lot ;)
Thats really a Excellent Tutorial thank you…
Happy Blogging :) <3
I do agree with all the ideas you have presented in your post. They are very convincing and will definitely work. Still, the posts are too short for novices. Could you please extend them a little from next time? Thanks for the post.
[…] Custom WordPress Login Screen | Pro Blog Design […]
Hi,
I made this login screen yesterday: http://adm.terravivaambiental.com
Hope you like it ;)
Is there a way to implement this on a supersite/multisite setup?
looks great! Does that work with 3.3. I’m having trouble just getting this tutorial to work. Any Suggestions?
Great, I’ll Try
its been a long time since i used this theme, but this theme is quiet one of the few good themes i have ever used.
Nice tutorial. I can change the login page of my site. Thanks for the information.
Good Post
It is not working in WordPress3.3. Any help…!
I hope you can update this with WordPress 3.3
Thank you:)
Dude…. I LOVE YOU! :)
It works on your 3.3?
Tnx,
very simple.
Mostly all the changes/wishes to wordpress are very complicatied, but this ons is very simple
Thanks for your advice :)
Exactly what I was looking for.
Greetings from Germany.
Just made the image a lot bigger and can see my own image on the login now \o/ it will do but I would like to get rid of the hover over window pointing to WordPress. Anyone?
Thank you so so so much :)
This is superbly awesome tips.. hoho
I tried to do this, but no luck. I can’t get anything to show up. I created all my files and folders just as stated above. I’ve even noticed that the author of this site doesn’t even have his login customized. Had WP added code to keep this from happening? Any suggestions?
Anyone got this to work in 3.3.1?
Nope.
OK, this works in 3.3.1, added the css directly to my theme’s functions.php file:
h1 a { background-image:url(myimage1.png); height:116px; width:290px; }
body {background:#efefef url(myimage2.png); color: #4F5763; }
a {color:#f58200;}
I’d love to have it working as a separate css file so do let me know if you manage to get it to work.
Sorry, not sure how to post code here, the comment editor is stripping it out… trying again to show the php, too:
h1 a { background-image:url(myimage1.png); height:116px !important; width:290px !important; }
body {background:#efefef url(myimage2.png); color: #4F5763; }
a {color:#f58200;}
<?php
}
add_action('login_head', 'rl_custom_login_logo');
Aargh, can’t seem to post the whole php snipped, even using the code tag. Anyway, similar to that:
http://www.wprecipes.com/customize-wordpress-login-logo-without-a-plugin
thanks for share!
As soon as I discovered this website I went on reddit to share some of the love with them. “The new Haitian baseball can’t weigh more than four ounces or less than five.” by Jerry Coleman.
Adoro me mostrar peladinha na web cam
Aloha! xri
Aloha!vfxj! http://pobqya.com unvir bqiff
Aloha! rgp
awesome blog to read…i enjoyed reading. keep posting.http://www.sapatoonline.net
great blog.. finally i found what i had been looking for :) thanks for sharing it.
this is perfect, i am looking to do something similar very soon and this article makes perfect sense.http://www.porcelanatoportinari.com
cool post will be using this
congratulations for the writing.http://www.maritimasaude.com
very nice. http://www.kitsucesso.com
Nice tutorial..
Now you can customize completly your WordPress Login Screen and Dashboard easily with “Erident Custom Login and Dashboard” plugin. You can Add your logo, change background images, colors, styles ,Dashboard footer etc. from the plugin’s settings page.
Check it: http://wordpress.org/extend/plugins/erident-custom-login-and-dashboard/
Sorry to say, but this doesn’t work at all with the latest version. Somehow you have to integrate the CSS code into functions.php. See a post before.
Even the loginpage that is provided as an example does not work.
It works… he just customized it to look exacty like the original wordpress login screen.
Hi! Do you know if they make any plugins to safeguard against hackers?
I’m kinda paranoid about losing everything I’ve worked hard on.
Any recommendations?
thanx! very good tip. I searched for it and installed.
Thank you for your tips, anyway do you know if there is some plugin to do this automatically, because I don’t want to modify the code.
Try “Erident Custom Login and Dashboard” http://wordpress.org/extend/plugins/erident-custom-login-and-dashboard/
This will do the magic for you.
Nice custom login and combined with custom post type for the message
http://bisnisukm.com/wp-login.php