Create A Custom Home Slider In Minutes With Genesis Extender

This tutorial walks through the simple process of creating a Custom Home Slider for your Genesis Child Theme using the Genesis Extender Plugin. All that’s required is the Genesis Framework, your favorite Genesis Child Theme, the Genesis Extender Plugin and your favorite WordPress Slider Plugin (we used Nivo Slider, but any solid Slider Plugin will do the trick).

Note: I just realized that in this screencast I typed -website-box-shadow instead of -webkit-box-shadow. I just wanted to make it clear that I’m aware it’s not -website-box-shadow. :)

The steps are simple:

1. In the Extender Custom Options admin panel create a Custom Widget Area, set it up as a [shortcode] and then create a Custom Hook Box to house that shortcode as well as some simple HTML code, wrapping your Widget Area in a couple divs.

2. Use your favorite Custom Slider Plugin to create a Home Slider.

3. Go to Appearance > Widgets and drag a Text Widget into your Home Slider Custom Widget Area and then add your Home Slider [shortcode] into it (or however your particular Slider Plugin requires that you add it to a Widget Area).

4. Activate the Front-end CSS Builder in Extender Custom > Custom CSS and then reload the front-end of your site to reveal your new Home Slider as well as the “Show/Hide CSS Builder” tab.

5. Click that tab to reveal the Front-end CSS Builder and add some Custom CSS to tweak your Home Slider styles to your liking and see the changes in real-time.

6. If you do in fact want this to be a “Home” Slider where the Slider only displays on your homepage then go to Extender Custom > Custom Conditionals and create an “Is Front Page” Conditional which you can then go to Extender Custom > Hook Boxes and assign that Conditional to your Home Slider Custom Widget Area.

The process is simple, Genesis Extender makes it a breeze to setup, and the results can be more than worth the little time invested.

Here are the code snippets used in the screencast:

Comments

  1. Chris says

    Question — when creating widget areas why do the dynamik ones have to be lower case with no spaces while real ones can be nicely capped with spacing? It’s a little thing but just makes it stand out in the admin in a weird way.

    • Eric Hamm says

      Hey Chris,

      That’s a bit of carry over from our original implementation of Custom Widget Areas in the Catalyst Framework. The name you give your Widget Areas end up acting as that Widget Areas IDs, shortcode names, function names, etc.. and so the all lowercase, underscore naming convention made sense.

      We’ll probably refine it a bit in the future so you can use “prettier” names.

      Eric

  2. David Trees says

    OK so… I would haven’t know to use the div parameters as I am still learning.

    This raises two questions for me.

    1. If I had the Dynamik WB would I have still needed to know that?

    2. If I do need to know that … Lol.. Where do I got to learn all this wonderful new stuff.. :)

    Thanks
    D

  3. says

    Hi Eric, thats what I was looking for, but tell can I put nav. bar under this home slider? I need one ower it like you have it and one under the HS.
    p.s: I´m newbie, so if you can be more specific about how to do that.
    Thanks a lot

    Vit

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>