Add Slider to the Home Page of Minimum Theme

UPDATE: The Minimum Theme is no longer available from StudioPress. If you’re a fan of this theme, I suggest looking at the Minimum Pro Theme. It’s mobile-responsive and is optimized for the Gutenberg WordPress editor.

Earlier this fall StudioPress released the much-anticipated Minimum Theme to throngs (THRONGS!) of excited Genesis Framework users. It’s been a top-selling theme since its release – and with good reason; It’s stunning in its simplicity and is a great foundation for a personal or portfolio website.

I recently had a reader ask how you could substitute a slider on the homepage instead of a static featured image. I’ll post the solution here in case you’d like to try it yourself.

Create a New Widget Area

The featured image used in the Minimum Theme demo is hard-coded into funtions.php. We’re going to change this by creating a new widget area for our home page slider.

To register a new widget area, drop the following into your functions.php (or whatever location is your preference for adding custom code to your theme).

/** Register widget area */
genesis_register_sidebar( array(
	'id'	=> 'home-slider',
	'name'	=> __( 'Home Slider', 'minimum' ),
	'description'	=> __( 'This is the home slider', 'minimum' ),
) );

After adding this code to your theme and saving it, you can go to Appearance > Widgets and see your new widget area. You can drop widgets in there and add content all you like, but it won’t show up on your home page until we tell it to do so.

Add the New Widget Area to the Home Page

Around line 66 of functions.php, you’ll see the following code:

/** Add the featured image section */
add_action( 'genesis_after_header', 'minimum_featured_image' );
function minimum_featured_image() {
	if ( is_home() ) {
		echo '<div id="featured-image"><img src="'. get_stylesheet_directory_uri() . '/images/sample.jpg" /></div>';
	}
	elseif ( is_singular( array( 'post', 'page' ) ) && has_post_thumbnail() ){
		echo '<div id="featured-image">';
		echo get_the_post_thumbnail($thumbnail->ID, 'header');
		echo '</div>';
	}
}

That’s the code that conditionally outputs the sample image if we’re on the home page (and just posts a featured image on other single pages).

We want to remove the line of code that prints sample.jpg and replace it with code that displays our new widget area.

/** This line of code must die **/
echo '<div id="featured-image"><img src="'. get_stylesheet_directory_uri() . '/images/sample.jpg" /></div>';

In it’s place goes this code:

echo '<div id="home-featured"><div class="wrap">';
genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', ) ); 
echo '</div></div>';

You’ll notice there are a couple of divs added in there that will allow us to custom style the new block of the home page. You don’t have to add any CSS, but you can if you need to.

Configure Slider and Add it to your New Widget Area

The last step is the simplest. Download the slider of your choice (if you’re at a loss, I suggest starting with the Genesis Responsive Slider), configure it, and go to Appearances > Widgets to drop it into your new Home Slider widget area.

Voila!

Try it out. If you run into problems or would like to discuss more, just leave a comment!