Add Slider to the Home Page of Minimum Theme

The code mentioned in this tutorial for functions.php is for the original Minimum theme released in Fall 2012, not the Minimum Pro theme released in Summer 2013. Lots of great comments and tips in the comments – give them a read, too. :)

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!

Ready to try another cool Genesis customization?

If you’re using a site title (text, not a logo), you’ll dig this tutorial on adding a custom style to your site title.

7 day free trial

Comments

  1. says

    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

    • says

      Always a pleasure to get a visit from Big Bobby B himself! (or little Bobby B as your crazy workouts continue…).

      Glad the post was timely! Come back if you need help…

      • rconnery says

        Hey Carrie….I have found all the places to place these but really don’t want to screw this up. I’m more of a beginner here. Anything I should take into account here? If you say it’s not wise as a beginner, I won’t do it.

  2. says

    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!

    • says

      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. says

    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. 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

  5. AnitaC says

    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.

    • says

      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.

  6. says

    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

    • says

      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

      • says

        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!

  7. says

    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.

    • says

      Hi May,
      Can you post a link to your site? Also, try changing is_home() to is_front_page and see if that does the trick for you.

      Cheers,
      Carrie

  8. says

    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

    • says

      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. :)

      • says

        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!

          • says

            Hi Amit — I have the same question about adding the featured image or thumbnail to the homepage experts. Did you find a solution? I’d love to know how to do that.

          • says

            On the home page/front page template, look for the grid loop code, then look for

            'grid_image_size' => 0,

            Swap out the 0 to be whatever image size you want (i.e. the thumbnail size):

            'grid_image_size' => 'thumbnail',

  9. says

    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!

    • says

      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.

  10. Miguel says

    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? :)

    • says

      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

    • says

      I had the same problem; I fixed it by editing the output.php file within the GMIE plugin. This is what it reads now (note that you’ll need to put your own Soliloquy ID in place of mine [which is 347]). I’ve bolded what I changed. Everything else remained the same.

      /** Include the featured image */
      function gmie_banner_image() {
      if (is_home()) {echo do_shortcode(‘[soliloquy id="347"]‘);}
      elseif ( is_singular( array( ‘post’, ‘page’ ) ) ) {
      $custom_image_id = genesis_get_custom_field( ‘_gmie_image_id’ );
      $custom_image = wp_get_attachment_image_src( $custom_image_id, ‘full’ );
      $image_alt = get_post_meta($custom_image_id, ‘_wp_attachment_image_alt’, true);
      if ( $custom_image ) {
      echo ”;
      }
      }
      }

      • says

        P.S. This is what the “Include the featured image” section of output.php reads now; it’s not the whole file. I only changed what I bolded.

  11. says

    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

    • says

      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

  12. says

    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

  13. says

    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!!

    • says

      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.

  14. says

    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.

    • says

      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.

  15. 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!

    • says

      Hey Mike,

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

      echo ‘

  16. Mike Metcalfe says

    Above meant to say… when i replace:

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

  17. says

    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 ”;
    }
    }

  18. says

    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!

  19. says

    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

    • says

      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

      • says

        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

  20. says

    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

  21. says

    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 ;-) ).

  22. 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.

        • says

          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. :)

  23. says

    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.

    • says

      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

      • says

        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.

  24. says

    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.

    • says

      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.

      • says

        Thanks for you reply! I think I found it. Look how big this was set to………

        /** Add new image sizes */
        add_image_size( ‘header’, 1600, 9999, TRUE );
        add_image_size( ‘portfolio’, 330, 230, TRUE );

        That is it right?

  25. says

    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!!!!

    • says

      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

      • says

        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

  26. says

    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

  27. says

    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.

  28. says

    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?

  29. says

    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?

  30. says

    Hi Carrie,

    So sorry to bump this thread. However, I have exhausted all of my go to resources, including your site.

    I cannot get the image slider to fill the featured image area. I have tried everything in this post as far as I can tell, as well as countless other resources. Im stumped and would greatly appreciate some help. Thanks! :-)

    http://www.splitgreyphotography.com

    Sorry about the lack of content. I threw up a few images as placeholders. Thanks again!

    • says

      Hi there,

      I cannot get the image slider to fill the featured image area.

      Do you mean vertically? If so, just find #home-featured in your style.css and remove the top and bottom margins.

      If you mean horizontally, that’s two-part change:

      1) In the Genesis Responsive Slider settings – just changed to your desired width/height.
      2) Remove the extra div with the class=wrap from your home featured section as that’s confining it to 1140px.

  31. lisa says

    So frustrating. This tutorial tells you to change the .php when Genesis says to NEVER change that code. The child theme only has a few lines of php code and it does NOT include the code you refer to so I can’t change it if it’s not there. How about some instructions where you don’t change the parent code???? I don’t understand why this is so hard to add a slider. The theme shows it there it should already be there not require an act of god to get it there.

    I managed to get some teeny tiny box to show up but it’s in a sidebar widget which is NOT where it should be. It should be in the center of the page just like the demo. These instructions are for a sidebar slide widget which is WRONG! Errrghhhh!!! This is driving me crazy. I thought Genesis themes were supposed to be EASY to use!!!????????? Can someone point me to some other tutorial that makes sense?

    • says

      Hi Lisa,

      Sorry you’re frustrated.

      This tutorial tells you to change the .php when Genesis says to NEVER change that code.

      StudioPress recommends you never edit the core Genesis Framework files, but your child theme files are fair game.

      This tutorial is for the Minimum Theme. If you open up your functions.php for this theme (located at wp-content/themes/minimum/functions.php), you’ll see the code referenced in the tutorial.

      You’re right that it looks like the genesis_register_sidebar() would refer to a sidebar widget, but in fact it’s a function used to register any new widget area in Genesis, regardless of whether the eventual display is on the sidebar or elsewhere. That bit of code just gets your widget to appear in Appearance > Widgets. Other code is necessary to show the widget where to show up in your theme.

      All said, if you are not comfortable working directly in PHP, I do not recommend taking a DIY approach. There are a lot of Genesis developers available for hire who can help with customizations.

      • lisa says

        I don’t have a problem working with php I was looking at the wrong file, HOWEVER, when I add the first snippet of code you have in this tutorial it causes the entire page to go blank white and when I click on the update button after adding the code in I get a blank white page and can’t do anything else. I went back and deleted your code and now I still can’t click on update or get back to my dashboard or anything! It’s like the code corrupted it or something. I will have to delete the theme and reinstall because it’s now locked up.

        • says

          That’s caused by a syntax error. Sometimes when copy/pasting special characters (quotes are the worst) don’t translate properly. You do not need to re-install your theme files, simply access your functions.php via FTP, fix the syntax error, and re-upload.

          • lisa says

            O.k., I got the code to work finally but NOW the slider is showing on the Blog page and not the home page where I want it. I have static page set to my home page and posts set to blog page so why the slider is showing on the Blog page I have no clue, plus I set the slider to show images from posts and no image is showing at all. The slider container is only about 1/2″ tall with white and no photo. I can’t believe how hard this is, it’s ridiculous.

          • says

            Honestly, if you’re having this much trouble dropping in a slider, you should probably just hire a professional.

  32. John says

    Hi:

    I have installed the code, added the widget and the slider is not displaying on the homepage. I even tried changing the code ( is_home() || is_front_page().

    http://www.johnstrubel.com

    Any thoughts?

    Thanks — John

      • says

        I’m experiencing a similar problem with the ‘Balance’ theme. I have the widget area configured and pulled in my slider. However the ( is_home() & is_front_page() codes are not working…any ideas?

        Thank you so much -You’ve been amazing to answer all of these questions… I feel bad reaching out. This post has obviously been very helpful & much appreciated! :)

        • says

          Hey Britney,

          You’ll want to use the OR operator instead of AND (to check whether you’re on is_home() || is_front_page() ). If you’re checking for both conditions to be true, it never will be. :)

          Cheers,
          Carrie

          • says

            Thanks Carrie, however it’s still not working. I was told to insert the function into my home.php file instead:

            /** Add the Featured Image Section tesst */
            function balance_featured_image() {
            if ( is_home() || is_front_page() ) {
            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 ”;
            }
            }

            I’m sure something is off regards to the ‘Balance’ theme I’m using….just not sure what it could be.

            Thanks so much, you’re a coding angel!
            B

  33. says

    I use the responsive slider to design a test slider show for a client. This is a demo of what I created.
    http://www.scotbirchfield.com/gallery/
    I created a new page template and placed it in the theme folder.
    I have different images in the slider for testing purposes.
    I have it set for 1000px x 400px.
    If anyone wants the codes let me know.
    -Scot

  34. says

    Hi Carrie,

    Thanks for this great guide!

    I have a question. The widget only shows in posts where I set a featured image. I’d like to add it to my homepage only. Do you know how I can do this?

    My theme ‘Chode Chirps” didn’t have anything like “/** Add the featured image section */” in the function.php, so I just copied and pasted the right line of text directly from this article.

    Cheers,
    Tijs

  35. says

    Minimum Child Theme – WordPress – Home Page Edit – Visual – Long rectangular box divided by two vertical lines 2/3 of the way across. Right side is blank with no text. Left side has this inside box… [promoslider category="slider" width="1024px" height="360px"]. However, slider is not covering full width of page. How do I get slider to cover full width? Thank you.

    • says

      Hi John,
      That’s a customization beyond the scope of this tutorial. I’d suggest posting your question in the StudioPress forums.

      Thanks,
      Carrie

  36. says

    Hello,
    Wonderful tutorial! But I was wondering, how can I place the 1600×600 Sample Image? Where do I upload it?

    • says

      You’ll either need FTP access to drop it in your theme’s images folder, or you can upload it via your media uploaded and then change the URL reference to the image in your functions.php. Be CAREFUL if you mess with functions.php and prepare to FTP just in case. :)

  37. Michelle Fuchs says

    Hi Carrie,

    I know this is not the right comment/post, I am very curious how to change the default post because the default is a blog post excerpt right? The theme is Minimum do you add any codes to change it or change to text widget? I hope you answer my question because I’m dying to know about it I am really lost on what to change or add in that part.

    I hope you can help me, it’s ok if you ignore atleast I tried.

    Thanks

    • says

      Hi Michelle,
      Are you talking about the home page? If you want to change that from showing recent posts, you could add a new widget area (or however many) via functions.php and then display those widgets on home.php.

      Cheers,
      Carrie

  38. says

    Hi,
    I’ve managed to get this working after using your tutorial but I can’t work out how to center the image if the right aspect ratio isn’t available.
    I’m using 615 x 410 as the image size (and this is added to functions.php) but sometimes the contributors might upload an image 300 x 300 as an example and I’d like this to appear in the center of the slider div.
    Any ideas?
    Thanks in advance,

    Tom

    • says

      Hey Tom,
      Here are some general tricks to try with centering in CSS. For starters, you need to be working with a block-level element, so if you’re in a DIV tag you’re already there, otherwise declare:

      display: block;

      Assuming that, I’d try:

      width: 100%;
      margin: 0 auto;
      text-align: center;
      float: none;

      You won’t need ALL of those, but depending what your element is in relation to on the page, one of those should get you there. Feel free to post a link if those don’t work. :)

      Carrie

  39. says

    This was incredibly helpful, Carrie. I picked this theme based on the posts that you have published on this blog. I used this info to install Slide Deck 2 on the home page and after making a small modification to the main div, it was perfect. Again, thanks for posting this one. It was super helpful.

    • says

      Thanks for letting me know! I haven’t worked with Slide Deck, so good to know it was easy enough to work in. Enjoy your tasty, tasty theme. :)

  40. jamie says

    This tutorial is awesome! Thanks Carrie. Everything worked out fine for me except for one hang-up. It appears to me that the Home Featured area where I have my slider (as per Carrie’s instructions) and it’s also where the social icons are. So, when I change the padding in the css of the Home Featured slider area, It also removes the padding for the social icons area below the tagline. The best solution I’ve come up with is to go ahead and remove padding for both and add tags in my text widget area to put the padding back into the social icons Home Featured area. (did that make sense??). Do you think this is a good solution? Or, do you think I might run into problems with some browsers not figuring that out? I’m working on it through a changed namehost so if I gave the URL, nobody would see it… which is too bad. I’d LOVE to hear some thoughts on this. Thanks again to everyone for all of this insight!

  41. says

    Hi Carrie….Great Tutorial! It´s really really helpfull for beginners as me.

    I use a “Minimum Theme” and the “Genesis Responsive Slider Plugin” ( I took that choise after I read your post).

    My slider is responsive only for images, but not for title and text (box), and I would like to include in the slider both. I have like 2 days with this, and can´t fix it. Any suggestions to fix this?.

    I´ve tried everything on this forum as well as countless other resources and nothing is working ( I´m a “ccs” beginner too). I would greatly appreciate some help.

    Here is my link:
    http://deviajesyotrosasuntos.com

    Kind Regards from Malaga
    Juan Luis

  42. BD says

    I’m wondering how to adapt this tutorial/code to the newly released Minimum Pro and particulary how to add a widget area in its functions.php file. A possible example of slideshow replacing the homepage image on Minimum Pro is here: http://themes.imageperceptions.com/mpro4/.

    Thank you in advance for any suggestion/directions.

    BD

  43. akismet-70a22550ae10e4bdba94e5c96ca6d1e8 says

    Carrie:
    Minimum Pro (no longer?) has the code you reference in Functions.php.
    Everything else goes fine (registering Widget area)
    However ADDING your code (with modification) to Functions.php does not put up the Slider into the Widget area…
    or something else is awry / changed.

    • akismet-70a22550ae10e4bdba94e5c96ca6d1e8 says

      Carrie: I spoke too soon: I’ve Got it working! Hooray!
      I read in the code is_Home() on the codex, determined that I probably needed to set Settings > Reading to “Front page displays : Your Latest Posts. (Thereby satisfying the is_home(). Combine my two replies if you think this may help any other newbies !
      Thanks for your post, now I just need to modify is_Home() to be is_ThePageIReallyWantTheSliderToBeOn (). Wish me luck!

      Sef.

  44. says

    Carrie thanks for the great idea! I used your original code to update my Genesis Metro theme blog. When I upgraded to Metro Pro, it no longer worked as you state in your updated post. However, I found another simpler way that create full width slider using Genesis plugins rather than modifying php files. It works great. Your readers can find it here. I have a step by step video tutorial there too for visual learners. http://www.churchwp.net/how-to-add-a-full-width-slider-to-genesis-metro-theme/ Everyone has their own preferred method so I linked to your site and a few others methods I found after I created the post as well. Hope they help anyone who may be nervous about changing up php code! Love the site!

  45. says

    Hi Carrie,
    I’ve looked everywhere in the functions.php of the minimum theme and I can’t this line
    echo ‘<img src="'. get_stylesheet_directory_uri() that you said to replace. I also can't get the featured images to pop up on my home page in the excerpts either, which is why I was searching for an alternative like in you tutorial. Any ideas?

  46. drewwaters says

    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?

  47. says

    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?

    • says

      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 );

      Cheers,
      Carrie

  48. says

    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.

    http://badfishrollerderby.com/

    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.

Trackbacks

  1. [...] 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). [...]