Adding Fullwidth Flexslider on Home page in Minimum PRO Theme

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:

/*-----------------------------------------------------------------------------------*/
/* Custom Post Type - Slider */
/*-----------------------------------------------------------------------------------*/

if ( ! function_exists( 'gd_add_cpt_slider' ) ) {
function gd_add_cpt_slider() {

// "Slider" Custom Post Type
$labels = array(
'name' => _x( 'Slider', 'post type general name', 'genesisdeveloper' ),
'singular_name' => _x( 'Slider', 'post type singular name', 'genesisdeveloper' ),
'add_new' => _x( 'Add New', 'slide', 'genesisdeveloper' ),
'add_new_item' => __( 'Add New Slider', 'genesisdeveloper' ),
'edit_item' => __( 'Edit Slider', 'genesisdeveloper' ),
'new_item' => __( 'New Slider', 'genesisdeveloper' ),
'view_item' => __( 'View Slider', 'genesisdeveloper' ),
'search_items' => __( 'Search Slider', 'genesisdeveloper' ),
'not_found' => __( 'No slider found', 'genesisdeveloper' ),
'not_found_in_trash' => __( 'No slider found in Trash', 'genesisdeveloper' ), 
'parent_item_colon' => ''
); 

$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true, 
'query_var' => true,
'rewrite' => array( 'slug' => 'slider' ),
'capability_type' => 'post',
'hierarchical' => false, 
'menu_icon' => 'dashicons-slides',
'menu_position' => null, 
'has_archive' => true,
'supports' => array( 'title', 'editor', 'thumbnail' )
);


$args['exclude_from_search'] = true;

register_post_type( 'slider', $args );
}

add_action( 'init', 'gd_add_cpt_slider' );
add_action( 'add_meta_boxes', 'gd_add_slider_custom_box' );
add_action( 'save_post', 'gd_slider_metabox_save', 1, 2 );
function gd_add_slider_custom_box(){
add_meta_box('slider_details', __( 'Slider Settings', 'cs' ), 'slider_meta_box', 'slider', 'side', 'high');
}

function slider_meta_box(){
wp_nonce_field( 'gd_slider_metabox_save', 'gd_slider_metabox_nonce' );

$readMoretxt = (get_post_meta(get_the_ID(), '_readmore_txt', true)) ? get_post_meta(get_the_ID(), '_readmore_txt', true) : "Read More";

echo '<div style="width: 90%;">';

printf( '<p><label>%s  <input type="checkbox" id="show_content" name="sld[_hide_content]" value="yes" %s/></label></p>', __( 'Disable the title & content', 'cs' ), checked("yes", esc_attr( get_post_meta(get_the_ID(), '_hide_content', true) ), false) );
printf( '<p><span class="description">%s</span></p>', __( 'Hide the title, content & read more button from slider image', 'genesisdeveloper' ) );

echo '</div>';

echo '<div style="width: 90%;">';

printf( '<p><label>%s<input type="text" name="sld[_readmore_url]" id="readmore_url" class="large-text" value="%s" /></label></p>', __( 'Read More URL: ', 'cs' ), esc_attr( get_post_meta(get_the_ID(), '_readmore_url', true) ) );
printf( '<p><span class="description">%s</span></p>', __( 'Link of Read More Button', 'genesisdeveloper' ) );

echo '</div>';

echo '<div style="width: 90%;">';

printf( '<p><label>%s<input type="text" name="sld[_readmore_txt]" id="readmore_txt" class="large-text" value="%s" /></label></p>', __( 'Read More Text: ', 'cs' ), esc_attr( $readMoretxt ) );
printf( '<p><span class="description">%s</span></p>', __( 'Replace the Read More button text', 'genesisdeveloper' ) );

echo '</div><br style="clear: both;" />';
}

function gd_slider_metabox_save( $post_id, $post ) {
/** Run only on testimonials post type save */
if ( 'slider' == $post->post_type ) {
/** Verify the nonce */
if ( ! wp_verify_nonce( $_POST['gd_slider_metabox_nonce'], 'gd_slider_metabox_save' ) )
return;

/** Don't try to save the data under autosave, ajax, or future post */
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) return;
if ( defined( 'DOING_CRON' ) && DOING_CRON ) return;

/** Check permissions */
if ( ! current_user_can( 'edit_post', $post_id ) )
return;

$sld_details = $_POST['sld'];

/** Store the custom fields */
foreach ( (array) $sld_details as $key => $value ) {

/** Save/Update/Delete */
if ( $value ) {
update_post_meta($post->ID, $key, $value);
} else {
delete_post_meta($post->ID, $key);
}

if(!isset($sld_details['_hide_content'])){
delete_post_meta($post->ID, '_hide_content');
}
}
}
}
}

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 );

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:

// Don't include the opening PHP tag

add_action('genesis_after_header', 'gdSlider', 5);

function gdSlider($atts){
$args = array('posts_per_page' => -1, 'post_type' => 'slider');
$slider = new WP_Query($args);
if( $slider->have_posts() ){
$sld= '<div class="flexslider">
<ul class="slides">' . "\n";
while( $slider->have_posts() ){
$slider->the_post();
$hideContent = get_post_meta(get_the_ID(), '_hide_content' ,true);
$readmoreTxt = get_post_meta(get_the_ID(), '_readmore_txt' ,true);
$readmoreLink = get_post_meta(get_the_ID(), '_readmore_url' ,true); 
$img = genesis_get_image( array(
'format' => 'html',
'size' => 'slider',
'context' => 'archive',
'attr' => array ( 'class' => 'slider-image' )
) );
if( $img ){
$sld .= '<li>' . $img . "\n" ; //'<h2 class="slider-title">' . the_title('', '', false) . '</h2>'. "\n" .
if( $hideContent != "yes"){
$sld .= '<div class="flex-caption">' . "\n" .
'<h2 class="title">' . get_the_title() . '</h2>' . "\n" . 
'<p class="caption">' . get_the_content() . ( ($readmoreLink != '') ? '<br/><a href="'.$readmoreLink.'" class="read-more">'.$readmoreTxt.'</a>' : '' ) . '</p>' . "\n" .
'</div>' . "\n";
}
$sld .='</li>' . "\n";
}
}
$sld .= '</ul>' . "\n";
$sld .= '</div>' . "\n";
$sld .= '<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".flexslider").flexslider({
selector: ".slides > li",
animation: "fade",
slideshow: true, 
slideshowSpeed: 9000, 
animationSpeed: 1050, 
controlNav: true,
directionNav: false,
pauseOnHover: false
});
});
</script>' . "\n"; 
} 

wp_reset_query();

echo $sld;
}

Step 4: Styling

Add the following CSS in style.css file

.minimum .flexslider {
  background: #fff;
  border: none;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  top: 60px;
}

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

  .flex-caption{
    background: rgba(0,0,0,0.75);
    bottom: 0px;
    color: #FFF;
    letter-spacing: 1px;
    max-width: 350px;
    padding: 20px;
    position: absolute;
    right:0;
  }
  
  .flex-caption h2.title{
    color: #FFF;
    text-transform: uppercase;
  }
  
  .flex-caption a.read-more{
    border: 1px solid #FFF;
    clear: both;
    color: #FFF;
    cursor: pointer;
    display: table;
    padding: 10px 28px;
    margin: 10px 0;
  }
  
  .minimum .flex-control-nav {
    position: absolute;
    left: 10px;
    text-align: center;
    top: 40%;
    width: auto;
    z-index: 20;
  }
  
  
  .minimum .flex-control-nav li {
    display: block;
    margin: 0 0 1px;
  }
  
  .minimum .flex-control-paging li a {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
      
    display: block;
    height: 25px;
    width: 4px;
  }

}

@media only screen and (max-width: 1023px) {
 .minimum .flexslider { top: 0; } 
}

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

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