Original Request:
Is it possible to add a slider to the Whitspace theme homepage? Maybe where the stretch image is? I tried just placing the Genesis responsive slider widget in the Welcome widget area but that didn’t work. – RoxG
I did following steps:
Step 1: First install the Genesis Responsive Slider Plugin on your site. A new link “Slider Settings” will add under “Genesis” menu at left side. Navigate to Genesis -> Slider Settings and configure the settings for your slider.
Step 2: Creating a new Widget Area “Home – Slider”. Add the following code in your functions.php file:
|
1 2 3 4 5 6 |
//* Register home slider widget area genesis_register_sidebar( array( 'id' => 'home-slider', 'name' => __( 'Home - Slider', 'whitespace' ), 'description' => __( 'This is the slider section for Home Page.', 'whitespace' ), ) ); |
Now navigate Appearance > Widgets and drag&drop “Genesis Responsive Slider” widget at “Home-Slider” widget area. See the screenshot.
Step 3: Modifying the front-page.php file and adding the “Home – Slider” widget area at right place for home page. I am adding this new widget area below the “Welcome Text” Widget area. Replace the current code
|
1 2 3 4 5 6 7 8 9 10 |
//* Hook welcome widget area after site header add_action( 'genesis_after_header', 'whitespace_welcome_widget_area' ); function whitespace_welcome_widget_area() { genesis_widget_area( 'welcome', array( 'before' => '<div class="welcome">', 'after' => '</div>', ) ); } |
By
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//* Hook welcome & slider widget area after site header add_action( 'genesis_after_header', 'whitespace_welcome_widget_area' ); function whitespace_welcome_widget_area() { genesis_widget_area( 'welcome', array( 'before' => '<div class="welcome">', 'after' => '</div>', ) ); // Home Slider Widget area after welcome widget area genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider" id="home-slider">', 'after' => '</div>', ) ); } |
Output: Now refresh the home page and you’ll get following output.
Thank you for this tutorial that I have implemented, in conjunction with a Nextgen slideshow, on a client site at http://www.suedevannyartist.com.au
If you have any tips on how to remove the white space between the header and the slideshow, I would appreciate it.
Thank you for your comment. Remove the widget title “Slideshow” and your problem will be solved.
Thanks. It looks like the Nextgen slideshow widget automatically includes the title even if you leave it blank:
Slideshow
I’ll head over to Nextgen to see if I can figure out how to remove this.
You add following css in your style.css file
[code]
.home .widgettitle{
display:none;
}
]
Ah – that is a more elegant solution as it only impacts the home page. Thanks again for your clear tutorial and your extra assistance.
Glad to help you.
Welcome to anytime.
Thanks. I worked it out. Added this code to ngg stylesheet:
.widget_slideshow h4 {
display:none;
}
Note (to others), this will affect all slideshows across your site.