Responsive carousel slider

Posted On: June 14, 2017

To create a custom responsive slider, we need to register custom post type in function.php file:

/*register post*/
add_action( ‘init’, ‘collection_register_post_types’ );
/* Registers post types. */
function collection_register_post_types() {
/* Set up the arguments for the ‘view_job’ post type. */
$album_args = array(‘public’ => true,’query_var’ => ‘view_job’,’rewrite’ => array(‘slug’ => ‘view/job’,’with_front’ => false),’supports’ => array(‘title’, ‘editor’, ‘excerpt‘, ‘thumbnail’, ‘comments’, ‘custom-fields’, ‘page-attributes’),’labels’ => array(‘name’ => ‘slider’,’singular_name’ => ‘slider’,’add_new’ => ‘Add New Slide’,’add_new_item’ => ‘Add New Slide’,’edit_item’ => ‘Edit Slide’,’new_item’ => ‘New Slide’,’view_item’ => ‘View Slide’,’search_items’ => ‘Search Slide’,’not_found’ => ‘No Slide Found’,’not_found_in_trash’ => ‘No Slide Found In Trash’));
/* Register the music album post type. */
register_post_type( ‘view_job’, $album_args );
/*register post*/

Now add taxonomy or category for custom post type:-



function create_taxo(){

$lab = array(
‘search_items’=>’search geners’,
‘parent_item’=>’parent gener’,
‘edit_item’=>’edit gener’,
‘update_item’=>’update gener’,
‘add_new_item’=>’add new gener’,
‘new_item_name’=>’new item name’,

$ar = array(
‘hierarchical’ => true,
‘labels’ => $lab,
‘show_in’ => true,

Also Read :   Web Design Jaipur, Web Development Jaipur, SEO Company Jaipur, India




Now create loop for front-end with bxslider class:-

<!– custom post slider—>


//Relative container
echo ‘<div class=”relative container top-slider”>’;

echo ‘<ul class=”bxslider”>’;
//Limit the slider to 5 slides
$args = array(‘post_type’ => ‘view_job’,’post_status’ => ‘publish’,
‘posts_per_page’ => -1,);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();

echo ‘<li>’;

//$class grabs the position selected in the ‘Add Slide’ page
$class = ‘showskid’;

echo ‘<h3>’;
echo ‘<a href=’.get_permalink().’>’;
echo ‘</a>’;
echo ‘</h3>’;
echo ‘<span class=”post_content_slider”>’;
echo ‘</span>’;
echo ‘<span class=”btn_join”><a href=’.get_permalink().’>View Job</a></span>’;

echo ‘</li>’;


echo ‘</ul>’;
echo ‘</div>’;


<!—custom end —>

Add scripts and css for slider:-

<!– jQuery library–>
<script src=”//”></script>
<!– bxSlider Javascript file –>
<script src=”<?php echo esc_url( get_template_directory_uri() ); ?>/js/jquery.bxslider.js”></script>
<!– bxSlider CSS file –>
<link href=”<?php echo esc_url( get_template_directory_uri() ); ?>/css/jquery.bxslider.css” rel=”stylesheet” />

var maxSlides;
width = $(window).width();

if (width < 480) {
maxSlides = 1;
} else {
maxSlides = 2;
slideWidth: 580,
minSlides: 1,
maxSlides: maxSlides,

Also Read :   Reliance JioFi Continues to Dominate Data Card Market With 91% Share

More bx slider options and slider callback functions visit bx slider options page.

Subscribe to our newsletter
Subscribe to our newsletter today to receive updates on the latest news and offers.
100% Privacy. No spam guaranteed
webe tutorial