Adding Responsive Slider on Home Page – Whitespace PRO Theme

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.

slider-settings-whitespace

Step 2: Creating a new Widget Area “Home – Slider”. Add the following code in your functions.php file:

//* 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

343333

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

//* 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

//* 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.

slider-whitespace-pro

NOTE: You will adjust the CSS based on your site design.

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

7 Discussion to This Post

    • 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

          .home .widgettitle{
          display:none;
          }
          
        • 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.

Leave A Reply

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