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.

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.

Leave a Reply

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