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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<?php /*-----------------------------------------------------------------------------------*/ /* 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:
|
1 2 3 4 5 |
//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:
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?php // 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
.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
|
1 2 3 |
.minimum .site-tagline { margin-top: 0!important; } |
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 );
Can you share the site URL?
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