Ever since I redesigned Theme Hybrid back in April, I’ve gotten numerous requests for the code so that others could do something similar.
Typically, 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 about the great tutorial, but there are some problems with integrating it cleanly with WordPress. Without the ideas generated there, we wouldn’t have this plugin.
So, I decided to build a sliding panel from the ground up. I wanted something that would be easy for the average end user to implement. This plugin is a jQuery-based, fully-widgetized sliding panel for use on your WordPress-powered site.
What is a sliding panel?
Quite simply, it is a panel that can be opened and closed with a click of a mouse that will allow you to house additional content on your site without it getting in the way.
Here’s a view of it in its closed (normal) state:
Sliding panel in its closed state
Once a reader clicks on the Open button, the panel slides down the page, showing the content of the panel:
Sliding panel in its open state
What does the plugin do?
Sliding Panel comes with some neat features:
- Uses widgets, so you can add any content to the panel you want.
- Makes use of the jQuery packaged with WordPress to avoid plugin conflicts.
- Auto-inserts itself into a few themes:
- Provides the
get_sliding_panel()template tag for use in other themes.
Download the plugin
This plugin will only work with WordPress 2.8+. If you’re using an older version, you’ll have to wait until you’ve updated.
- Version: 0.1
- Requires: WordPress 2.8+
- Support: Support forums
- Download (from WP.org)
Instructions on how to use the plugin are in the plugin’s readme.html file, which is included within the plugin download.
Please don’t use my contact page or the comments section below to ask support questions. Use my support forums at Theme Hybrid, which is where I handle all support questions for my WordPress projects.
Why you don`t add Sliding Panel on your on blog?
any working demo that we can preview first before download it?
Wow!!! Very cool of you to release this Justin, and timely too. I have “sliding panel login” on my todo list for a current project. This will certainly make my development MUCH faster!
Thank you!
Hi,
i’ve tried to do something similar and your approach will help me. Thank you.
I wanted to show a password protected page on another page’s template (via get_post()). Pretty much like a very simple customer’s login.
The page always showed up without asking for a password even if I was logged out as admin.
It would be cool if wordpress could implement automatically that the password form is shown if a password is required. Even via excerpt() and get_post()…
This is great Justin. Really Great. Thanks…
Just a thought
– why not add it too the bottom of the page instead of the beginning, that way it loads after everything all the content.
panel.css edit (something like this)
Just quickly added the above and seems to work fine on Chrome, IE, and firefox.
Jonathan
naji — I have no need for one.
Wallace — You have pictures and a link to Theme Hybrid.
Adam W. Warner — Cool. Let me know when you finish the project. I’d like to see how it turns out.
Basti — Huh? Are you sure you’re commenting on the right post?
Jonathan — I’d just rather have it at the top. Of course, you should use it however it best fits your site.
edit: Sorry I forgot to remove the
display table; and z-index: 999;… but it shouldn’t create any issues.
Jonathan
Don’t take this personally, Justin, but are you reinventing the wheel?
http://iredlof.com/2009/04/iredlof-ajax-login-wordpress-plugin/
2Rock — The page you linked to doesn’t seem to be loading for me right now. I’m not sure what a login plugin would have to do with this though.
Oh, and sometimes reinventing the wheel is a good thing.
Sorry, it is also available in WP.org plugin directory:
http://wordpress.org/extend/plugins/iredlof-ajax-login-plugin/screenshots/
Nice plugin Justin. Exactly what I was looking for. Will install and test it out !!
Thanks
This is awesome!
Just what I was looking for, thank you Justin!
I believe there is one bit missing though: A plugin option to easily change/edit the the toggle text “Open/Close” (for example to “View/Dismiss” or “Register/Close”) so one would not loose those settings after a plugin update.
Fantastic Justin. I’m constantly amazed at what you are turning out for free. Keep up the great work. (I wish I had a project to use this on at the moment!)
Gorgeous. Thanks for constant awesome work!
Fantastic !, you are quite the wordpress hero.
Sliding Panel should be at the top just like Justin has done, that’s kinda the point. if it was at the bottom, the user may not see it’s even there unless they happen to scroll right to the bottom of the page.
usability must come first.
2Rock — Yeah, that’s based off the original script where I got the idea from. It’s far from reinventing the wheel though. That plugin is just for logging in, mostly. Plus, it doesn’t make use of the jQuery packaged with WordPress, which causes some major JavaScript conflicts with other scripts. Two different plugins. Two different purposes.
Francois — Well, I’m glad I released it just when you were looking for it.
The Frosty — Thanks.
Manuel Martensen — Yeah, I haven’t decided what I want to do with the “Open/Close” button yet. It seems a bit much to implement a complete plugin settings page just for one setting. I’m running over some ideas and will try to find an easy way to edit that.
rgregory — I’ve got plenty more ideas. I just need to find the time to code them all.
Mijk — You’re welcome. I’m glad you like it.
James — I agree that it should be at the top. There are some situations where I’d want to use something like this in other places on the page, but those are rare and I’d probably write a smaller script to handle it.
James and Justin – I agree, it should be at the top.
The code I suggested still keeps it right at the top
there is zero difference in position – the only difference is that the code will now load at the end of the page and not at the beginning.
I prefer it this way so that when google comes crawling she finds the content first before sidebars (widgets) etc. But it is only a matter of preference, like loading js in the header or footer
Thought I’d post the code in case anyone else preferred things to load at the bottom.
Jonathan
Justin, I have noticed that you were using this sliding panel when you redesigned your ThemeHybrid project. Thanks for helping others have it, too.
@2Rock, the plugin you have mentioned is based on the work of Jeeremie from Web-kreation too and it’s just another login script. That guy has reinvented the wheel too.
But why are you so serious?
like ur first design.
if u add a j query sliding panel, then its one of the greatest theme in the world.
hope u will add this in future version.
thx and good luck
Jonathan — Yeah, I understood that the first go round.
It is a cool idea.
J Mehmett — I figured since everyone kept asking for it, I’d release it.
Aneslin — I’ll have to disagree on that. It would add bloat and it’s not needed in all of the child themes built off it. Plus, it’s easier to extend (add) things than it is to turn them off. That’s the point of plugins anyway.
Nice job Justin. Keep pimpin’ WordPress out!
Nice plugin Justin, thank’s very much for your information
gorgeous.
Travis Quinnelly — I’ll try.
ryanita — You’re welcome. I’m glad you like it.
John — Thanks. By the way, I love your site’s design. I’m a fan of the big content area.
I watch your blog for rather a long time and should tell you that your articles are always valuable to readers. It’s added me so much.
Thanks for your feedback!
Thank you for sharing.. I will be downloading this cool plug in.. sure it will be usefull for my sites..
Thanks!
Lovely plugin – but is it possible to have the slider push the page down instead of overlaying the page? Could maybe be another element for an “settings page”?
Great plugin! I’m using it and I’ve encountered an issue with links appearing directly below the area that the slidein appears, they become inactive. What’s the trick to fix it?
Thanks!
Correction on the website address.
Sandy Saini — You’re welcome. I’m glad you enjoy the blog.
Lance — I hope it will be useful for you as well.
Tor — Yep, you just have to change the CSS. I probably won’t add a settings page to the plugin though.
One last thing I noticed on the issue is that it only happens with Firefox. IE works fine. Again, if you look at the RSS Feed link top right, it works in IE, not in Firefox. If I remove the slider, works in both.
hi, where to put the
add_action( ‘hybrid_after_html’, ‘get_sliding_panel’ );
as mentioned by Jonathan.
I don’t get it
actually, i want to make it appear on the bottom of the page.
Is there any proper guide for that?
Just saw this plugin featured in a Wordpress Plug-ins list for designers. This is very helpful, glad I ran into it!
this plugin breaks actually all my sidebar widgets in my sandbox theme if activated.
the old (recent) widgets simply doesn’t show up anymore in their widget slots (admin) nor generally on the site.
where should i start my bug search as first? any clues or suggestions?
cheers
arrgh never mind, i’ve found it, the bug was me
it was the result of my own webstandard … messyhtml
Love the plugin, but haven’t seen any mention of it interfering with (or not playing well with) Featured Content Gallery. Is there anything I can do to fix that? Or a suggestion for something similar to FCG to go with it?
I’m using it in this site I’m currently developing: http://www.classiccreationsdirect.com/wptest/ and my clients would really like to have it at the top.
Thanks!
Nevermind my post above, I switched from Featured Content Gallery to Dynamic Content Gallery, and all is good!
Hi Justin, this is a very nice and cool plugin. I am so happy that you are sharing it and this is definitely very useful.
Thank you very much!
thanks mate. this is very cool. …just added a little pizazz to my tech blog
hi justin, thanks for this plugin. i appreciate your hard work.
anyway, how to add this panel login into right or left position of the blog? not in the sidebar, but on the very left or right. and it also scroll down or up when we scroll the mouse.
any ideas?
thanks in advance justin.
cheers from Malaysia blogger.
thanks justin i really appreciated…
Awesome plugin Justin, thanks!
I do have one question if you have a moment. I’d like to implement a second sliding content area. Can you point me in the right direction?
Thanks for the plugin. Also you have a beautiful website. Really nicely done. I love it!
Just what I was looking for. Alas It didn’t work. For some reason I can’t get to open.
Thanks heaps for this… it’s is sweet as!
I will try it on my current theme and check if it will work just fine. It seems I read a lot of negative comment about it here. I don’t know if the users will click that button when they see it. But I think it worth a shot.
This plugin breaks all of my other theme’s widgets – karen how did you solve your problem? Anyone else have any advice
donavin,
I have also had this problem. I am using a woo theme template and when I add the sliding panel plugin it breaks all of my existing sidebar elements and they no longer are visible on any pages. Has anyone else had this problem? Any suggestions?
hey justin. great work! i got one question though: is there an easy way to make the sliding panel “push down” the rest of the content when sliding down rather than laying over it?
Justin,
I’m not sure this plugin works with the new wordpress version…/
Jake Rocheleau — Thanks. I’m glad you’ve found it useful.
KP — You’re welcome. I’m glad you’re using it.
tech4eleven — Cool. I’m happy to hear you’re using it.
baloot — Redesign the CSS and re-develop the JavaScript.
ronel marin — You’re welcome. I’m glad you like it.
Jeff Namnum — Look at the
sliding-panel.phpfile.Linaka Greensword — Thanks for the compliments.
Sergey Agapov — Probably a JavaScript conflict.
Adam Aspinall — You’re welcome. I’m happy you like it.
Oes Tsetnoc — Many negative comments is par for the course when it comes to plugins. Unfortunately, developers can’t do much about people that can’t read instructions.
donavin and derek — If you need help with the plugin, stop by the support forums.
Tobias — Yes, that’s definitely feasible.
John (Human3rror) — I am sure it works with the latest WordPress version.
I was looking for something like this long time ago…
3 questions:
1. can be automatic?
2. can I use 2 at a time?
3. can be automatic?
I’m willing to pay for something like this!
can i add the sliding panel into left or right side?
i want to put advertising into it,,,
please reply to my email
Hi Justin,
I wanna say congrats on the great plug-in and keep on doing good work.
I encountered a problem with IE 6 when used the sliding panel it was going on the right side and expanding the page in width for 2000px, and i just added the left:0; to the #sliding-panel id and it worked, dunno if others had the same problem. I don’t use myself ie6 but need to test my theme in all browsers.
well i have to try this wordpress plugins on my new tvseries sites.
Hi Justin,
thanks again for these great peace of code.
Seconds ago i’ve voted at wp-org for this plugin. It’s work great with wp 2.9
Hi guys (and ladies of course),
I am completly new to..well..to everything regarding coding. But I would love to add this great plugin to my site and subdomains http://johnbatty.de.
The black style works perfectly for me. So there’s no need to change this.
But how and more important where can I ad the code? And: is this the right code:
<?php if ( function_exists( 'get_sliding_panel' ) ) get_sliding_panel(); ?>Custom Style
I would be more than just happy if someone can help me out.
Cheers
Sascha
Hi there, fantastic plugin, really brilliant, it’s very much appreciated that you go to such lengths to make something like this easy to use for Wordpress users.
I’d really love to be able to add other regular links alongside the tab to open the slider – but I’m not having much luck – has anyone else managed?
Hi, is it possible that the panel is open rather than closed when the page loads?
Great Plugin…
I want to modify the plugin so that I can use it as a drop-down menu. I did get most going the way I want it, but it only works correctly on my main page.
Any suggestion to get it to work on all my pages?
for sample look at http://oudendijk.biz/
click on the “+” sign at the right top.
regards
rob oudendijk
Got it fixed. Turned out to be the foot.php
footer.php
good job very nice plugin thanks
Hi, I use this awesome plugin on my site, the only thing is, some visitors reported it didn’t work with IE8. Is it supposed to be compatible with the latest IE ?
Many thanks !
justin,
is there any way to work this sliding panel, so it comes off the right or left side of the page, instead of top or bottom?
Hi Justin
Thanks for the WP plugin first of all, it’s gr8….
I was wondering if i could make this slide upwards instead of down? I am doing a site for a client and i wanted to add the sliding panel on the footer, when clicked it slides up and displays the ocntent. I am ok with changing all the images and css, but i have no idea on how to change the JS or php script to achieve this functionality. Could you please give me a hint on how to do this? or if anyone else has done this i would really appreciate it if you can share it….
Thank you
It’s nice, but an issue I encountered during when I add an audio flash player to the sliding panel. I want make it equipped with background music, however as I closed(hide) the panel, the music stopped. I wanna know how could I make this feature that I open the panel to play music and close it while the audio is still on.
hi justin
really great plugin.
i can t apply it to a website that i’m working on because it is messing up all my jquery and mootools menus. any work around on this?
Justin
Many thanks for this plugin. I tried several other sliding panels and login screens but yours is by far the most adaptable. Takes a little longer to get set-up but worth it in the end as it looks as though is belongs on my new site rather than just another addin.
I am still putting it together as wordpress MU install – but it’s looking great
Really good plugin
Thanks
Hello Justin
Forgive me for (possibly) being irritating but I’ve fiddled with/hacked/destroyed your lovely slider and made a second.
This may sound mad, but with “Tabbed Widgets” inside it’s just lovely to have more than one sliding panel.
I’m telling you only because you may think “hmm, what a nutty thing to do. I bet I could make that better/more useful/streamlined/unhacked/etc”.
I’m more happy giving links out privately IF you’re even vaguely interested in a complete stranger’s madness.
Again, lovely slider. Thank you.
pils
Would love to see this in action. Do you have a demo?
Would love to have the help of those that added a second panel to go with Justin’s plugin – I’m going to attempt it, however I know just enough to get me in trouble.
Any help with be appreciated… crobinson at hsmove dot com
Hi Pils! That sounds brilliant what you’ve done there.. Would love to have something similar implemented on my WP site as well! Would appreciate it lots if you could share how you did it.. Thanks in advance!
hi dude
your plug-in is awesome… congs!!! but is it possible to register an extra footer or the header??? because i have custom multilevel accordion menu, which they enter the only in this elements
tnx
I’m trying to make the panel push the content down to no avail.
I’ve tried changing the position attribute to relative below and it works but it actually duplicates the panel on the page! Any thoughts?
Thank you for the sliding panel, now it is easy for me to create a pages, without messing up my header..
10+ for this..
Reinventing the wheel…? But a wheel with tires it’s better then a stone wheel.
I had put your plugin in my theme with few minutes of css editing perfectly, and I’m full noob of the poetry of coding.
Justin you rock, thanks.
Luca
I think you have done a great job on this. I use this plugin on a few sites that are all related and each sliding panel show the related sites and has quick links to them.
If you wind up updating the plugin, could I make a suggestion on some changes…
Offer the abililty to change:
– The color
– The word (instead of ‘Open’ & ‘Close’)
– The look of the tab, I would perfer a rounded one
– The location (left or right, but right is a great start)
Any chance of plugin start as open instead of close?
Thanks
Hi Justin,
First off, thanks so much for building this plugin. It really helps me maximize the space in my sidebar by not including “login” stuff and just putting a meta widget in the sliding panel.
However, I have found a bug and don’t know how to start debugging the javascript interaction.
A couple of my existing plug-ins use Lightbox to handle pictures.
I’ve been through the whole process of activating/deactivating plugins and I have also tried just plain text in the widget within the sidebar. The Sidebar plugin is the culprit for sure, when I toggle that one on off the lightbox works as expected. I’ve tested this in both IE and FF, the behavior is the same.
I want to keep the feature, just curious if you’ve heard of this or if you could point me in the right direction to get this fixed.
Thanks,
Josh Johnloz
Hey Justin,
I just wanted to let you know that it was the other f*&(^(*&^ plugin causing the issue. It’s funny, that other one is good for what it does, but at this point I think there’s more of my code in the thing than the original developers’. Some guy wrote about “not re-inventing the wheel” here. If the person who invented the first wheel would have read the WP Codex at least once, we wouldn’t be fixing their buggy ass code all the time.
Basically, he was calling scripts for lightbox by pushing the js calls using wp_add_head_style in his plugin rather than using wp_enqueue_script. I just ripped out the lightbox js business from the plugin, but left the rel=”lightbox[$var]” part in his URL construction function. I then installed http://wordpress.org/extend/plugins/lightbox-plus/ which actually isn’t 7 years old.
That solved my problem and I also have a nice lightbox to use for other uploaded pictures.
Thanks for your slider…definitely better than some of the other ones out there, easy to style and not a ton of extra crap installed that I don’t want or need. If you’re interested in seeing my implementation, shoot me an email and I’ll send you the URL for my client’s site.
Please don’t waste any of your time on my original request.
Thanks,
Josh Johnloz
Did you use this for a theme other than Hybrid, Thematic and Prodigy? If so, how did you get it to work? I can’t get it to work for me.
Thanks.
Awesome plugin! So simple! It would be awesome to see this with the option for multiples. Just a different class to them so we can position them with CSS separately. This is SO much easier than doing this manually. To be able to create multiple sliders just as easy would be SO valuable. Temporary promotions, shopping carts, social media icons, recent posts, etc. This is one of the best plugins available!
Hi, love this plugin.. but I have one issue.. Everything runs well, but only on one page and my blog.. the slider doesn’t work on other pages… I run an aggregator site.. Advice.. thanks
Thank you so much for making this plug-in, and for providing such good CSS control. I was able to round the bottom corners of the tab using the Open link and Close link placeholders you put in the CSS file.
How would I replace the character arrow with a graphic arrow? When I place the graphic’s IMG tag in the PHP code in place of the character arrow, space is made for the graphic (32px by 32px) but the graphic itself does not show.
Hi,
Great plugin! works really well.
I have made some minor tweaks to it, so that the text on the tab changes depending on whether the user is logged in or not.
I have also set it so that the open/close tab is keyboard tab enabled. However how can I get it so that the contents of the sliding panel are tabbed first before the main content of the site? currently it tabbed into after all teh content on the site (if this makes sense?)
thanks!
Rich
great plugin, would it be possible to include two different panels.
Eg you could have one dropdown panel for food menu, another one for social media.
IS this still compatible with new wordpress 3.5.1?