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:
Follow & Share:
