Genesis Tutorials

Add a slider to the Genesis Sample theme home page

The sample Genesis child theme is essentially a blank theme, useful for those who want to build a custom them from the ground up. In this post, I’m going to show you how to add a slider to the home page.

Here’s a screenshot of the home page ‘as is’:

sample start

Let’s dive right in.

1. Register a new sidebar for the slider

Open up functions.php and add this code:

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

Go to Appearance > Widgets and you should see your new widget, called home slider. Be aware that if you put anything in it at this point, it won’t show up anywhere because you need to tell WordPress to display it and where.

2. Create a page template for home.php

Fire up your favourite text editor, insert the code below and call it home.php (credit to Chris Cochrane’s tutorial on custom page templates)
[gist id=5182849]

3. Install a slider plugin

Now we need to add the slider to the widget. Install the Genesis Responsive Slider plugin, then drag it into the widget.

4. Done!

I’ve added a 1600 x 600 featured image to a post for the the slider to display. Here’s the final result:
sample slider


I couldn’t have written this post without this tutorial on customising the Associate theme home page by Carrie Dils.

Leave a Reply

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