Slider Example

I’ve used a jQuery slider on a site in the past but wanted to have a re-usable version that could easily be deployed on WordPress sites. I found one that was actually written using the same tutorial I have used in the past. The only problem was it looked horrible and wasn’t very flexible. So I rewrote it and am happy to share it with the world!

The Sliding Panel widget simple adds 3 widget areas to the top of any WordPress site by installing the plugin and adding one line of code to your theme.

Features

  • 3 Widget Areas
  • Fully customisable CSS (instructions included)
  • Fully Open Source (the original Javascript was encoded so has been replaced)
  • Free to use on commercial or personal projects

Installation

  • Download from Github Page
  • Unzip and rename the folder to “sliding-panel”
  • Upload to wp-content/plugins via FTP
  • Activate from the Plugins page in your WordPress Admin
  • You will now see it on your widgets page (it will add 3 widget areas for you!)
  • You will probably need to add the following code to your themes header.php file just below:
    <body>
    <?php if ( function_exists( 'get_sliding_panel' ) ) get_sliding_panel(); ?>

Please Note!!
The Sliding Panel will ONLY show if you add widgets to the widget areas (1 or all)

You can find the source code on my Github page https://github.com/mojowill/The-Mojo-Sliding-Widget-Panel

A working example can be seen at the top of this site. (Scroll Up Genius!) UPDATE: Actually it’s not there any more sorry!

I’m not going to list it on the WordPress Plugin site as despite being a great system they are using SVN as their backend which is CRAZY! Come on WordPress get with the Git already!

Enjoy!

UPDATE: 16th Jan 2012 – I have been working on a few plugins so will be adding this to the WP plugin site now I’ve worked out how!
UPDATE: 31st Jan 2012 – I have now released this get more info in the new post here.
UPDATE: 22nd January 2014 – WOW has it been that long? I am aware with some issues with later version of WordPress, unfortunately I am super busy and don’t have the time currently to update the plugin. Hopefully I will get around to it at somepoint!

48 thoughts on “WordPress jQuery Sliding Widget Panel

  • I want a fixed sliding widget for my website. have you seen it on any website??? I have seen on some websites they use fixed sliding widget at sidebar for adsense or custom content. Plzz can you help me or suggest a right plugin for it??? Thanks

     Reply

    • Sorry not something I have come across. Maybe try the WordPress.org forums?

       Reply

  • Hello Will,
    I’ve been using your slider for some time now with no problems since before WP 3.5. With the current WP 3.7, the slider acts up. It will open but not give an option to close. Although, this is an intermittent behavior. You can see it in action here. http://www.anazaosalon.com. Some browsers also won’t honor my css depth properly and cut off the search field I have in the center panel. Any help would be most appreciated.

     Reply

    • Hi Brian, sorry for not replying sooner. I’ve not really had any time to update this plugin to support the latest versions. it could be a jQuery issue but without going through it all in more detail I’m afraid I can’t be much help. I will get around to publishing a update at some point! Some day!

       Reply

  • Hi Mojo,

    This is exactly what I was looking for.
    I’ve installed it and everything looks fine so far.

    There’s only one thing that I would like to change. It’s when you hit “Close Panel” the “Open Panel” doesn’t come back. I would like to be able to open the panel more than once. Would it be possible to have it that way?

    Thanks,
    YanickDev

     Reply

    • I’ve not seen this kind of behavior before, the button should be there all the time. It is likely that you have something conflicting with my plugin.

       Reply

  • This was working great for me, but seems to have stopped. It’s still across the top of my screen, but doesn’t slide down. I think it may have stopped working with my WP upgrade to 3.6. Which uses version of 1.10.2 of jquery. Will this plugin still work with the newest WordPress? Otherwise, have any ideas why it stopped working for me? Anything you can share would be very much appreciated.

    Lacey

     Reply

    • Hi Lacey,

      I’ve not had any other reports of it not working. I haven’t had time to test it on the latest WordPress but it should work. A URL for your installation would be helpful if you want me to take a look.

       Reply

      • That would be fantastic. The site is arthuralderete.com.

        Thank you!

         Reply

      • Hello MojoWill,

        I really appreciate your offer to take a look at the problem I’m having. I am still unable to fix it.

        As a reminder, it worked great for me for a while, now it’s still across the top of http://arthuralderete.com/ but doesn’t slide down.

        Lacey

         Reply

  • Hi Will. Great plugin that I have used on some sites. Thank you.

    I would like to use this on the WordPress Admin Dashboard. Is this possible? How would I go about using on both the front end and the back end.

    I look forward to your reply.
    Thanx in advance,
    Brent in Oregon

     Reply

    • Thanks for your comment. Technically it might be possible to have something similar in the admin area but not this plugin. You could use the JavaScript and start from there. Best of luck!

       Reply

  • Hi Will,

    I installed the The Mojo Sliding Widget Panel but it doesn’t seem compatible with a lot of plugins (ex : Dynamic To Top, WP Super Cache).

    When I activate those plugins, the top panel moves down for no reason (it’s not attached to the top of the page anymore, even though it’s still “working”).

    Do you have any idea why ?

     Reply

  • Is there a way to have the panel close when clicking anywhere below the dropdown? Also can I click a link other than the tab to have the action drop the panel down?

     Reply

    • Hi Ken if you look in panel.js this will show you what elements the js is looking for and watching you can play around with this to achieve what you want.

       Reply

  • Hi,

    i like this plugin so much.
    i had installed at my website,
    i manage to make the middle sliding panel to show.

    at the website, when i click on it,
    there is no response of sliding down and the content didn’t show

    any help here ?

    Thanks,
    Lawrence

     Reply

  • This time, I’m trying to publish the panel on this site: http://communityexpert.com/inspire – however, it doesn’t appear after adding the code to the theme header. I renamed the directory as instructed – didn’t work, and I named it back. I also installed the plugin directly from the WP directory – still didn’t work. JS seems to be loading OK, so I’m a bit confused. Perhaps there is something else to do?

     Reply

    • Hi John. I’ve removed your other comment. I do see and approve all comments fairly quickly but am not always able to reply straight away.

      Firstly if the js and CSS is loading for the plugin then it is working and loading correctly. I would make sure you have wp_debug on so you can see any errors.

      Common problems are themes or plugins which load their own jquery incorrectly and so they load along side the core jquery. The other is CSS conflict. Your themes CSS may be conflicting with the plugin. This is something I hope to fix in a later release but haven’t had time yet.

      Other than that just remember you need to have a widget in at least one of the slider widget areas for it to show.

       Reply

      • Sorry for cross-posting. Thanks – I’m double-checking the cause so that hopefully I can get it to work. :-)

         Reply

  • Pingback: Animation Panel | Pemrograman Internet 2

  • Oh, I noted that if I’m loged as Admin in wordpress the top panel is over the “sliding panel”and then everithing works fine. Otherwise the top menu of the theme don’t work.

    GX.

     Reply

    • Sorry your having trouble sounds like it could be something in your theme conflicting. Try with the default twenty ten theme and see if hat works.

      I have deleted your other duplicate post, posting the same thing again won’t solve the issue ;)

       Reply

  • Hi, I want switch to WordPress. Still testing but installed the original version of the sliding panel and now your version and have the same rpoblem… The top menu of the theme don’t work. I ‘m editing the css and play with the positiong tag and my page slide with the panel to. Any help? I’m testing in windows 7.

    http://consag.tij.uia.mx:8080/wordpress

    Gracias

     Reply

  • Hi mojo thanks for this great plugin, do you think it’s possible for the sliding panel to be in the left side instead on top? My client want’s it to be in the left side instead on top.

    Thanks

     Reply

    • I would start by altering the CSS positioning of the top panel div to put it on the left hand side. It shouldn’t be to hard to edit.

       Reply

  • Hi, wondering if its my theme or still the plugin but the slidedown doesnt work properly in my install. have included the
    but seems to be corrupted once the widgets are put in.

    just seems odd. doesnt seem to render the slidedown and just shows the whole thing at the top of my pages.

     Reply

    • It sounds like a JavaScript issue perhaps another plugin is conflicting. When the plugin is active view the source of the page and make sure both jquery and the plugins panel.js are being loaded.

       Reply

      • Hey MojoWill, I am having the same problems.

        I checked and my js and everything seems to be loading.. You can check it here if you would like. http://tinyurl.com/6uz4qsz

         Reply

        • You seem to have renamed the plugin folder so don’t know what you have modified also you are loading jQuery twice for some reason once from the core and your theme is also loading an old version of jQuery. This is looking like a theme issue you theme is loading a lot of javascript including some inline.

           Reply

          • is it possible to exclude jQ from loading in your plugin or to do a check for jQ being loaded and then not load?

            im guessing alot more people will start seeing this issue is all given how popular both jQ and your plugin are becoming.

            I will have a hack around and see :-)

             

          • My plugin does not load its own version of jquery. It simply requires it, it follows the exact guidelines set out in the WordPress codex for enqueuing JavaScript.

            The trouble comes from people using themes and other plugins that are badly coded and don’t properly register and enqueue jQuery they simply include a standard HTML call for the JavaScript in the HTML head completely bypassing wp_enqueue_script. This is just wrong.

             

          • hmm… I didn’t rename anything… just installed plugin and activated… The js links are all working so I am not sure what the problem is. Any idea what I need to do to get this working? I have tried about 6 different sliding panel plugins and none of them are working with this theme… And this one is actually the only only that I could get to work with the default WP theme…

             

          • Its your theme that is the problem. It is loading its own version of jquery which is conflicting with my plugin and I would suggest all the others you have tried.

            The WordPress core is already loading the latest version of jquery your theme is then loading 1.3 on top!

            That’s why the plugin works with the default theme as it is properly coded.

             

          • I understand that it is a problem with the theme… I am not interested in the problem so much as the solution though… Do you have any advice on how I could fix the problem?

             

          • As I have said its the second jquery your theme is loading. Have a look in your themes header.php I’m guessing it is specified in there, comment out the call to the theme version of jquery. You could of course find that it breaks your theme.

            Other than that you will need to contact your theme provider for support, the plugin works fine. Unfortunately I cannot account for every theme so follow the WordPress guidelines.

            If you still can’t get it worked out then feel free to contact me via the contact page and I can quote for consultancy to get you up running.

             

  • Found an error at line 63: you called the correct is_active_sidebar twice and the incorrect is_activesidebar once. WordPress did not like this.

     Reply

    • Cheers. Have fixed on GitHub and will push an update to WordPress tomorrow.

       Reply

      • Thanks!

         Reply

  • Like the plugin, but want to slide it horizontal from right to left, and active / inactive on hover in / out. 600px high.
    Is that possible or have i break a lot of code for that…?
    (i’m a beginner in poetry)

    LATU

     Reply

    • Anything is possible. You hold be able to achieve what you want to size and positioning etc can be edited in the CSS the hover effect you would need to modify the JavaScript to do this.

       Reply

  • Nice plugin. Would be great if you could fix the 500 server error issue with regards to the left panel.

    Also, adding this plugin in screws up my theme positioning. Can’t this just be absolutely on top of everything at the front so it doesnt interfere with any theme? The sliding panel also inherits the css text shadow from my theme and i would really prefer this panel uses no css from my main theme.

    Any help would be appreciated.

    Keep up the good work :)

     Reply

    • 500 server error? Not sure why this would be happening. What exactly is the problem.

      I do need to spend a little more time on partitioning off the css so it doesn’t interfere with a users theme but haven’t had time yet. It should be fairly easy to modify though.

      More info the 500 error would be useful though as I haven’t seen that before and have this running on a couple of sites already without issue.

       Reply

  • Hi MojoWill!

    Love the plugin, actually trying to incorporate it into my Child Theme for the Catalyst Theme for WordPress.

    I downloaded the file, added it to my plugins file (building my Child Theme locally using Bitnami WP stack) and it activates in the backend but when I go to the front end with it active, I keep getting this error screen:

    http://cl.ly/AdTA

    Any ideas what I am doing wrong or where to look for fixing this issue?

    Thanks!
    Jason Hobbs

     Reply

    • Unfortunately the error screen doesn’t really give much info. One bug I have found is that you need to place a widget into the LEFT box for it to not throw a wobbly. I’ll add a fix when I get time. but for now try adding a widget to that position and see if it works. If you can open an issue over at the Github page that would be good.

       Reply

  • This might be worth a look re: Git and WP plugins repository – https://github.com/jkudish/WordPress-GitHub-Plugin-Updater

     Reply

    • Nice find might have to take a closer look at that!

       Reply

Leave a Reply

Mojowill Avatar

Who the Hell am I?

I'm Will, a full time web developer, geek and musician. I develop using PHP and MySQL and spend most of my time working with WordPress. When I'm not buried in code I'm gaming, cooking or writing and recording music in my studio. I like sci-fi, pancakes and coffee and am totally prepared for the zombie apocalypse...

Stalk me on these other sites...

Why not be super creepy and check me out on all these other sites, I think they call it social media?