How to Create a WordPress Login Form Overlay
109WordPress is more than just a blogging tool. It can be used as a Content Management System (CMS) for many different purposes. It has a built in system for most things you would have to code yourself, or pay for an expensive custom application. With a little creativity, you can use basic features to power almost anything you want.
One of the most important things to a website with any hopes of establishing a user connection is having user accounts.
Now, blogs get by here by having comments tied to emails, which is similar in a way. But you’re most likely looking to have unique accounts for your site. This was every user can login, logout, edit their profile and have special privileges. WordPress also allows you (as an admin) to control the level and permissions of all other users.
Login Form Overlay
So what exactly is a “login form overlay”? Basically it’s a simple and quick way for users to login from the page that they are on at any given moment, and come back to that page without losing a second. Just open the form, login, and you’re back!
For more experienced users, the question arises: Does this use AJAX? No it doesn’t. We’ll be using a custom form, but putting it through WordPress’ own file, and then redirecting back to where the user was. Here’s the things we’ll be using:
- Lightbox Gone Wild, a modification to LightboxJS done by ParticleTree. This is going to create the overlay where our form will go. It actually opens a new file above the current page.
- Your file editor of choice.
Other than that we’ll be writing our own code, or using code we already have from WordPress.
Example
I have this live in action on my own site. Click here to see the comment form. You don’t have to sign up to use it, but it will show you the overlay.
Setting up Your Theme
We’re going to be editing the actual WordPress theme here. Depending on where you want to put the overlay, that will determine which file you edit. On my site I have it so if a user isn’t logged in, they can bring up the form right above the comment form.
Go to the Lightbox Gone Wild site and download the files. Now upload the “lightbox” folder to your theme folder, and in your header.php file, add the following code before </head>.
1 2 3 | <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lightbox/css/lightbox.css" type="text/css" /> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lightbox/scripts/prototype.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lightbox/scripts/lightbox.js"></script> |
That’s just going to call the files we need to use the overlay. You can see that it uses Prototype, a Javascript framework you might already have. Check your header.php file before and remove the second line from above if you do have it. If you aren’t sure, don’t worry about it and leave everything the way it is!
The Login File
This is where we’re going to create the form we need to login. We’ll create just a basic HTML form with some PHP, mostly by copying code straight from the source of the regular WordPress login page.
Copy and paste the code below into a new file, name it login.php and upload it to your theme folder. I’ll talk about the additions after the block.
Make sure you change http://www.yourblog.com in the second line to your blog’s address (Including the http:// and with no trailing slash!).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <? $blogurl = "http://www.yourblog.com"; $postlink = $_GET['redirect']; ?> <link rel="stylesheet" href="<?=$blogurl ?>/wp-admin/css/login.css" type="text/css" /> <div id="login"> <form name="loginform" id="loginform" action="<?=$blogurl ?>/wp-login.php" method="post"> <p> <label>Username<br /> <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label> </p> <p> <label>Password<br /> <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label> </p> <p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p> <p class="submit"> <input type="submit" name="wp-submit" id="wp-submit" value="Log In" tabindex="100" /> <input type="hidden" name="redirect_to" value="<?=$postlink ?>#respond" /> <input type="hidden" name="testcookie" value="1" /> </p> </form> <p id="nav"> <a href="<?=$blogurl ?>/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a> </p> </div> <p id="backtoblog"><a href="#" class="lbAction" rel="deactivate">Close</a></p> <script type="text/javascript"> try{document.getElementById('user_login').focus();}catch(e){} </script> |
First, we have to note that we can’t access WordPress’ functions in this file. We’re loading it on its own on top of another file. This is why you have to set the URL at the top to your blog’s own. We can’t use <? bloginfo(‘url’); ?> or any other built in functionality in this file. You could try to include the necessary files to be able to do this, but we really don’t need to for this.
I’m also including the login form’s stylesheet for extra style. If you want, you can include your normal style sheet and style it your own way. I found the CSS in that file already worked with my design, so I left it.
Linking to The Form
The end is near! Now we just need to link to our form using a special syntax and it’s done. Put this where you want to have the link. Personally, I have mine in comments.php, but you can put it almost anywhere. To activate the overlay, use this link:
1 2 3 | <?php if ( $user_ID ) {} else { ?> <p><a href="<?php echo get_option('siteurl'); ?>/wp-content/themes/<?php echo get_option('template'); ?>/login.php?redirect=<?php the_permalink(); ?>" class="lbOn" title="Log in">Login »</a></p> <?php } ?> |
Notice how I’m sending a $_GET variable through to the file? It does work a little like AJAX in that way, but in the end we reload the page so all the changes for logged in users can take effect.
Help! It doesn’t work!
Well, it’s expected that you might not be able to get this running smoothly the first time if you’re not comfortable with editing your theme and creating new files within it. Here are some common errors you should double check before asking a question. I’ll answer questions in the comments, but I’d like to minimize the trouble you have to go through.
- You didn’t properly include the files in header.php. You have to make sure these files are working with your site. Double check you uploaded them into the same place you are linking.
- You didn’t add your URL to the login.php code. Make sure you include the http:// and have no / at the end.
- If you changed any of the code yourself, check your edits. Also make sure you’re linking to the same place it’s uploaded. It’s in your theme’s folder, not your main folder!
What Else Can You Do?
Once you have users logging in and out, you can use WordPress and its core features to give them special content, view certain pages. One thing I made is a page where a logged in user can go to see all their comments they’ve made. It’s just a simple page template with some custom code, but that’s a story for another day.
Enjoy this post? You should follow me on Twitter!
Couldn’t see the overlay from your link (I’m using FF2.0.0.16 on Windows XP).
I can’t see the overlay from the link too.
Welcome to the new CMS. Read me first.
by
nghoanghiep
http://howtomaster.net/forum/content.php?40-Welcome-to-the-new-CMS-Read-me-first
Andy,
Thanks for the warning. Fixed the link now! :)
Hi,
I Tried this on my Wp MU installment. All work’s fine except that the login form is
not showing up in a lightbox style, more like a regular page.
Check my URL, i’ve put the login at the top
It seems that the Lightbox code doesn’t work correctly.
I checked and double checked, the Lightbox folder is untouched in the themes directory
Any ideas?
-Christer
Christer,
The problem is in the first bit of code you had to paste in. Did you copy it over exactly as it is above?
Instead of the proper path to the files, the code in your header looks like this:
The href=”” part is pointing to the wrong place.
Hi again,
yeah, i figured it was there, so i made a ‘../’ to point it up one level…now i put it back and i see it looks for the lightbox folder inside my contempt template folder. I’ll just move a copy of it there.
Thanks alot!
Christer,
No problem. Hope it works for you now. :)
Wrapping the /wp-login.php url in an I-Box works too,
then the login site is loaded in a div overlay.
Thanks for sharing this tutorial. I will be saving it so that I can make use of it with client websites myself.
Nice! I will definitely use this. Thanks!
Nice! I will definitely use this. Thanks!
——————————————————
http://www.submitmydesign.com
Thanks for the tut – I got it to work – kinda.
A couple of things
1. I want to use this on the home page for returning members
IF they are not a member how do I incorporate the registration functionality.
2. The Log In button is there but once logged in it does not display the user id
Once logged in the Log In link disappears but it does not give a def indication that one is logged in – Is this line of code “( !$user_ID )” supposed to display the user name or did/am i missing a step.
3. the “remember me” function – is it supposed to remember me so that I don’t have to enter my credentials each time I visit the site or does it play a diff role? Because it is not remembering me (yes cookies are active)
4. When I enter the wrong login info it goes to the reg wp-login page.
Is it possible to display that “wrong log in” on the overlay.
Overall goal here is to eliminate the WordPressyness if that makes sense
This looks beautiful – lightbox has been my favorite – amazing without being too flashy.
I remember WPDesigner having a tutorial on placing a login form in sidebar or elsewhere so you can log in from any where – I’d reckon that method is lighter but not as beautiful.
Maybe you should add the login to PBD – so that we can track our comments and stuff, you know…
I’ve been using lightbox 2 for my images on my blog for some time. I like this implementation of it, and i’m able to use it for a login box on my dev site. I haven’t tried yet (for fear of causing a problem), but can I use the wordpress Lighbox plugin with this technique concurrently? Is there a way for me to just use this one instead and combine the functionality?
SWEET!!! got it working. just a note for other who might have the same trouble – /lightbox/ goes in “/themes/mytheme/” not “/themes/”. thanks muchly.
I’ve been using lightbox 2 for my images on my blog for some time. I like this implementation of it, and i’m able to use it for a login box on my dev site. I haven’t tried yet (for fear of causing a problem), but can I use the wordpress Lighbox plugin with this technique concurrently? Is there a way for me to just use this one instead and combine the functionality?
This is just a test
Hi,
Currently on my blog when someone wants to leave a comment they have to login first. I would like to make this process less painful using this format of your. I mean, only writting Name, Email and comments.
Could you please let me know how to achieve this or where to find information about it?
Thanks a lot.
Cheers!
Hi again, I just figured it out to do this. Anyway thank you for the post it is very useful.
I followed the instructions but it doesn’t work:
http://testsite.noquarterusa.net/
Helpful post. Thank you.
thank you for this tutorial
If I use Lightbox 2.0 wordpress plugin which already links to lighbox.js and prototype.js on my Money Makers Portal blog how can I overlay link using it?
Yep, that will work! :)
I’m searching wordpress login form plugin for my new wordpress site, but your way can get a nice login form. It’s a easy way to add it, Thanks!
thank for your helpfulness
:)
Very nice! I’m going to use this on my next blog.
It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
p.s. You have a very good template for your blog. Where did you find it?
Thanks for the complement, but sorry, this is a custom design. Can’t find it anywhere else :( I’ll probably release it eventually but not until I’ve stopped using it here! :D
ok, this is great and very helpful…though actually i would like to put it at the side bar. it works! but, my photo gallery -which used lightbox type too- doesn’t work anymore… any solution??
lol
very good idea
very good code :)
This is great – works like a champ.
Now, to take this one step further – if I wanted to present a signup form in a lightbox popup, do you have a sample of which code to take from wp-signup.php?
Thanks much, Michael – nice job!
I see a lot of post saying that this works but only sort of, I believe that most people are running into a conflict between JQuery and Prototype. They both use the $ selector.
One possible solution is loading the prototype library correcty using the wp_enqueue() functon. You can find more info at the codex http://codex.wordpress.org/Function_Reference/wp_enqueue_script
login page will be HTML:
Username:
Password:
(JS)javascript file code:
all cannot be shown
Nice tutorial. I was looking for this.
Nice tutorial. It is working on my website. Thanks.
Michael – this tut is fantastic and exactly what I was looking for. My only issue is that the overlay displays a blank box – none of the code from the login.php file appears. Any reason for this that you know of?
any solution to this yet?
Thanks for the great tutorial! Everything works great except for the redirect. After the user logs in from the Lightbox login, it redirects them to the standard login page for the blog. Is it possible to redirect to the page that the user clicked the login link from?
The URL http://www.connorwilson.com/2008/08/21/new_design_and_overall_changes/#respond is broken.
Wow, It just works fine!!!
Great tutorials, thank you very much for sharing!
Thanks for the code! I have been looking for these to be able to allow people to register on my blog. Good post!
Thanks for the awesome plungin, it works great! I had one questions, how I can expand this to include a registration option that opens in the lightbox? And when someone logs in, the redirect sends them to the wp-login page, not to the main site page, how can I fix that? Thanks again.
Great Tutorial ! I’m just wondering how..my name, email and url..were automatically filled..Let me know about this also.
This is great, you can save time and effort every time you log in to your blog. And you can edit in just few seconds. Thanks for sharing, I will try this one too.
this is great! Thanks so much for sharing this! Now off I go to implement it. :)
Okay, so I got it to work…with exception to the lightbox feature. =( For those of you guys who got it to work, could you go to http://www.rankingchannel.com and click on the little green icon at the upper right corner of the page? I can’t seem to figure out how come it’s not opening up the nice lightbox screen.
Any input would be EXTREMELY helpful!
<link rel="stylesheet" href="/wp-admin/css/login.css” type=”text/css” />
This css file is not load in IE lightbox.
Works fine in FF.
This doesnt work in IE. The link to the stylesheet doesn’t load.
Ok just wanted to give an update to my previous comment. I was able to figure this out for IE and this should also help Ludou if you haven’t figured it out yet. The login.php page should have everything for a php page like the and tags. Make sure to put the right before the tag and it should work with no problem. I hope this helps some of you.
Ok another problem I am having…I am able to get the lightbox to load properly now in IE but my blog never actually loads that I logged in properly. If i put the right username and password in the lightbox it redirects me back to the comments page and if I log in unsuccessfully I get the wp-login.php page telling me my un/pw is incorrect so its checking the credentials correctly but its not posting properly to tell the comments.php page that I’m logged in. Anyone have any ideas?
Michael Martin,
I LOVE YOU! Thanks HEAPS for the tute!!
Hi I seem to be having a conflict problem with this form overlay and the wordpress digg digg plugin (creates a moving social media column to the right of blog posts).
The digg digg works fine untill i add the 3 lines of code into the header.php and then the login form overlay works but the digg digg stops moving.
I want to get both working – any ideas?
Steve
Oh the login form overlay should show when you click on the top right “login” link
domain connorwilson.com expired
Hi
Thanks for very useful and handy tips for overlay login form. I have implemented the same in http://www.askmehow.in comment form.
Keep it up your good work.
Hi, it seems this mod doesnt work with adbrite, i get a blank page plus the following info when trying to click on the login.
AdBriteRender_75f31a7d_65ea_494e_ae22_71f33869baee(); //–>AdBriteRender_fbe9a16b_c76f_4fa7_8b55_8d8d42f98daf(); //–>
I have my own login form fields. If i want to use this script then
1)what is the action url I have to set in form?
2)If I want my own registration form then?
Please help!
test
I would also like to have this functionality for the registration screen. Please help. thanks!
I think my clients will be satisfied with this script. Thanks
J
Hi,
just a small comment. The #respond on the line 23 is causing redirection to the WP Login page instead back to the article, delete it if you are not implementing it on comments section of your blog, but general.
btw.
<?php is better then <?, personaly I had some trouble with this short form :)
Cheers
if you use <?xml Or <?php ? They Don't know so dont use short form. Either <?= or <?xml.
hi this is lovely post i bookmarked it and a will take part in your discussion.thanks
hi,
how can i put value into textbox inside the overlay in just one click using php-mysql?
thanks
I created a really different looking WordPress login screen using some custom CSS without changing the core WordPress files:
http://e.mp/wp-login.php
I want to add an image to the background of the lightbox …. where
background:#FDFCE9; this colour code is used in the lightbox.css file …
please help …
when I try to ad any image the background becomes transparent ….
Hi there,
I’ve tried it and it’s working fine. However I want it to position it to appear on the bottom right corner of my page, right above the login button. I managed to do that, but I’m getting 2 problems:
1- When I resize the browser window, the lightbox seems to move along with the window and not with the container, is there a way to link it to the container?
2-When I open it and press OK or Cancel, if I want to open it again, it won’t. I have to refresh the page so that the lightbox works again.
If someone could help me out with these, it would be much appreciated!
Thanks!
Martin
I want to create a login form on my main domain. The login link will be in the top right hand corner of the site.
Once the user has confirmed there details, it will redirect them to subdomain.mydomain.com.
But I’m not fully sure how to do this. Can anyone help? Can the code above be altered?
Cheers
Призводим и продаём строительные бытовки и металлические блок-контейнеры. Доставка!
Great tutorial. It seems to work fine but I would like to add my logo to the background. Where is this possible in the CSS?
The instructions that were given in making a wordpress with the use of the overlay is can be very helpful to different users.
Great Tutorial! Thank you for posting. I’ll try it on my website soon. ^^
This Method is a little bit difficult to implement.
Is there any simpler way to integrate login system in wordpress using some plugins ?
Great tut, but it seems it may be outdated a tad…. the permalink line directs me to a random blog post on my site http://pinnaclenetworking.com. All works great however… cheers….
Hi!
Did you use this tutorial in your website http://www.pinnaclenetworking.com/?
Awesome… I just made the easiest fix as it just added my base url…. (my log in is just on my home page…)
excelent tip, same way you can use the function wp_login_form(); and just modify the form css.
Thanks for the tremendous material found within your site, what follows is a little quiz for your blog website readers. Who proclaimed the following quotation? . . . .Always treat a famous person as if they’re not, and a person who’s not as if they were.
Hello,
thank you for the info, i´ll try to establish a user driven picture site. So this is good way to go.
See you
Is there a way i can make this pop as soon as anyone enter the site? So they wont be able to access it before loging in?
Thank you ! this is very useful.
Awesome tutorial! worked fine except for the light box :) thanks for sharing!
Thanks for really good tutorial.
Best regards.
Thanks for giving this tutorial. I would like to get such kind of tutorial for free. It is so much innovative and creative. The shadow makes the layer effective and make it stunning.
I loved your article again as it has no competent. Further I’m waiting more articles like this.
Hi,
Nice article.
I created some plugins in wordpress.Once visit my site http://www.wordpressstop.com and download all the plugins for free of cost.
Prasad ASRK.
Nice article.
Once visit http://www.wordpressstop.com to get lot of stuff regarding to WordPress.
Again, a very interesting and simple to get working tutorial, thank you very much!
By the way, just for “consistency” matters, can we use a lowercase title for all the tags (“L”ogin, “l”ogout) so people could style both the same way with a single CSS declaration??
Awesome, I will create own one
Бизнес-центр класса “В+” “Авион” в 2005 году стал победителем в номинации «Лудший бизнес-центр» (CRE Awards). БЦ “Авион” (Avion), располагаясь в районе Аэропорт, неслучайно носит такое название, в переводе с французского “Avion” означает самолет! Фасад здания делового комполекса “Авион” выполнен в совренном стиле. Помещения полностью подготовлены к въезду арендатора, в офисах уложен ламинат, кафель, установлены подвесные потолки, выполнена окраска стен.
снять офис москва
Great tutorial. Can u re create for WordPress 3.0 ?
Thanks, It’s a good help at the site I am working on. http://www.inceptionva.com/Life-Coaching-World/
You should do a separate blog post for thesis theme as it is used by many of the bloggers.
chicago weight loss
Hi,
i just try it and its working.
but how to set if login wrong it’s not go to regular wp login? currently it will go to wp-login.
Thank you
between species
thank you for explaining in a simple way :)
Hi, so am I right in saying this would make your users have to login every time they visit your site? (like facebook)
Sweet… same with android and me. I love their lightbox login and custom user profile based on WordPress and this is exactly what I need :D
патчи на STALKER
i try it and its working perfectly. it is perfect solution i like it. it will be very useful for wordpress developer..
thanks.
I am trying to create a login form where each of my customers can login and get directed to their specific urls as their information is going to be private and I dont want anyone to see their individual information. How do I get this done? I also dont want anyone to be able to log into or open their info when they have the link it should go to the login page first
I need to use the overlay on the homepage underneath the banner but I am getting a normal html page. Can you please have a look and tell me what I could be doing wrong
I have traced back my steps and managed to figure out what was wrong. Is it possible to completely disable the page when the overlay is active?
Do you have a spam issue on this website; I also am a blogger, and I
was wanting to know your situation; many of us have
created some nice procedures and we are looking
to exchange techniques with other folks, please shoot me an email if interested.
The link to the ConnorWilson website doesn’t exist any more, and sometimes redirects to a Ziinga spam site or whatever.
Mike Kennedy,
TooLazyToPost.com – Advertise Your Posts
Do you have a spam issue on this blog; I also am a blogger,
and I was wondering your situation; many of us have created some nice
procedures and we are looking to exchange solutions
with other folks, please shoot me an e-mail if interested.