Build a lightweight slider from a custom post type

Start by adding to your theme’s function.php file. We need to add the custom post type for the slides, a custom thumbnail size for the slider, and we need to add the slider script to the header.


/**add slider script to header*/

function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_stylesheet_directory_uri() . '/js/responsiveslides.min.js',
		array( 'jquery' )
	);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

/**custom post type for slider*/

register_post_type('slides', array(
'label' => __('Slides'),
'singular_label' => __('Slides'),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => false,	'query_var' => true,
'supports' => array('title', 'editor', 'thumbnail'),
'taxonomies' => array( 'post_tag')
));

/**add slider thumbnail size*/

if ( function_exists( 'add_image_size' ) ) { 
	//add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
	add_image_size( 'homepage-slider', 960, 320, true ); //(cropped)
}

/**add slider thumbnail size*/
add_filter('post_thumbnail_html','remove_thumbnail_dimensions', 10 );
add_filter('image_send_to_editor','remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}


Modify the front page template to loop through the custom post type and use the format needed for the slider. We are taking our slider code from www.responsiveslides.com

<ul class="rslides">
<?php
$my_secondary_loop = new WP_Query('post_type=slides');
if( $my_secondary_loop->have_posts() ): while( $my_secondary_loop->have_posts() ): $my_secondary_loop->the_post(); ?>
     <li>
     <div class="slider-overlay">
     <div class="slider-content">
     <?php the_title(); ?>
     <?php the_content(); ?>
     </div>
     </div>
	<?php the_post_thumbnail('homepage-slider');   ?>
      </li>
       
       
<?php    
    endwhile; ?>
</ul>
<ul id="rslides-pager">
        
    
<?php while( $my_secondary_loop->have_posts() ): $my_secondary_loop->the_post();
       
       //The secondary loop
     ?>
      <li class="slidebtn"><a href="#">&nbsp;</a></li>    
    
    <?php    
    endwhile; ?>
    </ul>
<?php endif;
wp_reset_postdata();
?>

We have added the initialization and settings javascript into the slider script file.

    
$(function() {
$(".rslides").responsiveSlides({
auto: true,             // Boolean: Animate automatically, true or false
speed: 500,            // Integer: Speed of the transition, in milliseconds
timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
pager: true,           // Boolean: Show pager, true or false
nav: false,             // Boolean: Show navigation, true or false
random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "#rslides-pager",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
    });
  });

Add the slider CSS to the theme’s CSS file

/* =slider styles
-------------------------------------------------------------- */

.slider-overlay{
	position: absolute;
	width:25%;
	background-color: rgba(0,0,0,0.39);
	height:100%;

}

.slider-content{
	padding: 15%;
	color:#fff;
}

#rslides-pager{
	position: absolute;
	left:50%;
	margin-left: -25px;
	margin-top: -45px;
	z-index:99;

}

#rslides-pager a{
	display: block;
	text-decoration: none;
}

#rslides-pager li.rslides_here {
  background: #fff;
}

#rslides-pager li{
background-image: none;
background-color: #0e1939;
border-radius: 10px;
width: 12px;
height: 12px;
margin: 0 2px;
float:left;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0 0 25px 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

Custom styles for the slider will need to be applied from here but the slider should be working.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.