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.

  • Check out my WP-BxSlider plugin for WordPress. Using WP-BxSlider you can implement multiple sliders, tickers and faders using only a shortcode, all from within the content editor, without having to edit your theme.

  • Noel

    Hi Andrew,

    Thanks for your plug. I had considered using a plug-in, but there is so little code that there’s almost no point. Feels like creating a shortcode for saying echo “hello”, surely it’s more than that, but you get my drift ;) Plug-ins create dependency and dependency is my last resort for any theme design.

    Cheers

    Noel

  • True – like many plugins it’s a convenience thing.

  • Im trying to implement this “gadget” but faced one problem: I always see the right part of previous text. How can fix it. I was trying to use something like:
    .slidebx ul{
    width:100px;
    height:30px;
    }

    but didnt help. ANy suggestiuons

  • Noel

    Hi Mike,

    This has likely to do with your CSS or image sizes, not BxSlider itself. Check *all* the dimensions again.

    Cheers

    Noel

  • Thanks for reply. I fixed it using

    something

    I might be wrong about and I set its sizes somewhere in style.css. Now its really huge and hard to find anything damn.

  • Erika

    I’ve been trying to add this slider on the front page of a website I’m working on. Before running into this tutorial I tried several things but Firebug keeps telling me that;
    jQuery(‘#slider1’).bxSlider is not a function. Here is where I’m developing this slider:
    http://suncitykickball.com/wordpress/
    Do you think you can help?

    So many thanks in advance

  • Have you made this work with Step 3 containing the loop?

    I manually tried to add this to my theme, but it didn’t work and was hoping that your tutorial might help me out!

    It didn’t, unfortunately, but I’ve bookmarked your site!

  • Sorry forgot my code!

    Read More...
    <img src="" />


    Doesn’t work :(

  • Noel

    Hi Erika,

    Getting an internal server error, but you’re probably not loading the actual bxslider scripts.

    Cheers
    Noel

  • Noel

    Hi Andy,

    No reason why it shouldn’t work. This would be the format.

    -UL
    –Start Loop
    — LI CONTENT /LI
    –Stop Loop
    -/UL

    Cheers

    Noel

  • I’m using this jQuery plugin, and love it. But I’m wondering how to add more slides into current slideshow using JS. Do you know any solution?

  • Noel

    Hi Johann,

    Yep, there are indeed solutions! They’re listed on the original bxslider website (multiple examples actually).

    Cheers

    Noel

  • Hi Noel,

    Great sample – we’re using it here http://hibana.com.au/

    Cheers.

  • Brian

    Hi Noel,

    Lovin your tutorials! I have been looking for something like this for a little bit. The only thing that is missing for me is the option for users to add image/content to the slider from the admin UI. Is this fairly easy to implement? Do you think this could warrant another fantastic tutorial from yourself?? :)

  • David Hedley

    Hi, fantastic, however, my theme does not yet use enqueue for jQuery, could you please offer any help with step 1 without attaching to the jQuery array.

    Thanks in advance

  • Bryan

    This worked like a charm (after a couple tries). Thanks!

  • From your “header.php” section above, whenever I add the 2nd bit of code…


    jQuery(document).ready(function(){
    jQuery(‘#slidebx’).bxSlider({
    mode: ‘horizontal’,
    infiniteLoop: true,
    speed: 2000,
    pause: 8000,
    auto: true,
    pager: false,
    controls: true
    });
    });

    …Wordpress’ theme editor won’t reload once I press Update File. Should I not be doing this in the editor?

  • did you create your own styles or is there a standard stylesheet?

    I am a design student new to development,
    I am trying to use the bx-slider with the thumbnail pager
    but I (rather noob-ish to dev and jQuery) dont even know where to
    place the files.
    Do I just place the theme files directly in my theme folder or do I upload them in plugins?

    Your tut is helpful (as, you are correct, it is the only one!) but, being a novice to WP and jQuery,
    I need some help.

    You can see an example @: druwhiteproductions.com

    …the scheme is fairly intuitive tv background for videos (not yet in place w/o slider)
    and a thumbnail pager.

    thanks for any assistance you can provide!

  • Jaspreet Singh

    hey Im using pretty much std code in the bxslider package, its working and all but for the first 3 images… they are pushed about 30% to the right. At the fourth image, it jumps to proper alignment. Whats the possible cause??

  • Jaspreet Singh

    hey Im using pretty much std code in the bxslider package, its working and all but for the first 3 images… they are pushed about 30% to the right. At the fourth image, it jumps to proper alignment. Whats the possible cause??

  • Max Bortone

    I’ve got the same problem although I’m not implementing this with wordpress, just plain HTML & CSS. The image carousel should be centered inside the red box, but I can’t figure out how to do that. And before giving a proper width to the li elements, they were all very large and the whole thing was more than 1400px in width.

  • Matt

    i probably shouldn’t even try to do this, it’s over my head! i’ve modified the header.php file as I interpreted your directions like this

    jQuery(document).ready(function(){
    jQuery(‘#slidebx’).bxSlider({
    mode: ‘horizontal’,
    infiniteLoop: true,
    speed: 2000,
    pause: 8000,
    auto: true,
    pager: false,
    controls: true
    });
    });

    and I get this error when i update the file. Is this user error?

    // 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’);
    Warning: Cannot modify header information – headers already sent by (output started at /home/content/a/v/a/avantadm1n/html/wordpress/wp-content/themes/uber/functions.php:951) in /home/content/a/v/a/avantadm1n/html/wordpress/wp-admin/theme-editor.php on line 103

  • Matt

    also loaded the jquery folder from bxslider into my theme folder. is that the right place?

  • Matt

    ok so i played around some more and realized i had not fully set up the files or updated the paths in your code. I’ve got the slider to work sort of but i now get this error after click update for any post….

    Warning: Cannot modify header information – headers already sent by (output started at /home/content/a/v/a/avantadm1n/html/wordpress/wp-content/themes/uber/functions.php:955) in /home/content/a/v/a/avantadm1n/html/wordpress/wp-includes/pluggable.php on line 866

    Also, the prev/next buttons where there, but just disappeared after a couple of page refreshes

    Any help you could offer would be much appreciated!!!

  • Frankjkeane

    Thanks for this Noel. I have two questions, will taking out the css call and just using a normal css file going to break your method? Have you ever had a problem with bxSlider pushing the whole page down by about 20px. I have a 20px gap at top of window when i add the slider, can you think what might cause this?

    Many thanks.

  • Frankjkeane

    Hi, me again. I tried using your code and couldn’t get it working. I delted the fu ctions files and went back to my original method which was working but now is not. I think the function is still trying to call bxSlider? is this possible. When i put the call into homepage bxslider does not load but it does on other pages. I reinstalled WP too. Does the functions file change something in WP?

    Thanks.

  • Frankjkeane

    Hi, me again. I tried using your code and couldn’t get it working. I delted the fu ctions files and went back to my original method which was working but now is not. I think the function is still trying to call bxSlider? is this possible. When i put the call into homepage bxslider does not load but it does on other pages. I reinstalled WP too. Does the functions file change something in WP?

    Thanks.

  • Frankjkeane

    Hi Noel, realised I had duplicated the homepage for testing which doubled the ‘home’ template declaration confusing wp and me for a few hours. back to normal… thanks.

  • Elisabeth Hasbany

    This is awesome, couldn’t get my rotate-er to rotate at the correct speed…your little bit of code just saved me hours of struggling. Thanks!

  • Hugo

    Seems that your example is not responsive, man.

    Is it on purpose?
    I am facing responsive problems with bxslider in WP myself.

  • Brad

    Absolute Legend. Helped me out a lot. Thank you sir

  • buttjee

    but wht about if you have 50 pages and you want to display them in bxslider it would take time to load right need help with this man because i implement the slider in wordpress but i was wondering wht wil happen if we have 50 or more pages

  • ephernet

    Hi Noel, Great Post!
    I’m thingking easing is in wp as it shakes an incorrect login.
    tried differnet ways on bxslider. . .no luck
    //…………………………………………………………………………. LOAD BX SLIDER
    function loadbxslider() {
    wp_enqueue_style(‘bxstyle’, ‘/wp-content/themes/twentythirteen/bxslider/jquery.bxslider.css’);
    //wp_enqueue_script(‘easing’, ‘/wp-content/themes/twentythirteen/bxslider/plugins/jquery.easing.1.3.js’, array(‘jquery’));
    wp_enqueue_script(‘easing-comp’, ‘/wp-content/themes/twentythirteen/bxslider/plugins/jquery.easing.compatibility.js’, array(‘jquery’));
    wp_enqueue_script(‘bxscript’, ‘/wp-content/themes/twentythirteen/bxslider/jquery.bxslider.min.js’, array(‘jquery’));
    }
    add_action(‘init’, ‘loadbxslider’);
    //……………………………………..
    any of your ideas would be great!

  • gul

    imagesimagesimagesimagesimagesimagesimagesimagesimagesimagesimagesimagesimagesimagesimagesimagesimagesimages

  • trueternalbeauty

    seriously you made this sooo simple, read a few other tutorials on this and couldn’t figure it out AT ALL thanks finally a slider added to my theme!

  • trueternalbeauty

    any idea what code is needed to make this work on a wordpress blog as a featured post slider? I want content with the tag featured to show up on the homepage in my slider…thanks

  • Luko Del Ponte

    Great tutorial.
    But for me it only worked when I used this wrapper and shortcut:
    jQuery(document).ready(function($){
    $(‘.bxslider’).bxSlider({ …

  • Wahooka

    Thanks! That was exactly what I was looking for!

  • David

    Brilliant. Thanks :-)

  • romymk

    The same for me, but it is not working in ie for me. Did you encounter similar?

  • gaurav GOYAL

    my slider are working but images are not displaying ??

  • Brian Roy Coelho

    Hi Noel,

    i want to place the bxslider in between the homepage in my wordpress website as a small slider and not at the beginning what is the procedure?

  • gabriel nazoa

    How can I proceed if I have custom fields? I have a page with a custom field called images where I loaded all my images. What can I do? In that case this doesn’t work:

    Slide 1 Content
    Slide 2 Content
    Slide 3 Content

  • gabriel nazoa

    How can I proceed if I have custom fields? I have a page with a custom field called images where I loaded all my images. What can I do? In that case this doesn’t work:

    Slide 1 Content
    Slide 2 Content
    Slide 3 Content