How to Build a Top Sliding Login Panel
Many times, I get requests from my clients who want to implement a Sliding Login Panel at the top of their WordPress blogs. With jQuery and the WordPress default login code, its very easy to build. Here is what it will look like :-
The above demo is only HTML code and will not work with your WordPress blogs. In order to implement it into your WordPress themes, here is what you have to do :-
Javascript
In your wordpress theme (where you want to implement the sliding login panel), open up the header.php file. Paste the following code just before the head ending tag (< /head>) :-
The above script will call jQuery using Google API and also initiate the sliding effect into your login panel.
HTML
In the same header.php file, right after the body tag (< body>) starts, paste the following code :-
Login
Control Panel
The above code will integrate the sliding panel on top of your wordpress theme.
CSS
Now, all we are left with is styling the panel. Open up your style.css file and paste the following at the end of the file :-
* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right; display:block;font-size:14px; text-transform:uppercase; font-weight:bold;height:26px; padding:3px 0 3px 0;line-height:22px;text-align:center;text-decoration:none;width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999; font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px; background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF; font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF; font-size:12px; text-decoration:underline;}
Now, try running your theme. Voila! You have a fully functional Sliding Login Panel of your own! Let me know if you have any issues.
Heutzutage kann niemand das Leben ohne Computer vorstellen. Was die Arbeit und die Studie wäre ohne sie aus?
hi – installed but strange behvaiour.
On my homepage, once logged in, the applet doesnt appear to realise the user is logged in. However, when i change to another page on the site, the login changes to logout and it recognizes im logged in. When i go back to homepage it shows as logged out again. Bizzare. any ideas?
looking closer… if i hit CTRL+f5 then it recognizes I am logged in at the homepage, but after initial login, this is not the case. Needs a refresh to acknowledge
I Tried to debug the code to get the display in IE. There is a Dropdown menu in my home page , Now its not working. I think there is a Javascript error.
Regards,
Trivikram.
I cant get it to work. Im using the mystique theme. And I dont know what chelle wanted to write about that code to remove as it didnt get pasted here. Anyone knows?
This worked perfectly for me. Thank you as always for awesome stuff I stumble across! A note if anyone is using this with a theme that already has javascript (such as one with a slider for example) you might need to eliminate the code:
from the beginning (but leave the rest of the script info) – that’s what I had to do at least to get my slider and this play nicely together
Oops, forgot WordPress would not show it…
Hopefully now you can see what to eliminate
Hi Celle,
Can’t make my slider and the sliding panel work together in my website, and the code isn’t showing in your message. Can you post it again?
Thanks a lot!!!
How can I modify the code to link to a subdomain?
I want the slider bar to appear on http://www.mydomain.com
I then want the user to be logged into clients.mydomain.com.
Any help would be great
Hey, I’ve implemented this, however, I can’t figure out why my menu and a few other elements “show through. Is there something I can put in your CSS to make it appear “overtop? or a content push might be ok…
Is anyone else having the issue where the URL/wp-admin goes to a 404 once this drop down is installed?
Just an excellent way to make more easy the login ,thanks so much!
It`s wonderfull yes. Works perfect … Thanks for this tutorial.
I enjoyed reading your interesting yet very informative insights. I just love reading about 10 top anything and everything under the sun. Thank you for sharing and I am looking forward to reading your newest and most recent blogs on 10 top!!!
– 10top
i tried this to my new website but it did not work. what could be the problem?
Neat feature. Thank you very much!
Hi everybody this is such a must get feature.What’s both amazing and surprising is that this feature attracts visitors to register onto your site.Just take your hat off to he who did that tut out.
By the way,Lately I’ve created a music web site on which i’ve installed a phpBB3 forum.I plan to sell beats and instrumentals online.I shall probably not have a chance to give it my full attention quite yet, due to some other projects and music production.But i need admins and Mods to help me.Hit me up if you are interested
Unbelievably amazing. I am impressed with this feature as it has enhanced by designs look and feel for not only myself, but my other staff members. Excellent work, we have also signed up for your affiliate program to promote your work and others that are publishing theirs here as well.
Best regards,
Steven M. & Hosting Feedback Inc.
One last question. Would there be anyway to put the recover password and register forms in the slider as well? This is preferable to having links to the existing pages. Thanks again for the help.
@Scott:-
Dis regard my last comment (and the email I sent) – I fixed my problem. It was on my end, and erroneous margin in my CSS. Thanks so much for the tut guys – this was exactly what I needed!
I’m setting up a website for a client and I’ve implemented this as you said and everything works great, except for one small thing. When the panel slides out it adds some unwanted space between the browser (where the slide panel should start) and the beginning of the panel. This makes it so you can see a piece of the background image – which of course shouldn’t happen. The website is thepuffnstuff.com – any ideas would be greatly appreciated!!
Hey nice hack but it doesn’t run on Chrome..
Thanx for this wonderful post. It is really helpful.
Really nice tutorial!
thank for tutorial. i’m using this in http://cahayaislam.com
Great!
Dude it does not work on webs, can u email em one for webs thanks man.
Great thanks a lot !!! but does it works with blogger , becasue I’m using Blogger and this is my blog http://cemination.blogspot.com
Thanks
Really nice tutorial. I have a site with some members and this is quite handy. Thanks mate!
looks cool, I bookmarked your site. Simple and detailed instructions, thanks.
thanx. I like
nice info and tut jai..thanks
thanks very much! i like it ^ ^
Thank you for this helpful information. I will it.
Ya this is gr88 and i installed on my site thanx.if u have any new scripts update me
these steps you have explained did not work for me.. i followed the same exact steps you introduced in this blog.. can you please help me. thanks, you may email me anytime
This is great. I love it.
Maybe it could be useful to change the arrow next to the login handle.
just to make clear, that you can close the panel, when you click the handle again.
nice info and tut jai..thanks
simpl , powerful and useful!
Thanks
Do you have a version that uses Moo Tools. jQuery messes with my membership system.
Cheers,
Tim J.
Thanks for sharing this tut with us. You are always awsome
simply and useful! Thanks
Dang, that was easy. Thanks for breaking it down for us. It is sometimes amazing how something so simple can make visitors go “”Woh!” when they visit a site.
Thanks Jai!
@Adam W. Warner:- What Justin Tadlock built is a widgetized panel where you can put your sidebars etc. (also your code if you know what you are doing). But for some strange reason, the plugin didn’t cut it for me. So, I built a hard coded panel that will 100% work if you integrate into your theme.
@baloot:- Yes, Baloot. Black is always more elegant.
jai, thanks a lot for this wordpress login tips. i will apply to my blog asap. i really love this style. i can see this style on DIYTHEMES.COM. it was yellow color.
but i really love BLACK… looks more elegant, right jai?
well jai, have a nice weekend!
This is great and informative, however, Justin Tadlock already built this into a plugin here: http://justintadlock.com/archives/2009/06/25/sliding-panel-wordpress-plugin