Genesis Tutorials

How to add a full-width slider to the Genesis Associate theme

OK then folks, let’s get to it!

We’re going to be customising the Associate theme today. Here’s a link (aff) to the demo, so you can see what we’re working with.

Here’s a screenshot of what we’re going to be doing, ie replacing the measly 870 px slider with a mahoosive 1440 px one. Why, you ask? Because bigger IS better! No matter what she says…

associate slider

Moving on now to the all-important steps:

1. Register a new widget.

a) Open up your functions.php and add this code:

/** Zee code for zee new, that's brand spanking, widget */
genesis_register_sidebar( array(
'id'			=> 'home-slider',
'name'			=> __( 'Home Slider', 'associate child theme' ),
'description'	=> __( 'Zee home slider widget.', 'associate child theme' ),
) );

2. Done that? Marvellous! Hmmm, maybe we should have done this step first, but it doesn’t really matter – we’re going to do it now. Install the Genesis Slider plugin. Go to settings and set the width to 1440 x 400.

3. Visit your home.php and insert the following codey wodey:
[gist id=5201378]

4. Make sure your slider settings are setup such that your slider will display the images you want it to.

5. If we did nothing else, our primary and secondary nav bars would appear BELOW the slider. Not a great look. So, we need to command WordPress to call them BEFORE the slider (note: this is a bit of a hacky way of doing things; feel free to berate me in the comments). Add these slabs of kode (spelling things with a ‘k’ is cool) to your home.php:

/** Reposition the primary navigation menu */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_after_header', 'genesis_do_nav', 7 );

/** Reposition the secondary navigation menu */
remove_action( 'genesis_after_header', 'genesis_do_subnav' );
add_action( 'genesis_after_header', 'genesis_do_subnav', 7 );

6. OK, we’re getting there! All we need to do now is style this mother up. We’re going to centre it and something else…Oh yes, give it a width so that we can centre it. Let’s hop over to our style.css and slam dunk this:

.home-slider {
    margin: 0 auto;
    width: 1440px;

7. That’s it, we’re done! Faaantastic!

  1. Steve Schwartz

    I was the one who originally asked about this. I’m not sure what I like better, your sense of humor, or the fact that your straight up, easy to understand directions worked without a hitch on the very first go. You are fantastic, my friend – thank you!

  2. Katie

    Would this tutorial work with the Metro theme as well? Seems like all the home widgets in Metro are attached to where you put your blog feed. I have my blog feed at /blog, so having a hard time getting my slider into the home/front page.


Leave a Reply

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