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 <a href=”https://en-ca.wordpress.org/plugins/ml-slider/”>Meta Slider</a> 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_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:
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
<?phpat 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.
This gives you a nice slider that fits into the content and doesn’t stretch outside of it.
Now let’s hook into
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.