Adding Fullwidth Flexslider on Home page in Minimum PRO Theme

slider-in-minimumpro

After long gap another new tips is published today.

Currently lot of users are using the Genesis Responsive Slider or Soliloquy Slider in Genesis Child Theme. But I am going with free version slider. Flexslider is a free slider which is coming from WooThemes. Minimum PRO Theme have no slider option for home page. So I choose this theme and replace the fullwidth banner by this slider.Here is the steps:

Step 1: Creating Slider CPT

First registering a custom post type “Slider“. So user can easily handle the slider content from Dashboard. Create a new file “slider-cpt.php” and upload it into child theme folder. File is containing following codes:

Step 2: Including PHP file & Inisiating new Image size for slider

Including the “slider-cpt.php” file in functions.php file and generating new image size for slider images. Put the following codes in functions.php file:

//including slider CPT
include('slider-cpt.php');

//* Add new image size
add_image_size( 'slider', 9999, 750, TRUE );

add-slider

Step 3. Removing default banner and Adding Slider on Home page

Download the flexlsider package from http://www.woothemes.com/flexslider/ and upload “jquery.flexslider-min.js” file in “js” folder and “flexslider.css” file in css folder of minimum pro child theme folder. Now open the front-page.php file on Notepad++ and find this “minimum_front_page_enqueue_scripts” function. Replacing all backstretch scripts by Flexslider JS/CSS scripts there. So function will be look like this:

function minimum_front_page_enqueue_scripts() {
	
  wp_enqueue_style( 'flexslider-css', get_bloginfo('stylesheet_directory') . '/css/flexslider.css', array(), '1.0', 'all' );
  
  wp_register_script( 'flexslider-js', get_bloginfo('stylesheet_directory') . '/js/jquery.flexslider-min.js', array( 'jquery' ) );
  wp_enqueue_script( 'flexslider-js' );
  
	//* Add custom body class
	add_filter( 'body_class', 'minimum_add_body_class' );

}  

Now adding the slider after header by genesis_after_header hook. So add the following new codes in front-page.php file:

Step 4: Styling

Add the following CSS in style.css file

Go to line no 485 and replace the current CSS by this


.minimum .site-tagline {
margin-top: 0!important;;
}

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

4 Discussion to This Post

  1. hi there,
    thank you for this. it’s great. A problem though, my text box is positioned incorrectly, lower than the slide, and if I add 2 slides, they both show.
    for now, i’ve removed the second slide. and set the height in functions.php to the height of the slide, i.e. 427px

    //* Add new image size
    5
    add_image_size( ‘slider’, 9999, 427, TRUE );

      • Thank you for your reply. I had commented out the add_action to header hook and had the file references wrong. Now it is working beautifully! But the arrows don’t show. My image sizes are 1920px by 600px. the url is http://devsite01.evelurie.net/

        • Open the front-page.php file and replace directionNav: false with directionNav: true

Leave A Reply

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