Sridhar Katakam

Genesis and WordPress Tutorials

How to add a slider in Minimum Pro’s front page

by Leave a Comment

This tutorial provides the steps to replace Backstretch Image in Minimum Pro‘s homepage with a full-width Soliloquy (commercial version) slider.

Live Demo

Step 1

Install and activate Soliloquy.

Create a slider to appear on the homepage and select/upload your desired images.

In the Config tab, set Full Width and specify image dimensions as 1600 x 512.

We are going to set width: 100% on the slide images so they stretch to fill the available viewport width on larger screens. As such, 1600px is a good width for the images.

Height is up to you and depends on how tall you want the slider to appear.

Step 2

Register a custom “Home Slider” widget area.

Add the following at the end of Minimum Pro’s functions.php:

genesis_register_sidebar( array(
    'id'          => 'home-slider',
    'name'        => __( 'Home Slider', 'minimum' ),
    'description' => __( 'This is the home slider section.', 'minimum' ),
) );

Step 3

Edit Minimum Pro’s front-page.php.

a) Remove the code that loads Backstretch jQuery script.

Delete:

add_action( 'wp_enqueue_scripts', 'minimum_front_page_enqueue_scripts' );
function minimum_front_page_enqueue_scripts() {

    $image = get_option( 'minimum-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );

    //* Load scripts only if custom backstretch image is being used
    if ( ! empty( $image ) ) {

        //* Enqueue Backstretch scripts
        wp_enqueue_script( 'minimum-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
        wp_enqueue_script( 'minimum-backstretch-set', get_bloginfo( 'stylesheet_directory' ).'/js/backstretch-set.js' , array( 'jquery', 'minimum-backstretch' ), '1.0.0' );

        wp_localize_script( 'minimum-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );

        //* Add custom body class
        add_filter( 'body_class', 'minimum_add_body_class' );

    }

}

You could alternately just comment out the add_action line like so:

// add_action( 'wp_enqueue_scripts', 'minimum_front_page_enqueue_scripts' );

b) Near the end of the file,

just above

//* Run the Genesis loop
genesis();

add

add_action( 'genesis_after_header', 'add_slider', 7 );
/**
 * Add Home Slider widget area below header.
 */
function add_slider() {
    genesis_widget_area( 'home-slider', array(
        'before'    => '<div class="home-slider widget-area">',
        'after'     => '</div>',
    ) );
}

Step 4

Add the following in Minimum Pro’s style.css above the media queries section:

.home .site-tagline {
    margin-top: 0;
}

@media only screen and (min-width: 1024px) {

    .home-slider {
        margin-top: 60px;
    }

}

.home-slider .soliloquy-container {
    margin-bottom: 0 !important;
}

.home-slider .soliloquy-container .soliloquy-image {
    width: 100%;
}

.soliloquy-container .soliloquy-prev:hover,
.soliloquy-container .soliloquy-next:hover {
    border-bottom: none;
}

Step 5

At Appearance > Widgets, drag a Soliloquy widget into the Home Slider widget area.

>