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.

Divi workaround

If you’re using Divi, ensure that you are working with a child theme. In your child theme’s functions.php file, duplicate the Divi print_thumbnail function. You’ll find it the epanel folder.

At the end of the duplicated version of the function, you need to add an extra line of code. So the last three lines of your duplicated version of the plugin should look like:

// Super Hero Slider filter
$output = apply_filters( 'shs_filter_divi_thumbnail', $output );
if ($echoout) echo $output;
else return $output;

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.

19 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

Hi Gareth,

Slider is not working on Home page for me either, I’m using Twenty Seventeen Theme.
Please help!

Thanks so much for your help!

Reply

Hi – do you have a link you could post?

Reply

Same issue with me. The slider doesn’t work on the home page when using the Twenty Seventeen theme. What kind of a link would you require? Would be happy to post!

Reply

Yes – I think that the homepage in the Twenty Seventeen theme might not work unfortunately.

Reply

Hey 🙂

I am interested. We are using the Divi Theme. Before I try this out I guess I will anyway just wondering if it works with Divi – I noticed another poster saying they were having issues. My goal is a slider is to display slides in place of featured images in posts or pages, including those on the home page..

Thanks!

Peter

Reply

Hi – I updated the article with a workaround for Divi.

Gareth

Reply

Hi there! This plugins works fine, but here’s the problem: I just need the slider to appear inside the post, but on the home page (where I show every single post), I just need the featured image to appear. How can I do that?

Reply

Hi Gareth,

I am using a costume designed theme for my website. After installing the plugin, i created the slides. The option to replace the featured image with the slider is showing but when i select that option, the slider is not appearing in the page.
Kindly let me know why it is not working, is it due to the custom theme?

Reply

I suggest checking that your theme uses either the_post_thumbnail or get_the_post_thumbnail to display the featured image.

Reply

Leave a Reply

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