WordPress & BX Slider

WordPress Bx Slider integration.

For those who don’t know, BX Slider is a open jQuery slider plugin. A jQuery plugin not a WordPress plugin. You can download BX Slider here…

The first thing to do to use this nifty bit of jQuery with WordPress is:

• Upload the jquery.bxslider.min.js script to the js folder of your theme
• Either copy and paste the contents of jquery.bxslider.css to your themes stylesheet or upload this file to your css folder

Now in your function.php enqueue the file(s) jquery.bxslider.min.js & (if required) jquery.bxslider.css file.

function get_bx_slider(){
        wp_enqueue_script('bx-script', PATH_TO_JS . '/jquery.bxslider.min.js', array(), '', true);
        //Enqueue css if required
        wp_register_style('bx-css', PATH_TO_CSS . '/jquery.bxslider.css', array(), '', 'all');
        wp_enqueue_style('bx-css'); 
        }
add_action('wp_enqueue_scripts', 'get_bx_slider');

Now let’s make it do something useful.

Say you have an existing shortcode for “Testimonials” & you have all your testimonials stored in posts, in a category called testimonials, which has an id of 3. It would be great if you could show these testimonials in a slider on your home page or other place on your site, right?

The first thing to do would be to create the slider shortcode, in your functions.php:

function testimonials_slider( $atts, $content = null ) {
    //create the arguments to call the posts			             
    $args = array( 'posts_per_page' => -1, 'category' => 3 );	        
    //Create the holding div (note the class name)
	$return = '<div class="bxslider">';
	//Get the posts as array
	$testimonials = get_posts( $args );
        //Run a foreach over the post array
        foreach ( $testimonials as $test ){
	         //Get the post content (don't forget do_shortcode)
		 $return .= do_shortcode($test->post_content);
	    //end the loop
               } 
         //Important! Reset the posts
         wp_reset_postdata();                               
	 //Close the holding div			
	 $return .= '</div>';
	//Return the results				
	return $return;
	}
//add the shortcode
add_shortcode('testimonials_slider', 'testimonials_slider');

So we have just about set our testimonials slider up, but we still need to add one last script to give the slider its parameters. Create a new document within your JS folder and call it “bx-options.js”. Enqueue this new file as above and give it some options, like so:

jQuery(document).ready(function($) {

      $('.bxslider').bxSlider({
                   mode: 'fade',
                   auto: true
                   });
				
});

I have this set to slide transition type “fade” (as I hate sliding) and auto start. There a loads of options for BX Slider and you can find a list of them here. Or for some common examples look here.