WordPress 4.9 is live a few days now and it comes with an awesome new widget: the Gallery widget! In this mini-tutorial we’ll see how to turn our gallery widgets into image slideshows using Slick carousel and minimal code!
The jQuery plugin that’s going to power our carousel is none other than the almighty Slick Carousel, by the man, Ken Wheeler.
Why Slick? Because it’s (in my opinion, at least) the most powerful free and open source carousel jQuery plugin out there; it’s versatile, extremely easy to use (as you’ll soon discover), touch ready, mobile friendly, and comes with an abundance of options. In fact, we like Slick so much here that we’ve adopted it in all our recent (and future) themes.
Getting set up
For this tutorial we’ll be using our own popular Olsen theme which comes with slick carousel enqueued by default, but anything we do applies to all our themes, and generally all WordPress themes.
If you’re not using Olsen (or any of our more recent themes this last year and a half), the first thing to do would be to download Slick carousel from its website. Click on the “get it now” navigation option and hit the download button. Extract the file contents of the zip you’ve just downloaded and transfer the
slick folder inside a directory in your theme (e.g. in
Then, inside your theme’s
functions.php file enqueue it:
Of course, make sure your theme also enqueues jQuery.
The new Gallery widget
As I said before (and you’re probably already aware) WordPress 4.9 comes with a nifty Gallery widget. It’s generally very simple to work with, it requires a selection of images from your media uploader and then goes on to output the native WordPress gallery markup which is the same exact one as the native WordPress gallery shortcode we’ve been using for years in any post or page content.
Every theme that respects itself should have styles available for native WordPress gallery support, so you should be able to use the new widget in your website without any updates or additional tinkering. Here’s how it looks in Olsen, for example:
Let’s turn this into a carousel!
Yup, that’s all it takes!
All Slick really needs to work is the selector of an element containing the images (or slides in general), and in our case it’s the child
.gallery element of each
.widget_media_gallery class (which is the Gallery widget’s class).
And here’s how cool it looks in Olsen:
And that’s it! A beautiful image carousel widget with minimal effort! Feel free to try it on any of our themes (or on your own theme), make sure you check out Slick carousel’s settings to customize your widget as you’d like, and let us know in the comments about your results, along with which jQuery plugin you like best for your slideshows!