Implement bxslider in WordPress with Custom Post Type


How to implement bxslider in wordpress

Bxslider is one of the most versatile jquery based responsive content slider. We are going to implement bxslider in WordPress, It is simple, responsive and top of that it is free to use or misuse. Besides all these features, You can runs its multiple copies with the same jquery code,You just have to change its CSS id.

In this bxslider tutorial, We will implement bxslider in WordPress without any plugin, as i strongly believe more plugins means more loading time.

Recommended Read

How to implement bootstrap carousel in WordPress without plugin

This whole tutorial is divided into two parts – both bxslider implementation tutorial are complete in all senses.

1. In first Parts – we will implement bxslider in WordPress with images from a theme folder
2. In Second Part – We will Implement bxslider in WordPress with Custom post type in ticker mode

Implement BxSlider in WordPress with images from theme folder

Step 1.1 : Download jquery.bxslider.min.js from its official website www.bxslider.com .In our case we have downloaded this file in our themes js folder
Step 1.2 : Open your functions.php file and add the following lines. The way we are enqueuing this file will not force contents to wait


function rsa_scripts()
{
wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/jquery.bxslider.min.js', array( 'jquery' ),'', false );
if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); }
}
add_action( 'wp_enqueue_scripts', 'rsa_scripts' );

and this is also the most recommended way to add jqueries and other JavaScript, if you want to load your website in a non-blocking way.

Step 1.3 : Add Style sheet, this is the most recommended way to add stylesheet in any WordPress theme and plugin.


function rsa_styles()
{
wp_enqueue_style( 'bxstyle', get_template_directory_uri().'/css/bx-style.css' );
}
add_action( 'wp_enqueue_scripts', 'rsa_styles' );

but if you do not like CSS for bxslider in a new file then open your style.css file and add the following in


.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
}

.bx-wrapper img {
max-width: 100%;
display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: solid #fff 5px;
left: -5px;
background: #fff;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
left: 10px;
background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
right: 10px;
background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}

.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}

Step 1.4 : Create a new file in your favorite text-editor and paste the following code. Name this file slider.php Remember we are using 16 grid CSS framework

<div class="row" style="margin-bottom:5px;">
<div class="sixteen columns">
<ul class="bxslider">
<li><a href="http://www.binarynote.com"><img src="<?php echo get_template_directory_uri(); ?>/images/slide-01.jpg" /></a></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/images/slide-02.jpg"/></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/images/slide-03.jpg"/></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/images/slide-04.jpg"/></li>
</ul>
</div>
</div>

Step 1.5 : Save four Image files slider-01.jpg, slider-02.jpg, slide-03.jpg and slider-04.jpg of size 960x360px inside your template’s Images folder
Step 1.6 : Now open your functions.php file again and paste the following code


if ( ! function_exists( 'bxslider_exists' )) :
function bxslider_exists() { ?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
captions:    true,
autoControls: true,
auto: true,
pause: 4000
});
});
</script>
<?php }
add_action( 'wp_footer', 'bxslider_exists' );
endif;

Step 1.7  Now open your header.php file and add this at the position, you want. The code for adding this slider is


<?php get_template_part('slider'); ?>

Now this is the time to enjoy your simplest bx slider for your WordPress site.

Implement BxSlider in WordPress with Custom Post Type

BUT if you are a theme developer or want something extra from your Website then it is not sufficient. Sometimes people ask you to
slide images of their customer/brands to rotate and on clicking of that image they want a complete Description. AND its is not possible to provide this information like the method mentioned above

So the solution for this type of customer is a custom post type images attached with bxslider in WordPress.

In this case will create a new post type – Testimonials and then using this new post type’s featured Image will slide all its images in ticker mode i.e. images will appear from right hand side and disappear and left hand side.

bxslider with custom post

Step 2.1: Copy Paste the following code in a new file Testimonials.php  below code will create a new post type inside your WordPress


<?php
/*----------------------------------function to add new post :testimonials----------------*/
add_action('init','rsa_testimonial_store');
function rsa_testimonial_store()
{
$theme_args = array (
'public'    =>true,
'query_ver'    =>'testimonials',
'rewrite'    => array(
'slug'    =>            'testimonials',
'with_front'    =>     false
),
'supports'    => array(
'title',
'editor',
'comments',
'tag',
'thumbnail'
),
'labels'    =>    array(
'name'                =>'Testimonials',
'singular_name'    =>'testimonial',
'add_new'            =>'Add New testimonials',
'add_new_item'        =>'Add New testimonials',
'edit_item'            =>'Edit testimonials',
'new_item'            =>'New testimonials',
'view_item'            =>'View testimonials',
'search_items'        =>'Search testimonials',
'not_found'            =>'No testimonials found',
'not_found_in_trash'    =>'No testimonials Found in Trash'
),
'menu_position' => 5,
'menu_icon' => get_stylesheet_directory_uri() . '/images/student.png',
'can_export'    => true,
'exclude_from_search' =>false
);
register_post_type('testimonials', $theme_args );
}
?>

Now open functions.php file and add the following code so that WordPress could create a new post type.


require_once(TEMPLATEPATH .'/Testimonials.php');

step 2.2  same as step no : 1.2
step 2.3  same as step No : 1.3
step 2.4  Now replace the contents of slider.php with the following code


<div class="row"style="margin-bottom:0px;">
<div class="sixteen columns">
<div class="headline no-margin">
<h3>Happy Students</h3>
</div>

<ul id="clients">
<?php
query_posts( array ( 'post_type' => 'testimonials', 'posts_per_page' => 12 ));
if (have_posts()) : while (have_posts()) : the_post();?>
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail()) ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_post_thumbnail(array(100,100), array("class" => "img")); ?></a></li>
<?php endwhile; endif;
wp_reset_query(); ?>
</ul>

</div>
</div>

step 2.5 : Now open your WordPress Dashbard and Add few New Testimonials. Remember your Testimonials must have featured Images of size 960x360px wide. This slider had been optimized for 12 slides.
step 2.6 : Now open your functions.php file again and paste the following code

if ( ! function_exists( 'bxslider_exists' )) :
function bxslider_exists() { ?>
jQuery('#clients').bxSlider({
useCSS: false,
minSlides: 8,
maxSlides: 12,
slideWidth: 100,
slideMargin: 10,
tickerHover: true,
ticker: true,
speed: 45000
});
<?php }
add_action( 'wp_footer', 'bxslider_exists' );
endif;

Though, I have taken utmost care to produce this tutorial, if you are able to find out any bug in this,please let me know through your comments. You can also request any tutorial through comments also




2 Brilliant Comments - Join Discussion Now!

  1. Tara says:

    Hello,

    Thanks a lot for this nice tuto.
    To go further, I put the slider inside a few of my wordpress posts, just calling it with a shortcode and a few parameters.
    It works fine…

    • rakesh says:

      Hi Tara,
      Nice to know that you were able to further enhance the functionality of this wonderful slider. Keep in touch

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>