Tutorial – WordPress and bxSlider

There are a bunch of jQuery content & image sliders out there. Although I initially gravitated towards Nivo Slider due to the fancy presentation and website, I found that bxSlider was the jQuery content slider I required (as you can see from my example here, work in progress). bxSlider allows you to put anything between the list item tags, hassle-free. A number of other sliders are limited to images & captions, yet still call themselves content sliders. I also noticed that a number of people were wondering how to integrate this within WordPress. So this post will serve as a guide for those interested in merging the two (and it is the only tutorial on the subject out there at the time of being published)!

Once you’ve downloaded the bxSlider package from the website, upload the files to your theme.

1) Functions.php

Instead of loading the files directly into the header, I’m going to load it within the functions file. The codex describes it as “…a safe way of adding javascripts to a WordPress generated page“. Although the CSS could be in the header, it makes more sense to keep everything packaged together.

// LOAD BX SLIDER
// *********************************************************
function loadbxslider()
{
    wp_enqueue_style('bxstyle', '/wp-content/themes/yourtheme/bx_styles/bx_styles.css');
    wp_enqueue_script('bxscript', '/wp-content/themes/yourtheme/js/jquery.bxSlider.min.js', array('jquery'));
}
add_action('init', 'loadbxslider');

2) Header.php

Notice that I haven’t called jQuery itself yet. Obviously you won’t need to reference to jquery-1.x.x.js directly as WordPress has this feature built-in. So the first thing you want to do is use the enqueue function to not only load the jQuery files, but also the bxSlider simultaneously (recall the array(‘jquery’) code above, that brings bxslider into the mix). You’ll want to place this right above the wp_head function to keep everything in good order.

<!--?php wp_enqueue_script('jquery'); ?-->
<!--?php wp_head(); ?-->

Right below wp_head, you’ll want to add the JavaScript code that will control your final output (specifying the unordered list class that will also be used as the container of rotating content). For a full list of options, please see the documentation on Steven’s website. It’s very important here that you replace the $’s with jQuery as it’s not assumed:

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
  jQuery('#slidebx').bxSlider({
    mode: 'horizontal',
    infiniteLoop: true,
    speed: 2000,
    pause: 8000,
    auto: true,
    pager: false,
    controls: true
  });
});
// ]]></script>

3) BxSlider inside your Content

Now that you have everything in place, all you need to do is add the content to display your slides. In the case above, I defined #slidebx as my class containing all the slides (or more importantly the list structure). Here is a simple example of what this would look like:

</pre>
<ul id="slidebx">
	<li>Slide 1 Content</li>
	<li>Slide 2 Content</li>
	<li>Slide 3 Content</li>
</ul>
<pre>

At this point, you’re all done! And you should have some slides rotating on your website (here is an example of mine). Let me know if you have any questions, I’ll be glad to help where I can.