Blog

sd2_sidebar_feature

Tutorial: How to embed a content slider in your WordPress sidebar

On September 27, 20123 Comments

How to embed a content slider in your WordPress sidebarYou can see sliders on almost every homepage on the Web these days, and they have a bunch of benefits – they increase the interactivity and engagement of the page’s content, and they can surface fresh content to your visitors – but probably the biggest attraction is that they save space.

Most people only use content sliders on their homepage, but there’s another common area where space is typically at even more of a premium – the sidebar. There’s a ton of potential uses here (and we list few of our favorites below), so we decided to write a quick tutorial to show you how to create a sidebar content slider with SlideDeck.

Step 1 – Measure twice, cut once

First, make sure that your WordPress theme is using a widgetized sidebar – if you’re not sure, check with your local friendly Web developer, or widgetize it yourself.

Start by measuring the width of your sidebar – you want to make sure your SlideDeck isn’t too wide, otherwise it’ll jut out of your sidebar area and likely break the layout of your page. Put away your measuring tape – Firefox & Chrome have handy tools built right in to help you figure this out:

Firebug & Chrome Inspector

  1. Right click on one of your existing widgets on your WordPress site, and click on “Firebug” or “Inspect Element”. This will open up the Inspector panel, which allows you to view the code behind the current page you’re viewing
Right-click and select the "Inspect Element" option (Chrome)
  1. Hover your cursor over each line of code until the content of your widget is highlighted in your main browser window
Hover over the lines of code until you highlight the widget area
  1. Check out the little yellow tooltip to discover what the width of your widget’s content area is (expand the lines of code to drill down, if necessary)
Look for the yellow tooltip to find the width of your widget area - your 'Magic Number'

Sizing your SlideDeck

Once you have your magic number, write it down, then it’s time to build your SlideDeck.

Note: most WordPress theme widget areas are pretty narrow, so you’ll need to keep your SlideDeck small. At sizes narrower than 300px, you’ll need to keep your sliders pretty basic, so be sure to test them!

We’ve done a screencast about the different methods you can use to build your SlideDecks before – the important thing to remember here is to set your slider’s width to match your magic number, using the “Custom” sizing options.

Use your Magic Number as a guide for how to size your SlideDeck

Once your deck is ready, it’s time to add your SlideDeck widget! (That’s your cue to get excited)

Step 2 – Add your widget

Don’t worry, this won’t hurt a bit. In the WordPress admin, head on over to Appearance » Widgets. In your available widgets, find the “SlideDeck 2 Widget”. That’s right, we’ve included a special widget you can use to easily pull in your SlideDecks! Just and drag it into your active widgets area over on the right.

Drag over the SlideDeck 2 Widget to the Active Widgets area

To embed your SlideDeck in the sidebar area, simply select it from the dropdown list.

A note on responsive settings: Given that your slider will already be quite narrow in the sidebar, you likely won’t gain too much by making it responsive in this instance. If you have a fluid/variable-width sidebar, you can actually turn on the responsive setting with your SlideDeck, so it can adapt to fit the space. Every theme is different, so play with the settings to get the results you want. As the kids like to say, “YMMV” (Your Mileage May Vary).

Step 3 – Smile, and be happy

Aaaand, you’re done! You’ve now successfully added a dynamic, space-saving slider to your WordPress sidebar. And the best part? You can mix your content sources together! That means you could showcase your latest Instagram shots, Tweets and recent posts all in the same space! Talk about one-size-fits-all…

A nice twitter slider in the sidebar

Practical Applications

This method has a ton of applications on both the sidebar of your site, as well as any widgetized areas:

  • Image ads/space-saving – instead of having all your blog’s badges and sponsor ads piling up in your valuable sidebar real-estate, consider bringing them all into a rotating content slider, and randomizing them, so everyone gets a fair shot.
  • Showing tweets – The standard Twitter widget is pretty cool, but it only shows the text of the tweets. SlideDeck can pull in images linked to from your tweets to create a stream with far more visual impact
  • Latest media from your social streams (Instagram, Flickr, etc.) – Showcase your latest Instagram creations, or the vacation pics you just posted to Flickr
  • Sidebar video gallery – Have a set of intro videos you’d like your visitors to see? Avoid cluttering up your main page content, and instead stick them in a SlideDeck off to the side.

Got any great examples of sidebar/footer SlideDecks out in the wild? Let us know in the comments!

Leave a Reply

Comments (3) Responses

  1.  

    Jason

    You’re welcome, Jerry – yeah, both Firebug and Inspector have basically saved several million man-years of developers’ time…

  2.  

    Jerry D.

    Gosh I love Firebug. I’ve built about 25 sites from scratch and without Firebug I’d probably be completely lost on all of them.

    This post kind of reminds me that web design is sort of like living in a New York City apartment: you have to fit as much useful stuff in a tiny space as possible without making it look too cluttered. 🙂

    Thanks, Jason.

  3.  

    Christian

    Having trouble getting this to work in my sidebar. When I add a new sidebar to WordPress (via functions.php) and then add the slidedeck widget, it causes all of my other sidebars to disappear completely.