Add a Slider to Storefront

This is going to be a step-by-step tutorial on how to add a Slider to the Storefront theme.  In this example I’m using Meta Slider but really you can use any slider of choice!  Why Meta Slider? It’s free and it works.

Step 1.  Find the Hook!

Storefront has a ton of built-in Hooks.  If you’re not sure what a Hook is, you can take a read through What is: Hooks from WPBeginner.  Simply put, Hooks are places built-in to WordPress itself, themes, and plugins where you can “hook” into, or add code to.  Storefront offers us two nice

Storefront offers us two nice hook-able areas just below the header where we can hook into for adding a slider.

If you’re curious and want to find what hooks your site has available, take a look at this nifty plugin:  Simply Show Hooks.  It does exactly what you’d expect, it shows what hooks are used, and where!  Here’s what it looks like for Storefront:

The two hooks we’ll use today are storefront_before_content and storefront_content_top.  The main difference is that storefront_before_content loads before the content and isn’t inside of the content wrap, and storefront_content_top loads inside the content so it has a set width.

Step 2. Install Meta Slider or a slider of your choice, add slides

You can do this from Plugins > Add New, and search for Meta Slider.  From there Install and Activate it!

Next, go add some Slides and save the Slider.  Here’s what mine looks like:

I’ve got my Slider width set to 1200 pixels, and a height of 500 pixels.  I’ve also got “Stretch set to 100% wide output” checked off because I always want it to FILL the space I put it into.

Meta Slider also gives me this handy usage section which we’ll use later.

Step 3.  Add the Slider to Storefont!

Now let’s write some code to hook this slider into Storefront.  We’ll write a function that adds the Slider, and then we’ll hook that function into the right place.

You can add this code to your Child Themes functions.php or use something like Theme Customizations and add it to plugins/theme-customisations/custom/functions.php.  The main point is you don’t want to be editing your actual theme files because they get overwritten when you run updates.

First, let’s add it to storefront_content_top with this:

	<?php
	add_action( 'storefront_content_top', 'marce_custom_slider_storefront' );
	function marce_custom_slider_storefront() {
	if ( is_front_page() ) {
	echo do_shortcode("[metaslider id=586]");
	}
	else {}
	}

view raw storefront-slider1.php hosted with ❤ by GitHub

You’ll notice I’m using the is_front_page() conditional statement to make sure the slider only shows on my site’s FRONT page and nowhere else.

Note: You only need to add <?php at the top of the PHP document.  If it’s already there, you don’t need to add it again.  Adding multiple PHP opening tags will cause problems.  Thank you for taking the time to read my very important notes.

Result:

This gives you a nice slider that fits into the content and doesn’t stretch outside of it.

Now let’s hook into storefront_before_content :

	<?php
	add_action( 'storefront_before_content', 'marce_custom_slider_storefront' );
	function marce_custom_slider_storefront() {
	if ( is_front_page() ) {
	echo do_shortcode("[metaslider id=586]");
	}
	else {}
	}

view raw storefront-slider2.php hosted with ❤ by GitHub

Result:

With this second approach, we get a full-width slider that goes as far as your screen!  Keep in mind you need to have high-res images for this to look nice 😉

Bonus Round: Add it with a Widget

Ok, I saved the easiest one for last!  Storefront also has a Sidebar location called “Below Header” that adds content to the same place that storefront_content_top does.  You can just add the Meta Slider widget to that Sidebar and it will show up there.

If you want that widget to ONLY show up on the Front Page, Jetpack has a great feature called Widget Visibility that will let you do this:

That’s it!  Enjoy your new Slider and slide away!  Remember to not have too many slides, because most people will lose interest after about 2.