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

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.