How to create your own Bootstrap WordPress carousel that uses tags/categories and Featured Images

When it comes to carousels/image sliders for your WordPress site there’s a bewildering choice out there. Most can be broken down into two different functionalities though, and the choice really depends on what suits your site’s editors the best.

1. Having the images/carousel items as a separate content type.
2. Using the Featured Image functionality to automatically connect the images to Posts/Pages

Option 1 works best if you want to create custom graphics for each slider item and you don’t want to chop and change the slides too often.

Option 2 lets you ‘promote’ posts/pages to the carousel at the touch of a button, but if the Featured Image is a different size to the carousel images, or if you don’t want always want to use the post/page title as the title of the carousel slide – then it’s not a great solution.

For Option 1 there’s some great plugins out there. You’ll have no problem finding them on Google but many WordPress developers prefer Soliloquy so make sure you give that one a look.

There are some plugins that are designed to work with Option 2 – Genesis Featured slider for example. Most have some limitations though – noticeably that they’re often setup to choose from Posts, sometimes Pages, even occasionally both, but often not custom post types that you have created or that have been created by other plugins (e.g. Events). So let’s roll our own functions file that does only what we want it to do and that we can easily customise and deploy on client themes.

Note: this would probably be better suited as plugin rather than part of the theme as its functionality should be theme agnostic. It’s not hard to convert all this into a plugin if you wanted to. For ease of use I keep it in my theme folder so I can add/edit the content-types easily according to what that site is using, and because I know my themes already have the Bootstrap library loaded.

Here’s how it works:

1. You can choose the slides to clickthrough to a combination of Posts, Pages or whatever other custom post types you like. From now on I’ll just refer to ‘pages’ but in this case that means any WordPress content type.
2. It’s powered by Categories. Just create a ‘Featured’ category and select/deselect that for any page you like in order to feature the slide in the carousel. Some content types (like Pages) don’t automatically have Categories enabled so we’ll switch that on.
3. By default it uses the Featured Image of the page. If there’s no image set then it will ignore that page rather than show a blank slide in the carousel. It also uses the Title of the page as the title of the slide.
4. If you want to choose a different image or a different title for the slide then there’s an easy way of overriding the defaults from within the Edit Page screen.
5. This uses the Bootstrap v3 slider as I usually have the Bootstrap library loaded in my themes anyway. It’s not a hard job to change the wrapper html so it uses another slider framework like Flexslider instead.
6. It’s all wrapped up in a shortcode – so you can place the carousel in your content or a widget using [carousel]

There’s a demonstration of the WordPress carousel on this page.

With a basic bit of WordPress knowledge you can take this and use it as it is, or you could extend it by adding the post excerpt or a custom field in the slides too. Take it and play with it, or just take it apart. If there’s a better way of doing any of this then let me know in the comments below – we’re all looking to improve our skills!

Here’s how we’ll do it:

**Note – these custom fields were created using the excellent, free and very popular Advanced Custom Fields plugin. As Barry mentions in the comments, without some tweaking the code below won’t work unless you have the ACF plugin installed.**

We’ll add it as a self-contained PHP file called carousel.php and we will load it within our main functions.php file. I usually have a library folder and custom and default folders within that. However you organise your theme just make sure that you update the filepath below. In your functions file add this line. I have it included in all my themes and just comment it out if I’m not using the carousel feature.

//Load the carousel functions file to use the Bootstrap carousel shortcode
include_once( CHILD_DIR.'/lib/custom/carousel.php' );

Here’s the code for the carousel.php file. It has comments within it to explain the code and how it works.

That’s it. Just use the  [carousel] shortcode wherever you want to display the carousel.

About Ben Blankley

I've worked for and with charities of all sizes for over 20 years.
I build charity websites and help create compelling content to go in them.