How to add a sliding panel

WordPress tutorial

I’ve done a few sites recently where a very slick sliding panel could come in handy, so I thought I’d show you how to have one for yourself. NOTE: It’s assumed you’re running The Thesis Theme for WordPress. If not, some of these directions won’t apply. Also if not…you should be. :)

What is a sliding panel

The best way to describe this is to just show you. Head on over to a test site of mine and you’ll see a tab along the top that says “Open”. Click on it and you’ll see a panel slide down, and the “Open” will change to “Close”, which, upon clicking, will close the panel.

What can I use that sliding panel for?

The cool thing about the panel is it’s actually a widgetized area. In other words, it’s just like your Sidebar 1 and Sidebar 2 (and any others your site might have), so when you go to your Appearance>Widgets menu, you’ll see it along the right as an area into which you can drag any widget you have available.

Some cool potential uses that I can think of are:

  • As a way to display your login screen - if you have a site that visitors login to
  • To display your shopping cart - if you have an online store
  • A form to sign people up to a marketing/newsletter/other list

Those are just a few ideas, but it’s very flexible, really, and the more technical you get, the greater the possibilities. What I really like about it is that it allows you to maintain certain functionality (login/shopping cart/list signup/etc) without taking up much/any real estate on your site *until* the visitor clicks on it.

So if any of this sounds cool to you, keep reading.

Tutorial: Adding a Sliding Panel

Install the Sliding Panel Plugin

First, click on the Plugins>Add New menu, and in the search field, type in ‘Sliding Panel’. This is what you’ll see.
It should be the first option that appears, but just in case, make sure you choose the Sliding Panel by Justin Tadlock. Click Install Now, and OK if it asks you to confirm. Then Activate the plugin when prompted (or, if not prompted, from the Plugins>Installed Plugins menu).

Add a widget to your Sliding Panel

Click on the Appearance>Widgets menu and you’ll see that Sliding Panel is now along the right, probably below your sidebars, as an area for widgets to be added to. Go ahead and drag any widget you like into that area and we’re good.

Make your Sliding Panel visible

Okay, now that we installed the Sliding Panel and put something in it, we have to display it. This is the *only* sorta tricky part, but thanks to Thesis, it’s no big deal.

Click on The Thesis>Custom File Editor menu. At the top of that screen will be a drop down menu that current reads ‘custom.css’. Click on the arrows to the right and choose ‘custom_functions.php’ from the drop down. Then click on the green “Edit Selected File” button.

Depending on whether you’ve used this file before or not, there may just be a little bit of text on this file, or there may be a lot. Regardless, scroll down to the bottom, hit enter a couple times, and put the following code:

/****************************************************************
ADDS SLIDING PANEL FOR WIDGETS
****************************************************************/
function add_dropdown_panel(){
if ( function_exists( ‘get_sliding_panel’ ) ){
get_sliding_panel();
}
}

add_action(‘thesis_hook_before_html’, ‘add_dropdown_panel’);

Then click on the Green Save Button (or whatever your save button says :D) to save your changes. Provided all these steps were done correctly, you can now go to your site’s front end and see the sliding panel in action.

Styling your Sliding Panel

As you’ll see, this panel has a set height, and it extends all the way across the screen width-wise. Depending on what you put in that sliding panel, the current dimensions/styling may not suit you. So below are some of the CSS elements you can affect, and some ideas about how to tailor them to your needs. If you’re happy with it as is, feel free to skip this next step.

First, though, click on the Thesis>Custom File Editor menu and be sure that custom.css is the file that appears in the drop down menu at the top. This is the style sheet you/we should always use when making CSS customizations with the Thesis Theme.

Scroll down to the bottom of this sheet (or, if you have this sheet organized in some way, to the section that makes the most sense for your organization) and paste in the following code:

.custom #sliding-panel .panel {
background-color:#D1D1D1;
height:575px;
width:25%;
}
.custom #sliding-panel .tab {
width:25%;
}
.custom #sliding-panel .tab a {
float:none;
background-color:#FF0000;
}
.custom #sliding-panel .widget {
height:575px;
}

I won’t go into all the details of what each one does, because most of you would lose interest, or perhaps already know. But use the above as a guide and change some of the values (background-color, width, height, etc) and see what effect it has on your site/sliding panel.

This should get you started, but keep in mind, you could choose to place the sliding panel somewhere else entirely. Note in the first block of code (that goes in your custom_functions.php file), the last line says “add_action(‘thesis_hook_before_html’, ‘add_dropdown_panel’);”. That ‘thesis_hook_before_html’ refers to the placement of the item - before html says to put it just after the opening body tag, before the anything else on the site. You could choose to hang it on any hook you want (see the Thesis hook reference for a list of your options) and that panel will show up elsewhere. And with more styling, it could be made to look/fit perfectly on your website or blog.

As always, if this tutorial was exactly what you needed, but you’re looking for a few more details, leave a comment below and I’ll help if I can. Or if you like the idea of your site having a Sliding Panel (or some other functionality) but don’t want to endure the time and (sometimes) headache of figuring it out on your own, feel free to hire me for some WordPress Coaching.

Hope this helped…cheers!

{ 3 comments… add one }

Leave a Comment