Replace featured image with slider in WordPress

Add a slider instead of your featured image with just one click

Have you ever wished you could replace the standard featured image in your WordPress theme with a slider? In this short article, I’ll show you how you can do this really easily using the Super Hero Slider plugin.

Replace featured image with slider

At the time of writing, I don’t think there’s a simple way to replace a featured image in your page or post with a slider. However, this method will work with most themes (for any issues, see below) and is completely simple – it just requires you to select a checkbox.

Note that this doesn’t work with Divi. Storefront also has some issues. These themes don’t appear to use the standard WordPress featured image functions.

How to replace a featured image with a slider in WordPress

  • Go to Plugins > Add New and type Super Hero Slider into the search field. Click Install then Activate
  • Go to Sliders > Add New to create a new slider. Give it a title
  • Go to Slides > Add New to create a new slide. Give it a title, upload a featured image which will serve as the background image for the slide. Enter any text or other content in the caption fields then assign the slide to the slider you’ve just created
  • Repeat this step for any other slides you want to add
  • For further guidance on creating a slider, take a look at the documentation.
  • When you’ve created your slides and slider, open the page or post where you’d like to replace the featured image with a slider
  • Add a featured image – this is just a placeholder so it can be any image. It won’t appear on the page but you need one there so that WordPress can filter it
  • In the Super Hero Slider metabox, select the slider from the ‘Slider’ dropdown box and check the ‘Replace featured image?’ field
    Replace featured image with slider
  • That’s it

What themes will this work with?

This should work with pretty much any WordPress theme, assuming your theme uses the standard WordPress functions – the_post_thumbnail or get_the_post_thumbnail – to display the featured image (also called the thumbnail).

Most themes should use these functions to display featured images – if you’re not sure, just check with your theme developer.

Filter the slider wrapper

If you want to change the html wrapper around the slider, then you can do this easily using a couple of filters. Use the code below as a starting point:

function your_prefix_open_wrapper( $html ) {
  return '<div class="my-new-wrapper">'; // Replace this as you wish
}
add_filter( 'ctshs_open_featured_slider_wrapper', 'your_prefix_open_wrapper' );

function your_prefix_close_wrapper( $html ) {
 return '</div>'; // Replace this as you wish
}
add_filter( 'ctshs_close_featured_slider_wrapper', 'your_prefix_close_wrapper' );

Why add a slider?

It is fair to say that not everyone approves of sliders on webpages. However, sliders can be a great option if you have lots of images you’d like to feature on your page and/or you want to provide your users with something visually arresting.

Super Hero Slider is a layer slider, meaning that you can add captions, images and buttons as layers on top of your slide’s background image.

Super Hero Slider Pro

Replacing the feature image only requires the free version of Super Hero Slider. But you can still check out the Pro version which has some great additional features, including:

  • Full screen sliders
  • Carousels
  • Recent post sliders and carousels
  • WooCommerce product sliders and carousels

There’s more information about Super Hero Slider Pro here, plus a whole demo site here. And if you want to replace your featured image with a gallery, you should take a look at Sliderify Pro.


Do you develop plugins?

You should try Wisdom, a plugin designed specifically for plugin developers that allows you to track your plugin's usage and provides invaluable data on how your plugin is being used. Find out more.

9 thoughts on “Replace featured image with slider in WordPress

I installed it on Storefront, but it’s not working.

Reply

Hi Wonkan – can you provide some more details of what isn’t working for you?

Reply

It also doesn’t work for me. I can set the slider and sliders, but even when I check the checkbox to change the featured image with slider, it doesn’t do anything.

Reply

Hi- thanks for posting. What theme are you using?

If you’d like me to take a closer look, please email on info[at]catapultthemes.com and I will investigate.

Gareth

Reply

I am using Divi. I sent you an email. Thanks for a very quick reply.

Reply

Hi there,
works for me – but there is still a problem with text that vanishes.
I´m using woocommerce/storefront-theme. super hero slider replaces featured image on frontpage just fine. but I had text on the frontpage. as soon as super hero slider replaces featured image, the text is not visible anymore.

Reply

Hi Julia – thanks for this. There is an issue with the way the Storefront theme handles content. I am looking into this and will update with a workaround.

Thanks

Gareth

Reply

Hello, This isn’t working for me. I’ve created a slider and checked the box to replace featured image with slider–but nothing changes. Using Hestia Pro theme… Any ideas? Thank you!

Reply

Hi Danae

The first thing to check is that you actually have a featured image in your post. Although it won’t display, some themes check to see one exists before trying to add it to the page.

If you do have a featured image, then it might be related to your theme. You are welcome to email me directly on info[at]catapultthemes.com and I’ll take a look.

Gareth

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *