January 25, 2010 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. :)
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" /> <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. :)
Featured Plugin - WordPress + Google Maps = Perfect
Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more
Featured Plugin - Every great SEO tweak you need, in one snazzy bundle
Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more
Featured Plugin - Start your own Quora / StackOverflow / Yahoo Q&A site
It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more
Featured Plugin - Start Your Own Powerful Membership Site
If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more
Featured Plugin - Easily integrate your WordPress site with Facebook
Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more
Featured Plugin - Send beautiful html email newsletters, from WordPress!
Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more
Featured Plugin - Turn any WordPress page into a fully featured wiki!
To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more
Featured Plugin - Host sites, get paid, just like WordPress.com
If you've ever wondered how you could offer a paid site management and hosting service, then this is the plugin for you. Offer a freemium or paid service, for any niche you like, it's powered Edublogs.org to success already!
Find out more
Featured Plugin - Add bottom corner (or anywhere else) chat to your site
No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more
Or.. you just use Justin Tadlock’s great plugin that takes care of this for you Sliding Panel
True. Looks like a good plugin. Does it integrate with BuddyPress and WPMU too? I haven’t tested it.
(Too bad you don’t have reply / and threaded comments activated on this site)
I haven’t tested it myself yet, but I see no reason why it would conflict to be honest.
Pingback: WordPress Tutorials
Justin also puts almost everything in functions.php through hooks so you don’t have to touch the underlying files and screw up an upgrade. Doing it the way in the tutorial is fine, but you better have a mechanism to keep track of all of your customizations when upgrade time comes. Doing everything through functions.php can be a pain to learn, but is very powerful when you get good at it.
Very smooth. Too bad though that it doesn’t work when JavaScript is turned off, which it could if the logic worked the other way (“When JS is on, hide login”)
Great tutorial, but I have a problem:
ok with the login, but the logout button and panel is 30px from the top of the screen. How can I fix it.
Thanks.
Pingback: Notable Tech Posts – 2010.02.21 | The Life of Lew Ayotte
Pingback: The Ultimate Guide To JavaScript in Web Design | AddyOsmani.com | Where Web Businesses Grow
Pingback: The Ultimate Guide To JavaScript in Web Design | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
ТолÑтой тоже пиÑал, но только не вÑе его читали ;)
very nice tutorial
thanks
keep it up
Pingback: 54 jQuery Tutorials and How Tos