minimum theme slider

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.

Minimum Theme Home Slider Widget

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.


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

157 thoughts on “Add Slider to the Home Page of Minimum Theme”

  1. Hi Carrie,
    Thanks for the tutorial. I’d like to add a video to the Genesis Responsive Slider to replace the static image. How do I go about this?

  2. Excellent tutorial, this worked perfectly and is displaying as expected. However, I’ve recently gotten a request to place the slider UNDER the primary nav, rather than directly below the header. Any suggestions on how I would accomplish that?

    1. Hey Ashley,
      If you’re using Minimum Pro, you see this line somewhere in functions.php

      add_action( 'genesis_after_header', 'genesis_do_nav', 15 );

      Only pointing that out so that you can see the nav is hooked into genesis_after_header with a priority of 15. If you want the slider to come in below the nav, you’ll use the same hook but a later/higher priority, like this:

      add_action( 'genesis_after_header', 'minimum_featured_image', 20 );


  3. Hello! I’m trying to center the image shown in the Genesis Responsive Slider and can’t find that piece of CSS for the life of me! I’ve tried about 5 different things with no luck.

    If you can help me out that would be great. I really don’t like how the images with short aspect ratio are left aligned.

  4. Hi Carrie! Thanks so much for the tutorial! I was able to install and customize the slider for the metro pro theme, but I’m running into a few issues.
    First, when I have the slider active, the footer gets all messed up. If I disable the responsive slider from the slider widget, or remove the new slider section of the front-page.php, the footer is fine, but when the slider is active, the footer gets all funky. I’m not sure if I copied a code wrong or deleted part of it by accident, but nothing I do is helping.
    Also, on one of the slides, the page jumps a bit, and everything moves up just a smidge, then moves back down for the next slide. I’ve uploaded all of the featured images the exact same size, so i don’t know why thats happening. Any help would be appreciated. Thanks!

  5. Great explanation and I appreciate all the comments as well. I modified the above to my own child theme but your descriptions are very clear so had no trouble. You saved me tons of time and it works! Thank you Carrie ~

Leave a Comment

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

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.