Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86
bxSlider is one of the best and most useful jQuery plugins to include slider, carousel or ticker functionality to your WordPress Theme or website. What makes bxSlider so popular is its ease of use and very high level of customisability. It is very easy to integrate and provides a ton of customization options so that you always feel in control. In this article, we will see how to integrate bxSlider in a WordPress Theme or website the right way without using any external plugin.
This is a developer level article and you need to have good enough level of knowledge of WordPress API. You’ll need access to the theme files. If you feel you need a crash course in WordPress development, I recommend checking out the official repository. Also, remember Google is your best friend when it comes to learning something online. Note that I am using the underscores skeleton theme, so everything in this article will be according to that. So, let’s get started!
Step 1 – Copying the files in the theme
First of all, we need to make sure the appropriate files of bxSlider are enqueued properly on the front-end. It primarily includes two main files. You can download bxSlider file from its Github repository. The files we are interested in are present in the dist folder. The files are named jquery.bxslider.min.js and jquery.bxslider.min.css. 
Copy these files at an appropriate place in your theme directory. For the sake of simplicity and this article, i’m going to save these files in a sub-directory called bxslider.
Step 2 – Enqueuing the files
Now, after copying the files, we need to enqueue the files. This is how WordPress recognises and includes these files in a theme. Assuming you have copied the files in bxslider folder, we go to functions.php and enter the following code-
|
1 2 3 4 5 6 7 |
function my_theme_enqueue_bxslider() { wp_enqueue_style('my-theme-bxslider-css', get_template_directory_uri() . '/bxslider/jquery.bxslider.min.css', array(), null, false ); wp_enqueue_script('my-theme-bxslider-js', get_template_directory_uri() . '/bxslider/jquery.bxslider.js', array('jquery'), null, false); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_bxslider'); |
What we are doing here is enqueuing the css and js files using WordPress functions wp_enqueue_style and wp_enqueue_scripts respectively. For the sake of this article, I have not set any version parameter. Also, note that in the dependency argument of wp_enqueue_script, we have added a dependency of jquery. It is essential for the slider to work.
After doing this, theme will start including these files in the header. You can heck it yourself in the element tab of the console. Now, we need to initiate the slider wherever necessary.
Step 3 – Create a Custom Page Template for the Slider
We need to create the HTML markup in our theme where we want to integrate the slider. Let’s suppose we want to include the slider in a freshly created page template. We need to create a page template. If you are not aware how to create a page template, refer to this official WordPress article. It should help you out. Create a new page template named template-bxslider.php and copy the code of page.php to that file. Don’t forget to include the Template Name: bxSlider Page. The new template should look like his-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php /** * Template Name: bxSlider Template */ get_header(); ?> <main id="primary" class="site-main"> <?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; // End of the loop. ?> </main><!-- #main --> <?php get_sidebar(); get_footer(); |
This template will start appearing in the Page Attributes section in the Edit Page area. Check the screenshot below-
Select the Page Template and save the page where you want the slider to be displayed.
Step 4 – Creating the Markup for the Slider
Till now, there template enabled page will act as a normal page. We need to include the slider markup and initiate the slider. Let’s start with the markup. As per the official bxSlider documentation, the following markup is required –
|
1 2 3 4 5 6 7 |
<div class="bxslider"> <div><img src="/assets/images/coffee1.jpg" title="Funky roots"></div> <div><img src="/assets/images/coffee2.jpg" title="The long and winding road"></div> <div><img src="/assets/images/coffee3.jpg" title="Happy trees"></div> </div> |
Let’s modify this a little bit to make it more practical for WordPress. Suppose we have 3 images uploaded in WordPress Media and we need to include these in the slider. For this, we need the URLs of these images. Go to Dashboard > Media > Library. All the uploaded media will be present there. To get the URL of the desired image, just click on the image. In the modal window that appears, check out the bottom right side of the window. You’ll see the URL and the option to copy the URL.
Suppose the URLs of the images to be used are https://www.example.com/wp-content/uploads/2020/image1.jpg, https://www.example.com/wp-content/uploads/2020/image2.jpg and https://www.example.com/wp-content/uploads/2020/image3.jpg. The resulting markup will be as follows-
|
1 2 3 4 5 6 7 |
<div class="bxslider"> <div><img src="https://www.example.com/wp-content/uploads/2020/image1.jpg" title="First Image"></div> <div><img src="https://www.example.com/wp-content/uploads/2020/image2.jpg" title="Second Image"></div> <div><img src="https://www.example.com/wp-content/uploads/2020/image3.jpg" title="Third Image"></div> </div> |
Mind you this method of retrieving URLs is not a good way by any stretch of imagination. This is just to make things more understandable in this article. There are a whole bunch of WordPress functions which help you retrieve URLs of images from the Media Library. Check them out in the Function Reference.
Now, copy this markup in template-bxslider.php in place of content. The resulting template filw would look as follows-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php /** * Template Name: bxSlider Template */ get_header(); ?> <main id="primary" class="site-main"> <?php while ( have_posts() ) : the_post(); ?> <div class="bxslider"> <div><img src="https://www.example.com/wp-content/uploads/2020/image1.jpg" title="First Image"></div> <div><img src="https://www.example.com/wp-content/uploads/2020/image2.jpg" title="Second Image"></div> <div><img src="https://www.example.com/wp-content/uploads/2020/image3.jpg" title="Third Image"></div> </div> <?php endwhile; // End of the loop. ?> </main><!-- #main --> <?php get_sidebar(); get_footer(); |
Now, the images would start appearing in the browser. But they are not yet in the form of a slider. They are still only plain images appearing on the page. To make it appear in the form of a slider, we would need to instantiate the slider.
Step 5 – Instantiate the Slider
In order to instantiate the slider, we need to create a custom JS file in which we will add the required code. Create a new file named custom .js in the bxslider folder. In order to include it, add the following line to the function we created in functions.php earlier –
|
1 2 3 |
wp_enqueue_script('my-theme-custom-js', get_template_directory_uri() . '/bxslider/custom.js', array(), null, false); |
The functions.php file should look like this-
|
1 2 3 4 5 6 7 8 |
function my_theme_enqueue_bxslider() { wp_enqueue_style('my-theme-bxslider-css', get_template_directory_uri() . '/bxslider/jquery.bxslider.min.css', array(), null, false ); wp_enqueue_script('my-theme-bxslider-js', get_template_directory_uri() . '/bxslider/jquery.bxslider.js', array('jquery'), null, false); wp_enqueue_script('my-theme-custom-js', get_template_directory_uri() . '/bxslider/custom.js', array(), null, false); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_bxslider'); |
Now, custom.js file should get included in the theme for us to use. Any code added in this file would be rendered in the front-end of the theme in the browser. Add the following code to custom.js-
|
1 2 3 4 5 |
jQuery(function(){ jQuery('.bxslider').bxSlider(); }); |
If everything is done correctly, the images should now appear in the form of a slider in the front-end of the page. To further customize the slider, you can refer to the options page of the bxSlider documentation.
And that’s about it! In this article, we saw how to integrate bxSlider in a WordPress Theme. This is the most basic implementation of bxSlider in WordPress. There are a a lot of ways (much more advanced and better) to include the slider which we’ll cover in further articles.
