Add A Full Width Slider To WooThemes StoreFront Homepage

Following up from my post regarding WooThemes StoreFront theme I thought it would be good to give an example if how you can add content to the StoreFront homepage, specifically a full-width slider under the header area.

This tutorial will demonstrate how to add a full-width slider to the StoreFront homepage using WooSlider from WooThemes, the same process will apply to any slider though.

It’s worth noting that this is not a tutorial for WooSlider itself however and you should reference the official WooSlider plugin documentation for that information.

What Will This Tutorial Achieve

After completing this tutorial, you will have a full-width slider displaying on your StoreFront themes homepage under the header and above any other content on the Homepage Template

What Will I Need To Complete This Tutorial

• A copy of WooThemes free StoreFront theme installed ( StoreFront Theme )
• A copy of WooThemes WooSlider plugin ( Get WooSlider )
• A copy of our free blank StoreFront child theme ( Download StoreFront Child Theme )
• A good text editor like SublimeText ( Download Sublime Text )
• Preferably a local install of WordPress using MAMP, WAMP, Vagrant etc
• A helping of your favorite beverage close at hand.

Getting Started

We will assume you all the required software installed and operational before starting the tutorial and have created a few slides in WooSlider along with adding them to a Slide Group titled Homepage.

Official Documentation: WooSlider Documentation Creating Slides

Your created slides should look like this below, remember to add your slide images as Featured Images in each slide and not to the content editor where text should be placed.

Creating A WooSlider ShortCode

We are going to be using the WooSlider shortcode to insert the slider on the homepage of Storefront using a PHP function, below is the shortcode I will be using. You can create your own shortcode from the add media button on any post or page and use your own generated shortcode instead.

[wooslider slide_page="homepage" slider_type="slides" layout="text-bottom" overlay="full" thumbnails="default" display_title="true" imageslide="true" order="DESC" order_by="date"]

Creating The PHP Function

StoreFront has many actions and filters within the theme and we are going to be using an action titled storefront_before_content to insert our slider and which is located within the themes header.php template file.

The full php snippet we are going to use to display the slider and limit it to also only display on the Homepage Page Template is this below.

This PHP should be added to your Child Themes functions.php file.

/**
 * Adds wooslider into the storefront_before_content action in the parent themes header.php file.
 */
function wpshock_storefront_homepage_slider() {

	// if not the StoreFront Homepage Page Template return false
	if ( ! is_page_template( 'template-homepage.php' ) ) {

		return false;

	}

	// Output the WooSlider Shortcode via the do_shortcode() function.
	echo do_shortcode( '[wooslider slide_page="homepage" slider_type="slides" layout="text-bottom" overlay="full" thumbnails="default" display_title="true" imageslide="true" order="DESC" order_by="date"]' );

}
add_action( 'storefront_before_content', 'wpshock_storefront_homepage_slider', 5 );

If added correctly the slider will be displaying full width on the homepage page template of your StoreFront install.

Tweaking Some CSS In WooSlider

By default though WooSlider has some padding and a border around the slider which does not work well for full-width so let’s remove that with some CSS to complete the full width look.

The CSS below should be added to your Child Themes style.css file.

 .page-template-template-homepage .wooslider {
 	border: none;
 	box-shadow: none;
 	margin: 0;
 	padding: 0;
 }

.page-template-template-homepage .wooslider .slide-content {
 	margin: 0;
 	padding: 0;
 }

The final result will look like this screenshot below, it may change slightly depending on what size images you use and the exact parameters you select when creating your own custom WooSlider shortcode.

This should work for most other sliders too by replacing the WooSlider shortcode with that from another slider.

The CSS would be the only thing that you may need to tweak depending on which WordPress slider plugin you are using, but the PHP function should always insert any content added to it to be full width and for it only to display on the Homepage Template.