Free Tips & Tricks!

Join the others who've found my articles helpful! Get free goodness delivered to your inbox each time I share something new.

p.s. I'd gnaw my arm off before selling your email address.

Add Slider to the Home Page of Minimum Theme

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.

Voila!

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

Comments

  1. Even with dust, Carrie is pumping out content! Thank you for this, I had my eye on doing something very similar to a minimum based project I just happen to be working, its like you read my mind :) Merry Christmas

    As I’m just about to click post, I see its SNOWING LOL

  2. Hi Carrie
    May be just the tut I’m looking for.

    I’ve just bought a new domain name…. genesisthemes.co.uk (with the permission of Studiopress) and I’m wondering what theme to use.

    Site should be live in the New Year and if you see me using Minimum 2.0, with the responsive slider… don’t be surprised.

    BTW weather must be pretty bad your end, it’s even snowing on your website!

    • I like the domain! Will be curious to hear what you’re going to do with it!

      If you go the Minimum route and want any specific tuts, just holler. I’m working on a custom project with it now and am finally getting some exposure to it.

      As for the snow on the site…It’s the only way I could feel wintery. It’s 78 degrees in Fort Worth today! :P

  3. Just a thought Carrie
    As you know I use Minimum 2.0 and I have a top image with a little text – text is part of the image so not really text.
    I hate using graphics for text, not easy to change and the bots can’t read it.

    In the good old html / CSS days I would have positioned a div over the image and added text to the div.
    How would I overlay text in Minimum?

  4. Keith, why don’t you use Thesis for your website? :) )

  5. Michael Wright says:

    Carrie,

    Excellent post. I did give it a try but the width of the Genesis Responsive Slider is 1160 due to the home featured wrap.

    Thanks

    Mike

  6. Hi Carrie, this is AnitaC from the SP forum. I wanted to know if your instruction could be tweaked so that the featured image is not removed, but the new widget area is overlaid on top of the image. I am have been trying to have a widget area that I can change the content periodically. I got it to work somewhat, but the widget is below the image. I cannot figure out how to bring it up over the image. I am wanting to replace my primary site from Agency to Minimum. Thanks in advance.

    • Hey Anita, I’ve had another request for a similar tutorial, so looks like I need to get writing! As for switching from Minimum to Agency, I’m thinking the principle will be the same. It’ll involve setting a static image for that area via CSS and then using a widget to do your text overlays, kinda like what’s happening in the new Pretty Pictures theme.

  7. Thanks a ton! You made it as simple as possible! this is working like a charm!!

  8. Great tutorial, Carrie – I just recommended it to someone on the StudioPress forum, and they loved it!

  9. Hi,
    I tried this on the Genesis sample child theme, and am not having much luck. After the first section, i can see the widget area appear in Appearances->Widgets. In the section”Add the New Widget Area to the Home Page”, I tried pasting the code that needs editing, and then replacing the line of code that ‘must die’, and also inserting the replacement code, only.
    In short, any idea how i might get this to work with the sample theme?
    Many thanks,
    colkav

    • Hey Colkav,
      The code should work the same, adding in the featured image/slider right after the header elements. Have you added content to your widget area yet? If not, nothing will show…

      Instead of the is_home() conditional, you could try is_front_page() -there’s a subtle difference depending on how you’ve got the sample theme set up. (read this post for more info)

      Carrie

      • Hi Carrie,

        Yes! I changed the conditional to is_front_page() and there it is! Thanks so much for your help, and to Susan @ afford your Passions, for alerting me to your post!

  10. Hi,

    Was so excited to find this tutorial as I am working on a new Minumum 2.0 site.

    Made all the tweaks as suggested above but the slider doesn’t show up at all. I used the Genesis responsive slider plugin, added it to the home slider widget. Nothing.

    Not sure what has gone wrong. Maybe I missed something.

  11. Hi Carrie, Jeff from over yonder in Houston here. Just found your site last week and really enjoy your article content and writing style. Thank you for your contributions.

    Hey, Im really stuck here and I am not one to ever ask for help and this seems so simple. I can not get my slider to full width and height of the images that are 1600 x 550px. http://jeffsdogblog.com

    Followed your article to the tee, even removed all my previous customer functions and CSS and put back to default and then tried again, line by line including the is_front_page(), tried the .flexslider css in both the plugin style.css and theme style.css.

    I literally have like 6-7 hrs in this little slider function project, thank you in advance to you or anyone else that can help me. Im going to go jump off a bridge now. :) just kiddin Jeff

    • Hey Jeff, thanks for stopping by! Did you get it fixed between this comment and now? Just took a look and it looks at the right dimensions…Only thing I can see was it wasn’t centered when you go bigger than the photo size. You can fix that by adding this a little “margin: 0 auto;” to your soliloquy-container div (same one you’ve got set for max-height: 550px; max-width: 1800px;)

      Love the site subject matter, BTW. Got a couple of rescue dogs under my feet as I type. :)

      • Apologies for delay in response… the day job thing that pays the bills had me busy :)

        The Dog Blog is fixed! Here is the process for how I got a slider (centered) and only on the home page of my Minimum theme for jeffsdogblog.com:

        I used the Welcome Text code to create the widget from BG’s site for the 100% width: http://www.briangardner.com/welcome-text-widget. But I modified the functions.php code so it would ONLY display on the home page.

        I replaced this code:

        /** Add the welcome text section */
        add_action( ‘genesis_before_content_sidebar_wrap’, ‘custom_welcome_text’ );
        function custom_welcome_text() {
        genesis_widget_area( ‘welcome-text’, array(
        ‘before’ => ”,
        ) );
        }

        With this code:

        /** Add the welcome text section */
        add_action( ‘genesis_after_header’, ‘custom_welcome_text’ );
        function custom_welcome_text() {
        if ( is_home() )
        genesis_widget_area( ‘welcome-text’, array(
        ‘before’ => ”,
        ) );
        }

        Added this code into the functions.php file to get the image size I wanted in slider under “Add new image sizes” (not sure if this was neccessary but it worked):

        add_image_size( ‘home-featured’, 1800, 550, TRUE );

        To center the slider on home page used this code at the bottom of my themes css file:

        .soliloquy-container {
        margin: 0 auto !important;
        }

        Im still a rookie so Im guessing when trying to center the slider previously I was missing the “!important”.

        Thank you Carrie for your help and awesome website!

  12. I am trying to change the size of the Genesis Responsive Slider I just added slider so my images fit in the gray Minimum theme frame. Images are veering to the left as Michael has mentioned etc. and although I managed everything in terms of adding the slider can you tell me where I go exactly to tweak the slider size and the code I use. Thanks!

    • Hi Jenny, I used Firebug to look at your site. Find .flexslider in your stylesheet (around line 82) and change “margin: 0″ to “margin: 0 auto”. That will center your slider content within the area.

      As far as sizing, I think the width for that slider area is 1140 and your slider image is only 920 wide. Set your slider and photos to the larger dimension and it should fill the area.

  13. Hey Carrie,
    Great tutorial. Really helpful!!

    I had it working, then installed
    Genesis Minimum Images Extended
    http://wordpress.org/extend/plugins/genesis-minimum-images-extended/

    to vary the slides / banner images from thumbnails.

    Then the front slide stopped working and it gave me the 1600×600 gray sample (which I swapped for now).
    http://puntamitavacationrentals.com/

    The posts look great
    http://puntamitavacationrentals.com/villaelbanco6/

    but the slider only works on page 2 of the home archives
    http://puntamitavacationrentals.com/page/2/

    Any ideas? :)

    • Hey Miguel,
      I hadn’t had a chance to play with GMIE (though it looks awesome!). No ideas off the top of my head, but you’ve made me curious. I’ll give a shout if I find something interesting!

      Carrie

  14. Hi Carrie,

    Glad I found you and your site when searching for some help with the Genesis Responsive Slider on the Minimum theme. I a real ‘novice’ just beginning with Genesis and definitely not a coder, so here goes with my configuration situation (not being able to get the slider to show on the static page).

    I have a site I am working on for a charity event here: http://stpetersoysterroast.com
    I have a static page set for the front page and using the page, (The Festival) as the static page.

    Is it possible to have the slider function when a static page is set as the front (home) page?

    Thanks in advance for your help.

    Paul

    • Hey Paul,
      Great question! Change the line in the code that says if ( is_home() ) to be

      if ( is_home() || is_front_page() )

      I *think* that should do the trick in your case. If I might make an (unsolicited) suggestion…If you’re going to use “The Festival” as your front page, consider removing it as a menu option (since clicking “Home” will land a person there). If they click on the “The Festival” and don’t see anything new load, it might be confusing.

      BTW – Microbrews and a 5K? Wish I could come!

      Carrie

  15. I tried this but could not get it to work. Thanks so much for taking the time to post about this! I saved the next text to the php file and uploaded but nothing is showing up… I made the changes in Text Edit and then saved it then uploaded via FTP to my server.. and nothing.. hmmm.. any tips would be appreciated! – Robert

  16. I have another question for you. I have been trying to set my own or “custom” picture as the main image across the front page of my site. I just downloaded Minimum today. I can not make the theme recognize my picture upload. I have done everything that I am supposed to do. I named my picture “sample.jpg” and uploaded it to the correct folder on my server via FTP (i uploaded the image exactly where the previous “sample.jpg” existed)….

    i have repeated this over and over… the only thing that shows up is the gray colored rectangle that says “SAMPLE IMAGE 1600 x 600″ … so no image of my own will show up on the front page of my site…. it has been driving me mad! I contacted support at studiopress and they have been vague and not very helpful… any tips are appreciated! This website is for a client so I need to resolve this by this weekend!!

    • If you FTP’ed your file named sample.jpg to the same location, you should have overwritten the existing sample.jpg (If you didn’t see a file named sample.jpg in your upload directory, then you weren’t in the right spot…). So, assuming you were in the right spot and your image isn’t showing up, you’ve got a caching issue and need to empty your cache.

      BTW – the StudioPress community forums are run by volunteers. If you have a support issue that’s not being resolved, use the one on one support request via http://my.studiopress.com > Get Help.

  17. Hi Carrie, Great tutorial. I applied a Genesis Responsive Slider to the free Copyblogger theme, and it works except it added two square bullet points to the bottom right corner, and I can’t figure out where they came from. Any ideas on how I can get rid of them?

    I’ve tried going with no css in the theme style sheet, and also tried putting some css in that style sheet and leaving the plugin style sheet along, but they still appear.

    • Aha! Find this in your CSS:

      .widget-area ul li

      Change the list-stye-type to “none” and that should do the trick. Do you use Firebug for Firefox (or Chrome)? It’s brilliant for figuring out little CSS tweaks.

  18. Mike Metcalfe says:

    Hi Carrie

    Great help here, just have ‘rookie struggles’ on this step…

    When I replace;

    echo ”;

    With this:

    echo ”;
    genesis_widget_area( ‘home-slider’, array( ‘before’ => ”, ) );
    echo ”;

    I get a parse error every time and have to reload functions.php.

    Any ideas? Thanks!

    • Hey Mike,

      Why are you removing the wrapper divs? Keep your code like this:

      echo ‘

  19. Mike Metcalfe says:

    Above meant to say… when i replace:

    echo ”; ‘<img src="'. get_stylesheet_directory_uri() . '/images/sample.j

  20. Does not work on my Genesis 1.8.2 by StudioPress this was the code i use ‘home-slider’,
    ‘name’ => __( ‘Home Slider’, ‘minimum’ ),
    ‘description’ => __( ‘This is the home slider’, ‘minimum’ ),
    ) );

    /** Add the featured image section */
    add_action( ‘genesis_after_header’, ‘minimum_featured_image’ );
    function minimum_featured_image() {
    if ( is_home() ) {
    echo ”;
    genesis_widget_area( ‘home-slider’, array( ‘before’ => ”, ) );
    echo ”;
    }
    elseif ( is_singular( array( ‘post’, ‘page’ ) ) && has_post_thumbnail() ){
    echo ”;
    echo get_the_post_thumbnail($thumbnail->ID, ‘header’);
    echo ”;
    }
    }

  21. Hello,
    This is a great tutorial THANK YOU! I tried the Genesis Responsive slider but it wouldn’t allow me to just add three images for a slider on the homepage that I could tell so I ended up using a relatively new slider called Slideshow which is great so far. But I have lots of empty white space below the slider, any suggestions for removing that so the slider is right above the social icons?
    Thank you!

  22. Hello, I wrote last asking about the white space below the slider but I would like to decrease the white space above the header as well.
    http://ajustdifference.org/
    Thank you!!!!

  23. Thank you so much for putting this together!

  24. Carrie,

    You are awesome :) THank you to you and everyone who has posted here. You have helped me considerably :)

    I am new to the slider and am trying to figure out how to make it look like the Minimum Demo front page. I love the 1600×600 size and the borderless look. I followed you tutorial above and got everything “working” but cant figure out how to size everything…

    Also, what is the best way to resize a large image for a slider (ie. 5760 × 3840) so that is doesn’t get distorted or loose image quality?

    Thanks again!

    http://www.finallyourwedding.com

    • Hey Ryan,

      For the image resizing, you’ll just want to make sure it’s proportional. For example, if you’re original is 5760×3840, you could scale it to 1600×1067. But then obviously the photo is too tall, so you’ll have to crop the height to 600. The demo photo of 1600×600 is stunning, but it’s a pretty extreme aspect ratio and not all pictures can work with that crop.

      For the padding… when you see #genesis-responsive-slider in the CSS, that’s being generated from the plugin’s stylesheet, not your theme’s style.css. Generally it’s a bad idea to edit plugin files, so if you want to change something about it, just add it to your regular theme style.css and it should override the plugin style (if it doesn’t, throw in an !important declaration).

      #genesis-responsive-slider {
      padding: 20px 0 !important;
      }

      Cheers,
      Carrie

      • Thanks Carrie! Good to know not to edit the plugin files. Unfortunately I already did and I did not copy how it was originally. I will put this into practice with future modifications.

        My slider is now aligning itself to the left of the page for some reason. Where/how do I center it?

        Thanks again,

        Ryan

  25. Continued :) When I use the Inspect Element tool with chrome, I can see the padding for “#genesis-responsive-slider {” however I can’t find “#genesis-responsive-slider {” in my CSS anywhere…

    Any thoughts?

    Cheers!
    Ryan

  26. Awesome, awesome tutorial! Normally I would just clip the article and maybe a comment or two, but wow! Like someone else said, I’ve learned a ton from ALL of the comments. I can’t wait to get started putting a slider on my client’s site. She’s not sure if she wants a slider or not but, regardless I can see it doing this to make it a lot easier to change the home page picture out whenever she wants (because raise your hand if your client wants to find sample.jpg in the files ;-) ).

  27. brenners78 says:

    This may very well show my complete stupidity, but where do you upload the homepage image (not replace it with a slider)? Do I need to code it in after uploading it with my FTP? Or is there a place similar to uploading a header image?

    • brenners78 says:

      Also, if I want to resize the height, do I need to resize it in the code, or just upload a skinnier image?

      (I’m not finding a place where it specified height in the code, but then again this is my first time messing with code outside of the idiot friendly world of blogger.)

      • brenners78 says:

        Ok, never mind on the upload thing… reading through your text overlay tute helped me figure it out. Sorry for the bother.

        • Glad you figured it out – always a satisfying feeling! For the resize…While you can control size via CSS, it’s a good idea to crop your image to the right proportions beforehand. :)

  28. Thanks so much for this! Incredibly useful and helpful!
    I’ve still got a bit of tweaking to do but this is what i have got now, using revolution slider (not free, but i think slider will work just as well). thanks again!
    http://www.londonphotographer.co.uk/

  29. Hi, I hope you can help here. I have a site http://hawleyconstruction.com/ . I need the slider to not have so much whitespace to the right of it. Is there any way to remove this? What file do I need to edit? Thanks!

  30. I am trying to get this slider to be full width of the browser . I am also having trouble getting my images to show. I am not sure what portion of the css file or the function.php file to alter.

    • Hi Nick,
      Here’s a Firebug demo that’ll help you with the CSS portion. Your slider *image* isn’t going to be full width of the browser, it’ll be whatever size you specify. If you’re wanting a “backstretch” image that covers the entire background and stretches with the browser, that’s different from the scope of this tutorial.

      As for functions.php, you can add the code at the end of the file, but before you edit anything, make a backup of that file and make sure you have FTP access ready – a wrong move in that file can cause your site to crash. If that happens, just upload your backup copy of functions.php and you’ll be back to good.

      Carrie

      • I just figured since the image that I was replacing from the original theme was full width that I would be able to add a slider with the same feature. The tutorial is very useful thanks you for taking time to respond.

  31. Hey Carrie,

    I have had the Genesis Responsive Slider installed.

    However, when I upload my “Featured Image” on a post, it shows up extremely large on the post itself.

    I even tried posting an image without using the “Featured Post” and the slider doesn’t grab it.

    Any suggestions.

    • If it’s not showing on your slider, check your slider settings and make sure it’s set to show as many posts as you want. You may also check your post and make sure it’s in whatever category you’re using for your slider.

      I think the size of the featured image in the post is coming from a custom image size added in functions.php. You can change the dimensions if you’d like and then run the Regenerate Thumbnails plugin to resize any previously uploaded images to your new image size.

  32. Thank You so much worked perfectly :-)

  33. HI!
    I am working on a website which will soon be at another location for now its at http://www.lemondeangelique.com – I was actually using eleven40 and having so many issues trying to code what you taught in this tutorial – which was so fabulous that I purchased the Minimum theme after much work on the other theme. I did everything u said – and I have the Revolution Slider – welllllll – it wont appear in the slider widget. I had issues before and needed to put in shortcode- so I learned how to add that into the functions php file. so now the text widget will only show up in the footer widget – not in any other widget!!!!!! I hope you might be able to help me – this slider is really special because it allows u to place video and other media inside. I really hope you might have a clue what to do!!!!

    • Hey Ko-Shin,
      I’m not familiar with the Revolution Slider, but in theory I can’t think of a reason why it shouldn’t work. Sounds like there may be weirdness with your widget areas. Do you have any plugins that might possibly conflict? I’d try disabling them ALL and see if that fixes the problem. If so, re-activate one at a time until you find the conflict.

      My other thought is that maybe there’s a syntax error in your text widget (maybe an unclosed tag) that could be throwing things off.

      Sorry I don’t have other ideas!
      Carrie

      • I appreciate your response – the strange thing is I havent changed anything else on this theme – I put the text widget with shortcode into the Custom Footer Widget and it appears! I clearly dont want it there, but its a sign of life! so what does that footer widget have coded in it that it will let this appear, but not in any other widget. I tried deactivating all the plugins but nothing happened. the only reason I am attached to this slider is it has amazing automation of text and integration of video – which not many others have. any thoughts?!!!
        :)
        Ko-Shin

  34. Hey Carrie,

    I have been playing around with this slider for days. I’m losing sleep over it. All the images are floating left on bigger browser screens.

    I’ve tried everything on this forum and nothing is working. I tried the margin auto and that didn’t work either. Please help.

    Here is my link. http://www.slapshare.com

  35. This works great except the excerpt div isn’t positioned properly to the right of my image in the slider box area. Suggestions? Trying to find the specific CSS to edit to make the change. Can’t “show” you anything as it’s all on a locked down dev server at the moment.

  36. Thanks so much Carrie and everyone on these comments. You’ve been an immense help!
    Does anyone know how I can get stop the featured image from showing on pages and posts while, of course, maintaining it in the slider?

  37. Hi Carrie,

    I came across your post when searching to see if anyone had added a slider to the metro theme. I’m presuming that something similar can be done to functions.php in the metro theme as you have done with the minimum theme. Would this be correct?

Trackbacks

  1. [...] couple of readers asked this question after I posted last week about how to add a featured slider to the Minimum Theme. This post will show you one way to go about [...]

  2. [...] The home page consists of a  full width image, which can, with a little work, be replaced with a slider (thank Carrie Dils for the tutorial). [...]

Leave a Reply