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()…
[...] Sliding Panel: WordPress Plugin Justin Tadlock releases a new great plugin, helping you to easily add a panel that can be opened and closed with a click of a mouse, and that will allow you to house additional content on your site without it getting in the way. (tags: WordPress plugin) Leave a Reply Click here to cancel reply. [...]
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.
[...] Sliding Panel: WordPress Plugin by Justin Tadlock [...]
[...] Sliding Panel: WordPress Plugin by Justin Tadlock [...]
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.
[...] Sliding Panel: WordPress Plugin (tags: WordPress panel plugin sliding) [...]
Nice job Justin. Keep pimpin’ WordPress out!
Nice plugin Justin, thank’s very much for your information
[...] Sliding Panel Plugin, was coded by Justin Tadlock at ThemeHybrid, adds a panel that opens and closes to the top of your [...]
[...] Sliding Panel [...]
[...] Direct link to article » » [...]
gorgeous.
[...] In: Wordpress plugins 1 Jul 2009 Go to Source [...]
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.
[...] View original post here: Sliding Panel: WordPress Plugin [...]
[...] The plugins I wanted for those sites which are key to them functioning up to date. (For example: I had to have Simple Top Navigation) Once I knew all the key plugins were working I began to find some new ones I wanted to try which would only function with 2.8 installed. (For example: Sliding Panel) [...]
[...] Sliding Panel: WordPress Plugin — 11:04am via [...]
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?
[...] See the article here: Sliding Panel: WordPress Plugin [...]
[...] plugin che ho utilizzato sono Sliding-Panel per quanto riguarda il pannello e Contact-Form, un plugin molto efficace per creare un form per [...]
Just saw this plugin featured in a Wordpress Plug-ins list for designers. This is very helpful, glad I ran into it!
[...] Sliding Panel [...]
[...] Sliding Panel: WordPress Plugin nice way to implement a sliding panel in wp (tags: wordpress plugins) [...]
[...] Sliding Panel: WordPress Plugin [...]
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
[...] Sliding Panel [...]
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!
[...] Sliding Panel: WordPress Plugin [...]
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?
[...] Sliding Panel: WordPress Plugin (tags: wordpress plugin jquery) [...]
[...] Sliding Panel: WordPress Plugin by Justin Tadlock. [...]
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?
[...] WordPressの上部に開閉するエリアを追加するプラグイン Sliding Panel [...]
[...] バージョン 0.1 | 作者: Justin Tadlock | プラグインのサイトを開く [...]
Justin,
I’m not sure this plugin works with the new wordpress version…/
[...] Sliding Panel: WordPress Plugin by Justin Tadlock. [...]
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!
[...] get custom – sliding panel by Justin Tadlock – excerpt-reloaded – [...]
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
[...] Sliding Panel – has anybody ever hit the little thing that says “open” in the black menu bar at the top of the page? No? Oh well, if you had you would have found a really cool jquery powered sliding panel. It looks nice opening and shutting. I could just sit there and do it all day. [...]
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?
[...] 3) Create a sliding login panel as seen at http://justintadlock.com/archives/20…rdpress-plugin [...]
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?
The sliding plugin is a great plugin, it was a little tricky to get it right but it works like a charm now.