In Developer

WordPress jQuery Sliding Widget Panel

Posted by: MojoWill on Sep 13, 2011 | 15 Comments Tags: Development, jQuery Sliding WIdget Panel, php, Widget, Wordpress

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

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.

15 Comments

Mash
February 19, 2012
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
- MojoWill
  February 20, 2012
  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
Greg
February 16, 2012
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
- MojoWill
  February 16, 2012
  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
Dave Kuhar
February 12, 2012
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
- MojoWill
  February 12, 2012
  Cheers. Have fixed on GitHub and will push an update to WordPress tomorrow.
  Reply
  - Dave Kuhar
    February 13, 2012
    Thanks!
    Reply
LATU
February 1, 2012
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
- MojoWill
  February 1, 2012
  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
Adam
February 1, 2012
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
- MojoWill
  February 1, 2012
  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
Jason Hobbs
October 3, 2011
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
- MojoWill
  October 3, 2011
  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
Leon Lloyd
September 16, 2011
This might be worth a look re: Git and WP plugins repository – https://github.com/jkudish/WordPress-GitHub-Plugin-Updater
Reply
- MojoWill
  September 16, 2011
  Nice find might have to take a closer look at that!
  Reply