7
Apr
2009
Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+
By jeeremie. Posted in AJAX / Javascript, WordpressAbout one week ago, I introduced the Nice & Clean Sliding Login Panel built with jQuery which was a redesigned of my popular Mootools sliding panel. Today, we will see how to implement it in Wordpress 2.7+. Please note I am not going to cover any previous version of Wordpress in this tutorial.
Before I give you the code, let me briefly explain you what we want to achieve.
If user didn’t log in or register yet, we will show the login and register forms in the sliding panel with a short Welcome Message:
Once user is logged in, we will change panel content to show a dashboard menu with a short “Welcome Back” message. This is what our code will look like:
<!-- Panel --> <div id="toppanel"> <?php global $user_identity, $user_ID; // If user is logged in or registered, show dashboard links in panel if (is_user_logged_in()) { ?> <!-- Dashboard menu will come here --> <?php // Else if user is not logged in, show login and register forms } else { ?> <!-- Login and Register forms will come here --> <?php } ?> </div> <!--END panel --> |
Simple, isn’t it?
Wordpress, since version 2.0, introduced user roles and capabilities. To take advantage of this, we are going to use the current_user_can() function to control what links users can or cannot see depending on the role attributed to them. This is done like this:
<?php if ( current_user_can('level_10') ) : ?> <!-- Content placed here will only be seen by ADMINS of the site! --> <?php endif ?> |
“level_10″ is the highest level in Wordpress and gives user full control and access to the site. This level is reserved to the owner of the site and admins. You can read more about user roles here »
Below is a screenshot of the panel display for admins (‘level_10′):
Below is a screenshot of the panel display for authors (‘level_2′):
Below is a screenshot of the panel display for subscibers (‘level_0′):
The last screenshot looks really empty because Subscribers have only a limited access to the dashboard. You can try to fill the panel with some extra content for subscribers and contributors if you don’t want your panel to look so empty. It is up to you.
STEP 1: The HTML code
(Note: For the sake of this tutorial, I am going to implement the script into the default Wordpress 2.7 theme (wp-content/themes/default).)
Open header.php in your text editor or log in to your dashboard and navigate to Appearance > Editor and select this file. Find the code below and delete it:
<?php wp_head(); ?> </head> <body> |
Replace it by this:
<?php wp_head(); ?> <!-- PNG FIX for IE6 --> <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 --> <!--[if lte IE 6]> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/pngfix/supersleight-min.js"></script> <![endif]--> <!-- jQuery - the core --> <script src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js" type="text/javascript"></script> <!-- Sliding effect --> <script src="<?php bloginfo('template_url'); ?>/js/slide.js" type="text/javascript"></script> </head> <body> <!-- Panel --> <div id="toppanel"> <?php global $user_identity, $user_ID; // If user is logged in or registered, show dashboard links in panel if (is_user_logged_in()) { ?> <div id="panel"> <div class="content clearfix"> <div class="left border"> <h1>Welcome back <?php echo $user_identity ?></h1> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <h2>Dashboard</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Go to Dashboard</a></li> </ul> </div> <div class="left narrow"> <h2>My Account</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Global Dashboard</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Edit My Profile</a></li> <?php if ( current_user_can('level_1') ) : ?> <li><a href="<?php bloginfo('url') ?>/wp-admin/edit-comments.php">Comments</a></li> <?php endif ?> <li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li> </ul> <?php if ( current_user_can('level_10') ) : ?> <h2>Appearance</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/themes.php">Themes</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/widgets.php">Widgets</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/theme-editor.php">Theme Editor</a></li> </ul> <?php endif ?> </div> <?php if ( current_user_can('level_2') ) : ?> <div class="left narrow"> <h2>Posts</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Post</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Edit Posts</a></li> <?php if ( current_user_can('level_3') ) : ?> <li><a href="<?php bloginfo('url') ?>/wp-admin/edit-tags.php">Tags</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/categories.php">Categories</a></li> <?php endif ?> </ul> <?php if ( current_user_can('level_10') ) : ?> <h2>Plugins</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Plugins</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-install.php">Install a Plugin</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-editor.php">Plugin Editor</a></li> </ul> <?php endif ?> </div> <?php endif ?> <?php if ( current_user_can('level_2') ) : ?> <div class="left narrow"> <?php if ( current_user_can('level_3') ) : ?> <h2>Pages</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Page</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Edit Pages</a></li> </ul> <?php endif ?> <h2>Library</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/upload.php">Library</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/media-new.php">Add New</a></li> </ul> <?php if ( current_user_can('level_3') ) : ?> <h2>Users</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/users.php">Author & Users</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/user-new.php">Add New</a></li> </ul> <?php endif ?> </div> <?php endif ?> <?php if ( current_user_can('level_10') ) : ?> <div class="left narrow"> <h2>Settings</h2> <ul> <li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">General</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/options-writing.php">Writing</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/options-reading.php">Reading</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/options-discussion.php">Discussion</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/options-media.php">Media</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/options-privacy.php">Privacy</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/options-permalink.php">Permalinks</a></li> <li><a href="<?php bloginfo('url') ?>/wp-admin/options-misc.php">Miscellaneous</a></li> </ul> </div> <?php endif ?> </div> </div> <!-- /login --> <!-- The tab on top --> <div class="tab"> <ul class="login"> <li class="left"> </li> <!-- Logout --> <li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li> <li class="sep">|</li> <li id="toggle"> <a id="open" class="open" href="#">Show Dashboard</a> <a id="close" style="display: none;" class="close" href="#">Close Panel</a> </li> <li class="right"> </li> </ul> </div> <!-- / top --> <?php // Else if user is not logged in, show login and register forms } else { ?> <div id="panel"> <div class="content clearfix"> <div class="left border"> <h1>Welcome to Web-Kreation</h1> <h2>Sliding login panel Demo with jQuery</h2> <p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p> <h2>Download</h2> <p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/articles/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27" title="Download">article »</a></p> </div> <div class="left"> <!-- Login Form --> <form class="clearfix" action="<?php bloginfo('url') ?>/wp-login.php" method="post"> <h1>Member Login</h1> <label class="grey" for="log">Username:</label> <input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" /> <label class="grey" for="pwd">Password:</label> <input class="field" type="password" name="pwd" id="pwd" size="23" /> <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label> <div class="clear"></div> <input type="submit" name="submit" value="Login" class="bt_login" /> <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/> <a class="lost-pwd" href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Lost your password?</a> </form> </div> <div class="left right"> <?php if (get_option('users_can_register')) : ?> <!-- Register Form --> <form name="registerform" id="registerform" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post"> <h1>Not a member yet? Sign Up!</h1> <label class="grey" for="user_login"><?php _e('Username') ?></label> <input class="field" type="text" name="user_login" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" /> <label class="grey" for="user_email"><?php _e('E-mail') ?></label> <input class="field" type="text" name="user_email" id="user_email" class="input" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" size="25" tabindex="20" /> <?php do_action('register_form'); ?> <label id="reg_passmail"><?php _e('A password will be e-mailed to you.') ?></label> <input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Register'); ?>" class="bt_register" /> </form> <?php else : ?> <h1>Registration is closed</h1> <p>Sorry, you are not allowed to register by yourself on this site!</p> <p>You must either be invited by one of our team member or request an invitation by email at <b>info {at} yoursite {dot} com</b>.</p> <!-- Admin, delete text below later when you are done with configuring this panel --> <p style="border-top:1px solid #333;border-bottom:1px solid #333;padding:10px 0;margin-top:10px;color:white"><em>Note: If you are the admin and want to display the register form here, log in to your dashboard, and go to <b>Settings</b> > <b>General</b> and click "Anyone can register".</em></p> <?php endif ?> </div> </div> </div> <!-- /login --> <!-- The tab on top --> <div class="tab"> <ul class="login"> <li class="left"> </li> <!-- Login / Register --> <li id="toggle"> <a id="open" class="open" href="#">Log In | Register</a> <a id="close" style="display: none;" class="close" href="#">Close Panel</a> </li> <li class="right"> </li> </ul> </div> <!-- / top --> <?php } ?> </div> <!--END panel --> |
STEP 2: Copy the CSS in style.css
Expand the code below, copy it and save it at the bottom of your theme stylesheet (e.g. wp-content/themes/default/style.css):
/* sliding panel */ #toppanel { position: absolute; /*Panel will overlap content */ /*position: relative;*/ /*Panel will "push" the content down */ top: 0; left: 0; width: 100%; z-index: 999; text-align: center; margin-left: auto; margin-right: auto; font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */ } #panel { width: 100%; height: 280px; color: #999999; background: #272727; overflow: hidden; position: relative; z-index: 3; display: none; } #panel h1 { font-size: 1.6em; padding: 5px 0 10px; margin: 0; color: white; text-align: left; } #panel h2{ font-size: 1.2em; padding: 10px 0 5px; margin: 0; color: white; text-align: left; } #panel p { margin: 5px 0; padding: 0; } #panel a { text-decoration: none; color: #15ADFF; } #panel a:hover { color: white; } #panel a-lost-pwd { display: block; float: left; } #panel ul { margin: 0 0 5px 0; padding: 0; line-height: 1.6em; list-style: none; } #panel .content { width: 960px; margin: 0 auto; padding-top: 15px; text-align: left; font-size: 0.85em; } #panel .content .left { width: 280px; float: left; margin-bottom: 25px; padding: 0 15px; border-right: 1px solid #333; min-height: 220px; } #panel .content .border { border-left: 1px solid #333; } #panel .content .narrow { width:120px !important; } #panel .content form { margin: 0 0 10px 0; } #panel .content label { float: left; padding-top: 8px; clear: both; width: 280px; display: block; } #panel .content input.field { border: 1px #1A1A1A solid; background: #414141; margin-right: 5px; margin-top: 4px; width: 200px; color: white; height: 16px; } #panel .content input:focus.field { background: #545454; } /* BUTTONS */ /* Login and Register buttons */ #panel .content input.bt_login, #panel .content input.bt_register { display: block; float: left; clear: left; height: 24px; text-align: center; cursor: pointer; border: none; font-weight: bold; margin: 10px 0; } #panel .content input.bt_login { width: 74px; background: transparent url(images/bt_login.png) no-repeat 0 0; } #panel .content input.bt_register { width: 94px; color: white; background: transparent url(images/bt_register.png) no-repeat 0 0; } #panel .lost-pwd { display: block; float:left; clear: right; padding: 15px 5px 0; font-size: 0.95em; text-decoration: underline; } /* Panel Tab/button */ .tab { background: url(images/tab_b.png) repeat-x 0 0; height: 42px; position: relative; top: 0; z-index: 999; } .tab ul.login { display: block; position: relative; float: right; clear: right; height: 42px; width: auto; font-weight: bold; line-height: 42px; margin: 0; right: 150px; color: white; font-size: 80%; text-align: center; } .tab ul.login li.left { background: url(images/tab_l.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li.right { background: url(images/tab_r.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 42px; background: url(images/tab_m.png) repeat-x 0 0; } .tab ul.login li a { color: #15ADFF; } .tab ul.login li a:hover { color: white; } .tab .sep {color:#414141} .tab a.open, .tab a.close { height: 20px; line-height: 20px !important; padding-left: 30px !important; cursor: pointer; display: block; width: 100px; position: relative; top: 11px; } .tab a.open {background: url(images/bt_open.png) no-repeat left 0;} .tab a.close {background: url(images/bt_close.png) no-repeat left 0;} .tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;} .tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;} |
Note: I have set font-size to 130% for #toppanel because the panel font was too small in the Default theme. If you use this code with another theme and font is too big, modify this value or just delete “font-size: 130%;”.
STEP 3: Add the Javascript files & Images to your theme.
Click here to download the sliding panel from my previous article. When prompted save Sliding_login_panel_jquery.zip on your desktop. Uncompress the file (with 7zip for example) and copy the “js” folder (all of it) into wp-content/themes/default/. Copy all the images from the zip file and save them in wp-content/themes/default/images/.
By now, if you saved the files to the right folders and added the HTML and CSS code to the right files, the panel should slide as expected. To test your sliding panel, you can create different users in Users > Add New and select a different role for each. Then sign in with the different accounts you just created to see how the panel behaves.
Let’s now take care of the register form.
STEP 4 (Optional): Register form
If you want the register form to appear in your panel, you will need to follow one last step. Go to Settings > General and check “Anyone can register”. If you don’t check this box, this is what you will see:
When you succesfully register or get an error you will be redirected to http://yoursite.com/wp-login.php?action=register. I would have prefered to handle errors and messages directly from the sliding panel but that was not possible without adding a lot of code to it.
I was surprised to see there was so little documentation about adding a register form to the front page. I found a few plugins but nothing really interesting.
If you know something interesting about it, let me know.
Not Working. Help!
You followed all the steps above but it didn’t work. Don’t worry! I have bundled this jQuery Sliding Panel with the default theme. Just download it below and install it as you would normally do for any theme:
Download
(81.8 KiB, 2,500 hits)
If it still doesn’t work, make sure jQuery doesn’t conflict with another AJAX library (Mootools, Prototype…).
Conclusion
I tried to make this tutorial as simple as I could for you to implement this script into your Wordpress theme. However, depending on the theme you use, you might run into a problem. If so, ask your questions below and I will try to help you.
- Sliding Panel: WordPress Plugin by Justin Tadlock.
- SuperSlider-Login by Twincascos.
Enjoy!
Popularity: 21% [?]
April 8th, 2009 at 2:47 am
Muy bueno!!!
Gracias por todos los aportes!
Saludos
Marcos.
April 8th, 2009 at 3:38 am
Nice tutorial, thanks for sharing…
April 8th, 2009 at 6:32 am
slidingPanel.txt link doesn’t work. please fix it.
Thanks
April 8th, 2009 at 10:27 am
[...] Next week, I will explain you how to implement this script into Wordpress. Make sure to come back or subscribe to RSS feed. If you can’t wait until next week, check this article to get started: Add a show/hide login panel to your Wordpress theme using Mootools » View article: Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
April 9th, 2009 at 10:11 am
I followed the steps and the login comes up correctly but I have two problems:
1) Opening the sliding over lay doesn’t overlap content on the page. Basically the existing content and the slider look weird as part of the original content can be seen over the slider.
2) Login/New Registration wont work. The regular login still works, but if I try to login or register from the slider nothing happens..
PLEASE HELP!
April 9th, 2009 at 10:15 am
Great, thanks! But I seem to have a problem… I use qTranslate, so when I switch language, my URL looks like: “http://forummille-isles.org/ForumMille-Isles/?p=301&lang=en”. So when I try to click on any link defined in header.php (eg. Dashboard), here’s what I have: “http://forummille-isles.org/ForumMille-Isles/?lang=enwp-admin/index.php”. How should I put the language parameters at the end of the URL to get this: “http://forummille-isles.org/ForumMille-Isles/wp-admin/index.php?lang=en”?
April 9th, 2009 at 11:35 am
@Sean,
1) Someone else reported having a similar problem on my previous post. Panel won’t overlap flash contents even with a high z-index value (e.g. z-index:999999). I read this on a site: “Just add a high number (eg. z-index:10) to the CSS and it will always be in front. If you have flash files don’t forget to set your Flash files to wmode=’transparent’.” I don’t know if it helps. Otherwise, change #toppanel position from absolute to relative in your CSS:
This will push the content down instead of overlapping it.
2) It seems to work fine for me, at least for the register form.
April 9th, 2009 at 11:33 pm
I solved my problem. Thanks anyway
April 11th, 2009 at 8:01 pm
Génialissime as always
Implémenté directement sur mon nouveau site
Bravo & merci !
April 13th, 2009 at 8:57 am
Im assuming that the same avatar code used for the mootools version will also work for this version?
April 13th, 2009 at 9:22 am
I didn’t try it but there’s no reason it would not. I don’t think the ‘get_avatar()’ function changed in Wordpress 2.7+.
April 13th, 2009 at 4:30 pm
works ok. It’s a pity it doesn`t work with mootools
April 14th, 2009 at 7:22 pm
[...] 1. Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
April 14th, 2009 at 8:39 pm
Nice post. Maybe you could have been one step further by showing a demo.
April 15th, 2009 at 4:17 am
PERFECT!! This is the best solution for having a login form on every page and keeping user on the same page after they sign in. I have been looking for a plugin to do this, but this is much better. Thanks for this!
April 15th, 2009 at 2:45 pm
[...] Web-kreation – Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
April 15th, 2009 at 10:46 pm
Could show us the code on how the sliding panel will handle the wordpress registration error without redirecting to http://yoursite.com/wp-login.php?action=register.
Thank you.
April 15th, 2009 at 11:21 pm
Almost perfect! The one thing I dont like is that it sends the user to the default wordpress page A) upon registering B) when retrieving the lost password… All the register/login process should be done on the panel…
in reply to this…
“I was surprised to see there was so little documentation about adding a register form to the front page. I found a few plugins but nothing really interesting. If you know something interesting about it, let me know.”
There is this Ajax login/register script which does the job… it is my primary choice just because your sliding panel script is not standalone
This is the keyword “User can login, register, and retrieve a lost password without ever leaving the page they are on.”
April 15th, 2009 at 11:22 pm
here is the script:
http://wordpress.org/extend/plugins/ajax-login-widget/
April 16th, 2009 at 9:47 am
Thanks Dewey. Nice indeed but his script is about 1000 lines of code in total! I could have used the code from wp-login.php and tweak it a little bit to process the login and registration from the panel but the script is about 500 lines too. If I were to add so much code, then it would become a Wordpress plugin. I have started to work on one but I am too busy to work on that right now, maybe in a couple of weeks.
April 16th, 2009 at 6:23 pm
[...] On this page you you find the Link submitted by the users of tripwire magazine. Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
April 16th, 2009 at 6:58 pm
nice tutorial
April 16th, 2009 at 8:54 pm
Anyone have issues when trying to use captcha to prevent spam accounts?
Mine is redirecting to the regular login page and then changing the captcha image saying I typed it in wrong to begin with.
TJ
April 17th, 2009 at 1:50 am
[...] Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+ (tags: webdesign plugin jquery wordpress menus form) [...]
April 17th, 2009 at 7:29 pm
Thanks for this man, sure it will come in useful
Keep up the fab work…
Jason…
April 19th, 2009 at 7:32 pm
[...] Web-kreation – Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
April 20th, 2009 at 7:25 pm
Thanks, very useful!
April 21st, 2009 at 1:18 pm
1st – great tutorial. i am self taught (or chronic code stealer) and it was super easy for me to follow. THANKS.
2. when I first implemented it in my personal site, had no issues (still undergoing major construction… the JR shameless plug sorry).
And then when i went to implement it on our school site the topbar is dead. here is a Link to the TEST SITE.
If you need to see the code let me know and i can email it to you(or how ever you need it sent to you)(since i didnt want to comment jack and plus i didnt know how to implement a cool box to put it in.)
Thanks again for the awesome tutorials and thanks for any help you can shoot my way.
April 21st, 2009 at 1:22 pm
It seems to work fine. What is the problem?
April 21st, 2009 at 1:31 pm
oops what i meant was that the top bar buttons arent clickable for me (ff3 3.08 / ie7) and i tested a few different computers… it shows the bar and the items just not the ability to click them and take you to the next page… tried moving the code around and still got nada.
thanks again for the quick response.
April 21st, 2009 at 1:49 pm
So you mean after you logged in you can’t click the link inside the panel, right? If so, that’s weird. I really have no idea what could be the problem. Try to turn of your plugins and see if it fixes your problem. Also, I see you are using a frame for your test site. Maybe that’s your problem.
April 21st, 2009 at 1:54 pm
will do… thanks again for the quick response. its not so much a big deal on the school site, i wanted it more for me and it works on my site so i’m 85% happy… now just to figure it out.
April 23rd, 2009 at 11:58 am
how would I add a avatar option?
April 23rd, 2009 at 12:00 pm
Read this article (at the bottom): Add a show/hide login panel to your Wordpress theme using Mootools
April 28th, 2009 at 8:37 am
I got it to work with all my mootools just fine. Takes a lil work but you can get it to work.
http://jericosystems.com
the top login is of course jquery and the “about” on the sidebar, post ratings, and polls are all mootools.
April 30th, 2009 at 11:21 am
I have tried to tweak the events triggering the slide down and up such as mouseover and mouseout but I can’t get it to work properly. The panel is blinking and rapidly slides up and down many times, it doesn’t work as smoothly as it does with click event.
Do you know what I can do to fix it?
May 3rd, 2009 at 12:03 pm
[...] See the original post: Web-kreation – Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
May 6th, 2009 at 12:59 am
[...] 1. Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
May 8th, 2009 at 9:51 am
How do i install this on a non Wordpress website?
May 8th, 2009 at 10:16 am
Stacey, each CMS or blog platform are differents. You will have to look into the code and see how sliding panel can be implemented. It won’t work out of the box.
May 8th, 2009 at 1:05 pm
Thank you so much for this wonderful login script. I am not using it on wordpress… but phpbb3 theme that I made and it works great… I am using the raw one…
Thanks a lot.
May 8th, 2009 at 5:58 pm
@Jeeremie
Thanks for the reply. I actually do not have any CMS currently running on my site. Just regular old php files, lol.
I wanted to implement this to my website so i could get rid of the log in box on my pages. (move it to the drop down box instead)
I tried to install it on my regular pages but im not able to get it to work. I tried everything (that i know) but was unable to correctly get it to display. Do you have any step by step instructions on how to get it to work on a regular website? If you need more info just e-mail me and i can give you more details.
Thanks again!
May 25th, 2009 at 9:06 pm
GREAT tutorial. Anyone deployed this on thematic yet? Didnt work for me. Jquery conflicts maybe?
thanks!
May 27th, 2009 at 7:55 pm
Thats certainly food for thought, where can I get more information on this?
May 27th, 2009 at 9:12 pm
Hi… I very like this useful and nice tool but I’m not using wordpress so can I use it?
Anyway, I’m using Blogspot now so if can can u pls teach me how to use it with tutorial?
Thx very much!
May 29th, 2009 at 2:16 am
Interesting post,i will perform.Thanx
May 31st, 2009 at 1:48 am
Hi…installing it on WPMU it always says that “registration is closed” even if user are allowed to be registered…do u know why? Tks
May 31st, 2009 at 2:20 am
All is wonderful, many thanks, only to learn as in panel on Russian to write.
And that I have got confused.
June 3rd, 2009 at 3:45 am
great work! thank you! One question: is it possible to change position of panel or it is strongly linked to top of screen?
June 3rd, 2009 at 9:20 am
Hi,
Thanks for this article. I intend to use it with some of my future WordPress themes but not for registering/login purposes.
June 5th, 2009 at 11:47 pm
Thanx a lot!!! It helped me understrand jquery just a bit better..
June 13th, 2009 at 3:30 am
The panel works great in WordPress. Thanks!
June 16th, 2009 at 9:38 pm
I recently upgraded to wordpress 2.8 and have noticed problems with the WYSIWYG editor on two sites after added this to the theme. Is anyone else having this issue? All of the other add ins and plugins being used are also used on other wordpress 2.8 sites without any issues so I am assuming this is what causes the issue.
June 17th, 2009 at 8:23 pm
Hi,
If you go to my site”killerfm.com” and login and try to logout it will redirect you to my first game and I want it to redirect to my homepage. Please help.
June 19th, 2009 at 5:07 am
Just wondering if anyone has managed to get it working with Chris Pearsons’ DIY Thesis Theme?
June 20th, 2009 at 12:15 am
Does anyone know how to solve issue with lava amp menu? I have realised that there is a problem also with jquery based validation (scriptaculous) ?
June 20th, 2009 at 12:32 pm
Wow! Great tutorial! Took me about 30 minutes to implement as described.
The only problem that my site has is a conflict with prototype.js – once disabled, the sliding panel works as described. I guess I have to switch over to some jquery library for the feature I was using. GREAT WORK! Thanks!
June 20th, 2009 at 7:51 pm
I Am currently redesigning my main site and putting it into wordpress and decided to give this a go.
Works like a charm, just need to bridge wordpress and IPB now to get them sharing the same login and working with this script.
Thanks for a fantastic login script….
June 21st, 2009 at 10:33 am
This is exactly what I was looking for! I use Wordpress MU and have registration open. I have to do this under Site Admin > Options. Only users with a certain email domain can register. How can I get the Registration to open up in the pannel?
June 22nd, 2009 at 3:41 pm
How would you go about implementing this for joomla
June 23rd, 2009 at 1:57 am
Thanks! This is a great solution.
I have one problem though! Using prototype on the same page (I am using a commercial template out-of-the-box) the panel slider doesn’t work.
Would it be hard to make this solution work with mootools instead? Can I use your older tutorial or what do I need to do to get this exact slider to work with motools? Help is much appreicated! Thanks!
June 23rd, 2009 at 8:31 am
No it won’t be hard, I have already created that panel. You can see it here. But you are going to run into the same problems. jQuery has a noconflict script.
June 23rd, 2009 at 2:04 pm
Thanks Jeeremie,
I actually fixed the problem inside slide.js by simply replacing “$” with “jQuery”:
before:
$(document).ready(function() {
// Expand Panel
$(“#open”).click(function(){
$(“div#panel”).slideDown(“slow”);
});
// Collapse Panel
$(“#close”).click(function(){
$(“div#panel”).slideUp(“slow”);
});
// Switch buttons from “Log In | Register” to “Close Panel” on click
$(“#toggle a”).click(function () {
$(“#toggle a”).toggle();
});
});
after:
jQuery(document).ready(function() {
// Expand Panel
jQuery(“#open”).click(function(){
jQuery(“div#panel”).slideDown(“slow”);
});
// Collapse Panel
jQuery(“#close”).click(function(){
jQuery(“div#panel”).slideUp(“slow”);
});
// Switch buttons from “Log In | Register” to “Close Panel” on click
jQuery(“#toggle a”).click(function () {
jQuery(“#toggle a”).toggle();
});
});
and BINGO … all good on my site. Hope this solution works for all that use your fantastic script and have conflicts with prototype! Thanks again for this great solution!
June 26th, 2009 at 9:16 am
Great solution. Thanks!
I’m implementing in wordpress 2.8 and have top menu which the panel when closed overlaps. Does anyone know how I can remedy this? I was thinking perhaps using a script that would change (lower) the z-index when the panel is closed and return it to a high value when open. Hope that’s not off base. In any event can anyone point me to a solution?
June 26th, 2009 at 10:50 am
[...] I’d point people to the Web Kreation article on integrating a sliding panel into WordPress. Unfortunately, this proved to be a tough task for the average end user. Not to say anything bad [...]
June 26th, 2009 at 11:09 am
[...] I’d point people to the Web Kreation article on integrating a sliding panel into WordPress. Unfortunately, this proved to be a tough task for the average end user. Not to say anything bad [...]
June 27th, 2009 at 11:55 am
[...] quieren su panel en el diseño por defecto entren aqui. Pueden ver un demo, [...]
June 27th, 2009 at 5:09 pm
Hai, its a great stuff thanks for it
I have got a problem… I properly added code and it seems to be working.. I dont have anyother problem with the slider besides, after i login in a user, it works fine.
But after clicking the log out link the following problem occurs
—————————————————————
Access forbidden!
You don’t have permission to access the requested directory. There is either no index document or the directory is read-protected.
If you think this is a server error, please contact the webmaster.
Error 403
————————————————————–
But iam using a local system to develop my wordpress application. So please help me in this matter..
July 2nd, 2009 at 4:14 am
how would i go about a second part of my website, a div down below, be another way to trigger the sliding panel?
thanks!
July 2nd, 2009 at 8:18 am
I’ve got this working successfully on a clients’ site. However, one thing he isn’t happy about is the fact that after you do the whole “register” process, it redirects to wp-login.php?action=register and all your beautiful work is gone. Is there any way to make it redirect elsewhere or stay on the page/in the dropdown? I’ve been searching for anything on registration redirects but can’t find a thing.
Thanks for the great script/code!
July 5th, 2009 at 12:16 pm
Got a question.
Is there a possible way to make the sliding log in panel to only show up when an admin is logged in?
Meaning, i only want it to be visible to the administrators and not users or subscribers on any page.
If this is possible it would be a great implementation.
July 6th, 2009 at 6:07 pm
@ Jonathan:
Try replacing the following:
if (is_user_logged_in())
with:
if (current_user_can( ‘level_10′ ) || is_user_logged_in())
More here: http://wordpress.org/support/topic/217141?replies=10
July 8th, 2009 at 2:23 am
Awesome, thank you. The Wordpress plugins offered individually are cool, but your instructions here and stylish design are far superior, IMO. I will definitely send some linklove your way.
July 8th, 2009 at 1:48 pm
Thanks!
July 9th, 2009 at 12:42 pm
@Jen
Thanks for the help. I tried that but didn’t work.
I tried a different method.
after the,
put,
and after the closing div,
add,
and your all set.
With that only the sliding panel will show up when an Admin is logged in.
Hope this helps anyone. Feel free if you have any question.
July 9th, 2009 at 6:24 pm
@Jonathan,
Thanks for the tip. Could you try reposting it since the code didn’t show up? I may be interested in doing this in the future.
July 9th, 2009 at 8:19 pm
@Jen
Thanks for the help. I tried that but didn’t work.
I tried a different method.
after the, — The tab on top –
put, if ( current_user_can(‘level_10′) ) :
and after the closing div, /div
close the code with, endif
and your all set.Just remember to add the opening and closing php tags. Web-Kreations will not let me type theme in.
With that, only the sliding panel will show up when an Admin is logged in.
Hope this helps anyone. Feel free if you have any question.
July 10th, 2009 at 8:04 am
Ok so i mad this work on my site. have 2 problems
1. when the menue drops down it overlays over the site how do i make it move the site down like above?
2. featured-content-gallery is not showing up how can i make it work?
Thank you
you can email me at ozharsky@gmail.com
July 12th, 2009 at 1:51 am
[...] more neat thing that another user, Jonathan, over at Web-kreation came up with is only showing the sliding panel to the admin. Here’s the [...]
July 13th, 2009 at 3:44 pm
Whether there is a possibility to force panel to settle down not from above, and sideways and to be put forward not in a bottom, and sideways?
July 15th, 2009 at 5:39 am
Look at your read me file.It explains everything.
Alos look at Jeeremie post,7th post down from top.
July 20th, 2009 at 3:22 am
[...] a really slick one. And for the WordPress lovers out there, there’s also a tutorial on how to implement it in WordPress. Well worth checking [...]
July 26th, 2009 at 12:02 am
nice tutorial.. very usefully for all web designer.. thanks a lot.
July 28th, 2009 at 11:27 pm
Very nice, thank you, if you want a german translated version send me a mail
July 29th, 2009 at 9:26 pm
Nice. But what if the user has disabled java script? (some people do, i think some mobile phones don’t support javascript either but i am not sure about that one.) He won’t be able to login altogehter. How can I make sure that everyone can log in?
July 30th, 2009 at 1:37 pm
This is why it’s important to make sure you use JS that degrades gracefully. One way in this case would be to have the link redirect to the normal login page. How that would be done I don’t know as I’m a JS newbie.
July 30th, 2009 at 4:19 pm
Thanks, Silver Firefly. Thing is, this script doesn’t degrade gracefully. I tried it with JS switched of – no way to log in.
July 30th, 2009 at 5:02 pm
It can be easily fixed by adding return false; to your js. For example:
Then remove ‘#’ in your Login/register link and replace it by ‘http://yoursite.com/wp-login.php’:
If javascript is enabled, it will slide the panel down but if JS is disabled then it will redirect to ‘http://yoursite.com/wp-login.php’.
This code works great in Mootools. I never tried it in jQuery but it should work fine. Let me know.
July 30th, 2009 at 5:37 pm
Thank you. Perhaps you could incorporate that into your tutorial for the rest of your readership?
July 30th, 2009 at 5:39 pm
Thanks, Jeremie. I’ll give this a try.
July 30th, 2009 at 11:18 pm
What if I want to use a Link list or something else instead of Login and Sign-up form, etc ?
July 31st, 2009 at 9:14 am
@Enk. You can put anything you like in this panel. It is up to you
August 5th, 2009 at 8:52 am
[...] jQuery login slider – Mere information her [...]
August 6th, 2009 at 11:09 pm
[...] Implement a Nice & Clean jQuery Sliding Panel in Wordpress [...]
August 9th, 2009 at 9:53 am
[...] Implement a Nice & Clean jQuery Sliding Panel in Wordpress [...]
August 18th, 2009 at 7:33 pm
[...] Implement a Nice & Clean jQuery Sliding Panel in Wordpress [...]
August 19th, 2009 at 10:30 pm
VERY VERY NICE, thank you.
August 22nd, 2009 at 4:18 am
No idea why but it does not seem to work on my sites, even with the default theme.
I am using wordpress-mu 2.8.4a if that makes any difference.
I did hear that the new 2.8 series of wp is using an updated vs. of jquery, so it may be a conflict, not sure…
anyhow no go on mu for me
August 22nd, 2009 at 9:09 pm
Yes, maybe it conflicts. Try to remove the line below in step 1 and let us know if it fixes your problem:
August 28th, 2009 at 3:01 am
[...] der Seite von Jeeremie habe ich einen tollen Artikel gefunden mit einem tollen Login Script. Die Installation hat wie auf seiner Seite beschrieben [...]
August 28th, 2009 at 10:47 pm
Hi Jeeremie,
Great script. I love the article but I just can’t seem to get the slider going correctly. First I tried to use the plugins but it didn’t work. I decided I would install the files through your steps and I seem to be stuck. I feel like everything has been done correctly but the slider does not seem to go down. I can log out with ease but that’s about it. Any tips or suggestions? Thanks for your time.
Randy
Update: the slider now moves down but it won’t close. Is there something that needs to be done to fix this? Thanks!
September 6th, 2009 at 5:42 am
Looks really good, got it installed today in my blog, I’m really pleased, many thanks
September 9th, 2009 at 7:38 pm
[...] Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
September 14th, 2009 at 4:50 pm
Hello.I am sorry.I do not know much English.
http://web2feel.com/creativepress-theme/
Panel does not work with this theme.Add to panels when a theme does not work in a theme slide.
September 15th, 2009 at 3:13 pm
I am not sure where you try to put this panel in your theme. Could you explain again?
I see you have jquery-1.2.6.min.js and I use jquery-1.3.2.min.js. Do you try to link the two versions. If so, it might conflict as you can have just one script at a time. If not, maybe my panel is not compatible with your jQuery version… not sure though. Let us know.
September 26th, 2009 at 3:12 pm
[...] Implement a Nice & Clean jQuery Sliding Panel in Wordpress [...]
September 27th, 2009 at 10:53 pm
[...] Implement a Nice & Clean jQuery Sliding Panel in Wordpress [...]
October 2nd, 2009 at 7:42 pm
[...] Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
October 3rd, 2009 at 12:58 pm
[...] See the article here: Web-kreation – Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
October 11th, 2009 at 6:49 pm
[...] Homepage (inc. Download) | Demo | Tutorial for Wordpress 2.7+ [...]
November 1st, 2009 at 2:24 pm
hey mate.
I got a small issue, nothing major but kinda annoying.
if you go to http://erichamby.com youll see how i have placed your menu. Only issue is when viewed in Safari it slides the content down, in IE it slides over the content. I think i like the look of it sliding everythign down when it comes down but i cant seem to find that awesome lil code that seems to make ie work.
November 15th, 2009 at 3:49 pm
Hello, i’ve tried to put the sliding panel, bue it doesn’t work…
It stays as a list, and because i dont understand much of CSS/PHP i dont know how to fix it.
-.-’
January 7th, 2010 at 4:34 am
Thanks for this, it was EXACTLY what I was needing and I luckily stumbled across it to use. I absolutely love it.
I am having an issue getting my theme that uses Superfish menus to play nicely with this though. After adding this the drop down menus just stopped working. I can’t figure out what to do to get them to play in sync. You can see the problem at http://www.thepokermob.com
If anyone has any suggestions PLEASE let me know!
Thanks!
January 8th, 2010 at 10:06 pm
This is a great little program. Set-up was simple and the styling goes easy on the brain. I’ll stop by with a live link when I go live from my local.
January 11th, 2010 at 6:54 am
Hi Jeeremie, first of all : Happy New Year & may it bring to fulfillment every hope & aspiration you harbor
Secondly : Thank You for your super-awesome plugin , I was searching for something like this for my new site & I thank you kindly for devoting your time within its creation . Ok, I installed it ( basically the plugin version from Wordpress ) – it is working & is visible ( I had to install the code you provide here in the header.php file ( because w/ the plugin version nothing was showing up ); so I guess this bit of code you provide ehem..did the trick 
However, not all of the content within the drop down is showing – its cut-off 
I know you have a lot of requests here , but I would truly appreciate your help in this. In the meantime : I will try to figure this out myself as well ( I’m persistent ! )-
Can you please just take a quick look HERE if you have time and tell me what it is that I must do in order for all the content to be visible? please
Thank you again in advance & wishing you much continued future success in all your endeavors .
M.
January 11th, 2010 at 7:26 am
OK, I figured it out Jeeremie
it was the font size which was the issue – ( since I have custom font implemented into my stylesheet) & it is set at over 26px for the headers , so yea , it was what was creating the problem . Thank you again , it looks awesome ! 
Im so happy – its like Christmas all over again ! 
M.
January 11th, 2010 at 8:08 am
I am glad you could figure it out. Happy new year to you too.
January 11th, 2010 at 9:06 am
Hey Jeeremie – ok, one more question : I know this is strictly the & the Login code – when I log out , it takes me to the archives page for some reason and of course , the login must also be conducted from the same page , unless of course I just click on the Home link . Being that Im very new to WP ( 1 week
) ; what should I change this to ? I believe this should be the easiest question youve received so far & probably the dumbest , but I dont know what I should alter it to 
….. help a noob please ?
Thank you again Jeeremie .
M.
January 12th, 2010 at 6:28 am
Jeeremie. Happy New year! Hey, I’m trying to open the panel from elsewhere on a page. I’ve used
Log In | Register
Close Panel
but that only toggles the tab’s text. Is it possible to call the slide from elsewhere on a page and still give the user the option of using the tab?
Thanks
January 12th, 2010 at 6:33 am
Sorry ’bout that. I wrapped my code in pre tags forgot the language attribute.
Log In | Register
Close Panel
January 12th, 2010 at 11:58 pm
Hello again. Have you run this through the validation process? It doesn’t validate due to duplicate use of class in the registration form. I removed class=”input” on both lines and it seems to work fine. However the use of the id=toggle two times doesn’t validate. I tried changing this to class=toggle and changing #toggle in the slide.jss to .toggle but the toggle stopped working. Any pointers?
Thanks
January 15th, 2010 at 7:58 pm
This thing is awesome.
One question though. I am building a custom theme for my website and I decided to go with this rather than a plug in. I am wondering if it’s possible to make it widgetized?
January 20th, 2010 at 10:03 pm
[...] 1. Implement a Nice & Clean jQuery Sliding Panel in Wordpress 2.7+ [...]
January 30th, 2010 at 5:52 am
Hey!
Great tool and it looks awesome. I have it working fine on my site… As long as I’m using IE or Chrome. As soon as I use Firefox, it messes up. There’s no panel and there are large random words all over the page. Someone give me a hand?
Thanks!
February 1st, 2010 at 12:39 pm
excellent code. Thanks for sharing this, I think it will be super useful. I especially like how you incorporate the user roles into what is displayed. bravo!
February 1st, 2010 at 9:28 pm
Hey Tim. Can you give a website that we could look at to try to determine the issue?
February 3rd, 2010 at 2:16 am
hey there,
Thank you for this. I am trying to get it to work on thesis theme 1.5.1 so I will report back on my progress.
Lacey
February 6th, 2010 at 11:21 am
I have been looking for this functionality for days. thank you so much. My website will not need the ability to login but I would like to put a contact form instead. Would you have time to guide me in the right direction?
Thank you so much!!
Jeff
February 7th, 2010 at 11:48 am
You could add a dynamic sidebar to your sliding panel along with Contact Form 7 plugin.
Once everything is in its place, go to Maintenance > Widgets, drag and drop a text widget to your panel and paste the code of your form (e.g. [contact-form 1 "Contact form 1"]) in to the text widget field. This will automatically display the form into your sliding panel (do not tick the checkbox “Automatically add paragraphs” or it will screw up your form).
Please note it might close your panel on form validation. If so, you will have to tweak that plugin to keep it open when user hit the send button.
Let us know. Good luck!