Clean up your home page and save space with this simple technique. There are quite a few tutorials available for sliding login panels, but I wanted to present this one because it’s a fairly minimalist, bare-bones example that you can customize further. If you’re looking for a quick way to update your site’s login interface, have a look at the example below. It’s as easy as copy and paste. :)

login

Check out an active DEMO SLIDING LOGIN PANEL.

Here are the basic instructions for WordPress and WPMU in three easy steps:

1. Add the JavaScript to your header.php file.

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

You’ll want to paste it in right before you see this tag: 

</head>

2. Add the HTML to the header.php file.

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

Paste this in directly after you see this tag: 

<body>

3. Add the CSS to your style.css 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;}

That’s it – you’re finished! So simple, wasn’t it?

If you’d like to use this with BuddyPress, just make sure you the sequence to the appropriate files. Assuming you’re using the default theme, you’d add them as shown here:

JS: /themes/your-child-theme/header.php
HTML: /themes/your-child-theme/header.php
CSS: /themes/your-child-theme/_inc/css/screen.css

Credits for this technique go to the folks over at Blog Oh! Blog. Though it was written for single user WordPress, I’ve tested it in WPMU using the default theme and it works just fine with a little bit of additional top margin adjustment. If any of our readers customize this for their sites, we’d love to check them out. Leave a link to your customized login in the comments. :)

Post to Twitter Tweet This Post