WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0

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.

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. danielbounds71 left a comment on September 19, 2016 at 1:47 pm |

    Cung c?p LINH KI?N LASER

  2. adrianandres3 left a comment on May 23, 2016 at 4:06 pm |

    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!

  3. xixi left a comment on March 23, 2016 at 1:37 am |

    PU gasket sealing equipment
    It can meet the demands of different manufacturer tablet and notch glues. Besides, it also has one-button switching function on the computer for the convenient of customer use.
    http://www.hgcx.cn/en/index.php?p=product_show&id=312&c_id=36&o_id=&lanmu=12

  4. saminbhp left a comment on December 23, 2014 at 4:14 am |

    I tried running it “localhost/campuslunchbox/header.php” but nothing was shown. White blank page. Help please.

  5. como ganar dinero rapido left a comment on March 17, 2014 at 5:46 pm |

    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!

  6. neal left a comment on January 25, 2014 at 5:19 am |

    woooww great

  7. Johnie left a comment on December 5, 2013 at 5:08 am |

    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.

  8. Zach left a comment on November 29, 2013 at 4:12 pm |

    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.

    http://www.free-spree.com

    Thanks!

  9. Zach left a comment on November 29, 2013 at 4:10 pm |

    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!

  10. get more youtube views free left a comment on November 28, 2013 at 7:38 am |

    If some one wishes expert view regarding blogging and site-building afterward
    i propose him/her to visit this weblog, Keep up the good work.

  11. https://www.youtube.com/watch?v=JSfLa0Snh6k left a comment on November 25, 2013 at 5:19 pm |

    Very great post. I just stumbled upon your blog and
    wanted to say that I’ve truly loved surfing around your
    blog posts. In any case I’ll be subscribing to your
    feed and I am hoping you write once more very soon!

  12. gta san andreas free download setup left a comment on November 24, 2013 at 10:13 am |

    Sweet blog! I found it while browsing on Yahoo News.
    Do you have any suggestions on how to get listed
    in Yahoo News? I’ve been trying for a while but I never seem
    to get there! Many thanks

  13. burger king coupons 2013 left a comment on November 22, 2013 at 2:13 pm |

    Hey There. I found your weblog the use of
    msn. This is a really neatly written article.
    I’ll be sure to bookmark it and return to read extra of your helpful info.
    Thank you for the post. I’ll certainly return.

  14. Thanh left a comment on November 19, 2013 at 1:09 pm |

    I am regular reader, how are you everybody? This paragraph
    posted at this web site is really good.

  15. x?l?soft video converter left a comment on November 14, 2013 at 7:01 am |

    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.

  16. x?l?soft video converter left a comment on November 14, 2013 at 7:00 am |

    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.

  17. Brandie left a comment on October 18, 2013 at 5:48 am |

    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!

  18. lala left a comment on July 31, 2012 at 4:35 pm |

    simply and useful! Thanks

  19. pomoc prawna left a comment on December 29, 2011 at 8:45 pm |

    Heutzutage kann niemand das Leben ohne Computer vorstellen. Was die Arbeit und die Studie wΓ€re ohne sie aus?

  20. imtiaz left a comment on January 10, 2011 at 5:09 am |

    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?

    • imtiaz left a comment on January 10, 2011 at 5:20 am |

      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

  21. Trivikram left a comment on November 10, 2010 at 1:15 am |

    I Tried to debug the code to get the display in IE. There is a Dropdown menu in my home page , Now its not working. I think there is a Javascript error.

    Regards,
    Trivikram.

  22. mmx left a comment on October 15, 2010 at 4:21 pm |

    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?

  23. Chelle left a comment on October 6, 2010 at 1:52 pm |

    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 πŸ™‚

    • Chelle left a comment on October 6, 2010 at 1:53 pm |

      Oops, forgot WordPress would not show it…

      Hopefully now you can see what to eliminate πŸ™‚

      • Bruno left a comment on January 28, 2011 at 7:34 am |

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

  24. Luke left a comment on October 1, 2010 at 7:48 am |

    How can I modify the code to link to a subdomain?

    I want the slider bar to appear on http://www.mydomain.com

    I then want the user to be logged into clients.mydomain.com.

    Any help would be great πŸ™‚

  25. Art Eppley left a comment on September 28, 2010 at 10:43 am |

    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…

  26. Carter left a comment on August 23, 2010 at 8:00 am |

    Is anyone else having the issue where the URL/wp-admin goes to a 404 once this drop down is installed?

  27. Daniel left a comment on August 14, 2010 at 8:24 pm |

    Just an excellent way to make more easy the login ,thanks so much!

  28. Daku left a comment on May 8, 2010 at 12:38 pm |

    It`s wonderfull yes. Works perfect … Thanks for this tutorial.

  29. 10top left a comment on March 7, 2010 at 12:01 pm |

    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

  30. melandria left a comment on March 3, 2010 at 10:00 pm |

    i tried this to my new website but it did not work. what could be the problem?

  31. Rick left a comment on January 14, 2010 at 10:57 am |

    Neat feature. Thank you very much!

  32. Isma left a comment on January 14, 2010 at 7:25 am |

    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

  33. Steven M. left a comment on December 29, 2009 at 4:52 pm |

    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.

  34. Scott left a comment on December 26, 2009 at 10:14 am |

    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.

  35. Scott left a comment on December 26, 2009 at 10:00 am |

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

  36. Scott left a comment on December 26, 2009 at 9:14 am |

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

  37. apad left a comment on December 19, 2009 at 3:49 am |

    Hey nice hack but it doesn’t run on Chrome..

  38. Sujith left a comment on November 27, 2009 at 8:33 pm |

    Thanx for this wonderful post. It is really helpful.

  39. iAreCow left a comment on November 2, 2009 at 7:43 am |

    Really nice tutorial! πŸ˜‰

  40. zulsdesign left a comment on October 29, 2009 at 8:31 pm |

    thank for tutorial. i’m using this in http://cahayaislam.com

    Great!

  41. Omega left a comment on October 24, 2009 at 1:33 pm |

    Dude it does not work on webs, can u email em one for webs thanks man.

  42. Cemination.Blogspot left a comment on October 17, 2009 at 3:05 am |

    Great thanks a lot !!! but does it works with blogger , becasue I’m using Blogger and this is my blog http://cemination.blogspot.com

    Thanks

  43. Credito Pessoal left a comment on October 12, 2009 at 6:24 am |

    Really nice tutorial. I have a site with some members and this is quite handy. Thanks mate!

  44. lloyd daniels left a comment on October 6, 2009 at 6:10 pm |

    looks cool, I bookmarked your site. Simple and detailed instructions, thanks.

  45. yon ade left a comment on October 6, 2009 at 3:23 am |

    thanx. I like

  46. CT left a comment on October 5, 2009 at 3:48 pm |

    nice info and tut jai..thanks

  47. Kimi left a comment on September 23, 2009 at 6:58 pm |

    thanks very much! i like it ^ ^

  48. List Building Basics Blog left a comment on September 22, 2009 at 1:47 am |

    Thank you for this helpful information. I will it.

  49. Babloo left a comment on September 19, 2009 at 7:35 am |

    Ya this is gr88 and i installed on my site thanx.if u have any new scripts update me

  50. Anthony left a comment on September 7, 2009 at 12:30 am |

    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

  51. Zugvogel left a comment on September 3, 2009 at 1:32 pm |

    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.

  52. yoshz left a comment on August 31, 2009 at 6:32 pm |

    nice info and tut jai..thanks

  53. Vunom left a comment on August 31, 2009 at 1:55 pm |

    simpl , powerful and useful!
    Thanks

  54. Tim Jones left a comment on August 28, 2009 at 8:26 pm |

    Do you have a version that uses Moo Tools. jQuery messes with my membership system.

    Cheers,

    Tim J.

  55. Tram Giang left a comment on August 28, 2009 at 3:39 am |

    Thanks for sharing this tut with us. You are always awsome πŸ™‚

  56. nice left a comment on August 27, 2009 at 12:41 pm |

    simply and useful! Thanks

  57. Josh Stauffer left a comment on August 27, 2009 at 9:44 am |

    Dang, that was easy. Thanks for breaking it down for us. It is sometimes amazing how something so simple can make visitors go “”Woh!” when they visit a site.

    Thanks Jai!

  58. Jai left a comment on August 27, 2009 at 9:00 am |

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

  59. baloot left a comment on August 27, 2009 at 7:52 am |

    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!

  60. Adam W. Warner left a comment on August 27, 2009 at 6:39 am |

    This is great and informative, however, Justin Tadlock already built this into a plugin here: http://justintadlock.com/archives/2009/06/25/sliding-panel-wordpress-plugin

Leave a Comment

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

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project