Tutorial: How to embed a content slider in your WordPress sidebar
You 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
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
- 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
- Hover your cursor over each line of code until the content of your widget is highlighted in your main browser window
- 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)
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.
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.
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…
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!