How to Build a Top Sliding Login Panel

Published On August 27, 2009
65 Comments Leave a Comment

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 :-

DEMO SLIDING LOGIN PANEL

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>) :-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide-panel").slideToggle("slow");
}); 
});
</script>

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 :-

<div id="slide-panel"><!--SLIDE PANEL STARTS-->
<?php if ( ! is_user_logged_in() ){ ?>
<h2>Login</h2>
            <div class="loginform">          
                    <div class="formdetails">
                    <form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
                    <label for="log">Username : </label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" />&nbsp;&nbsp;&nbsp;&nbsp;
                    <label for="pwd">Password : </label><input type="password" name="pwd" id="pwd" size="20" />
                    <input type="submit" name="submit" value="Login" class="button" />
                    <label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label><input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />
                    </form>
                    </div>
            <div class="loginregister">
                    <a href="<?php echo get_option('home'); ?>/wp-register.php">Register</a> | 
                    <a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Recover password</a>
                    </div>     
            </div><!--loginform ends-->
<?php } else { ?>
			<div class="loginform">
                    <h2>Control Panel</h2><ul>
                    <li><a href="<?php echo get_option('home'); ?>/wp-admin/">Dashboard</a></li> | 
                    <li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Write new Post</a></li> | 
                    <li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Write new Page</a></li> | 
                    <li><a href="<?php echo wp_logout_url( get_bloginfo('url') ); ?>" title="Logout">Logout</a></li></ul>
            </div><!--loginform ends-->
<?php }?>
</div><!--SLIDE PANEL ENDS-->
<div class="slide"><a href="#" class="btn-slide"><?php if ( ! is_user_logged_in() ){ ?>Login<?php } else { ?>Logout<?php }?></a></div><!--LOGIN BUTTON TEXT-->

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.

65 replies on “How to Build a Top Sliding Login Panel”

Can I simply say what a relief to uncover somebody who actually knows what they
are talking about on the net. You certainly realize how
to bring a problem to light and make it important. More people ought to
read this and understand this side of the story.
I was surprised you aren’t more popular given that you definitely have the gift.

Hey there! I simply would like too give you a huge thumbs up foor the excellent info you’ve got right here on this post.
I’ll be returning to your web site for more soon.

When I originally left a comment I appear to have clicked the -Notify me when new comments are added- checkbox and from now on each time a comment is added I recieve 4 emails with the same comment. Perhaps there is a means you are able to remove me from that service? Appreciate it!

We absolutely love your blog and find the majority
of your post’s to be precisely what I’m looking for.
Would you offer guest writers to write content in your case?

I wouldn’t mind producing a post or elaborating on many of the subjects you write about here.
Again, awesome weblog!

I’ve learn several just right stuff here.
Certainly value bookmarking for revisiting. I surprise how
a lot attempt you place to make this kind of fantastic informative site.

I left my site name in the “Website” part of the comment form but it did not show up in the comment, so I will leave it in this comment in case there is someone besides the admin that can help me with this.

I have done everything correctly, but the login isnt coming up correctly. I thought I saw something on a different page about editing their top margin so it would fit correctly…Im not positive if that is what I have to do, but can you please help me make this adjustment? Please go check out my site…when you click login, you will see that when it slides down, the form comes outside of the black slider. I am sure it is a very easy fix, but Im not sure how to do it and I don’t want to mess anything else up. Please help me asap! I don’t want to leave it up for too long. Thank you!

I’m impressed, I must say. Seldom do I encounter a blog that’s both educative and
engaging, and let me tell you, you have hit the nail on the head.
The problem is something that too few folks are speaking intelligently about.

Now i’m very happy I came across this during my search for something regarding
this.

I’m impressed, I must say. Seldom do I encounter a blog that’s both educative and
engaging, and let me tell you, you have hit the nail on the head.
The problem is something that too few folks are speaking intelligently about.

Now i’m very happy I came across this during my search for something regarding
this.

You really make it seem so easy with your presentation but I find this matter to be really
something which I think I would never understand. It seems too
complicated and extremely broad for me. I am looking forward for your next post, I will try
to get the hang of it!

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 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?

Chelle Reply

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 🙂

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!!!

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…

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

Isma Reply

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!!

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.

Jai Reply

@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!

Leave a Reply to Chelle Cancel reply

Your email address will not be published. Required fields are marked *