How to Create a Sliding jQuery Login Panel for WordPress

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.

{code type=php}
{/code}

You’ll want to paste it in right before you see this tag: {code type=html}{/code}

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

{code type=html}


<?php if ( ! is_user_logged_in() ){ ?>

Login





<?php } else { ?>


<?php }?>

{/code}

Paste this in directly after you see this tag: {code type=html}{/code}

3. Add the CSS to your style.css file.

{code type=css}* {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;}{/code}

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

Related posts: