Custom WordPress content slider with various features (bxSlider)
| 5 min read
Custom content slider for your WordPress theme is bliss!
As we have seen, there are a lot of WordPress content sliders available as a plugin. Some of them are very useful and having very good visuals. While developing theme for WrapCode.com I needed a lightweight, flexible content slider. I looked almost every anticipated slider out there on the Internet but somehow I was little disappointed by all of them. Then I found one very beautiful, lightweight, super flexible and configurable slider, bxSlider. bxSlider is jQuery content slider which makes use of simple HTML tags like UL (unordered list) or div.
Some features of bxSlider as given on the official website -
- Horizontal, vertical, and fade transitions
- Display and move multiple slides at once (carousel)
- Prev / next, pager, auto controls
- Easing transitions
- Random start
- Ticker mode
- Before, after, first, last, next, prev callback functions
- Optional styling included
- Tons of options If you want to display static content on HTML or PHP page, you can refer official website. It is very easy to implement and configurable too.
Implement bxSlider to display Wordpress Content (Posts)
Download bxSlider JQuery Package
- Go to www.bxslider.com and download the package.
- Copy jquery.bxSlider.min.js to /wp-cotent/themes/theme_name/js
- Copy bxstyles.css and images to /wp-cotent/themes/themename/css
- [Skip Easing script if already present] Copy jquery.easing.1.3.js to /wp-cotent/themes/theme_name/js
Register and Enqueue JS and CSS
Enqueuing javascript and stylesheet is safe, recommended method and considered as best practice as well. To know more about enqueing scripts and stylesheet you can refer (http://codex.wordpress.org/FunctionReference/wpenqueue_script) and (http://codex.wordpress.org/FunctionReference/wpenqueue_style)
I assume you areamiliar with both the functions now. To enqueue a script or a stylesheet you will have to write a function. If you want to be a successful WordPress theme developer, always remember to write functions in a separate file called functions.php. You can open and edit functions.php in several ways such as using Wordpress. Editor (Appearance -> Editor), FTP Client (CuteFTP) or File Manager present in your Web Hosting Control Panel.
Write a new function in** functions.php**
| function bxslider{ | |
| wp_register_script('bxslider', get_bloginfo('template_directory').'/js/jquery.bxSlider.min.js'); | |
| wp_enqueue_script('bxslider'); | |
| wp_register_script('easing', get_bloginfo('template_directory').'/js/ jquery.easing.1.3.js '); | |
| wp_enqueue_script('easing'); | |
| wp_register_style('bxslider-style', get_bloginfo('template_directory').'/css/bx_styles.css'); | |
| wp_enqueue_style('bxslider-style'); | |
| } | |
| add_action('init', 'bxslider'); |
Make sure you have triggered JQuery
Make sure you enqueue JQuery. Either write another function in functions.php or enqueue it in header.
| function load_jquery() { | |
| if (!is_admin()) { | |
| wp_enqueue_script('jquery'); | |
| } | |
| } | |
| add_action('init', 'load_jquery'); |
Writing a custom Javascript that controls bxSlider
Enqueing Javascripts and Stylesheet isn't everything. We have to write a function that controls behaviour of bxSlider. I have written a sample code below (I am using the same code for slider present on my blog's homepage.). Speaking honestly, writing a code in header.php is not at all a good practice. You should write it in custom javascript and then register and enqueue it using enqueue functions (Read Register and Enqueue JS and CSS section above).
Open header.php, paste following code just before closing </head> tag.
| <script type=”text/javascript”> | |
| jQuery(document).ready(function(){ | |
| jQuery(‘#bxslider’).bxSlider({ | |
| easing: ‘swing’, | |
| auto:true, | |
| pause:5000, | |
| }); | |
| }); | |
| </script> |
WARNING : Make sure <?php wp_head(); ?> is present in header.php, absence of the same can break many plugins.
Adding the actual slider in homepage
Since we are working on a content slider, we have to write a code that fetches Wordpress content such as post title, category, excerpt / content etc. Chosing the right content is your choice. I will write a code for slider that contains post title, thumbnail, excerpt and permalink.
Before looking at the actual wordpress functions that triggers queries to fetch data from database, let's take a look at the simple code that illustrates content of slider.
| <ul id="slider1"> | |
| <li>Slide one content</li> | |
| <li>Slide two content</li> | |
| <li>Slide three content</li> | |
| <li>And so on...</li> | |
| </ul> |
or
| <div id="slider1"> | |
| <div>Slide one content</div> | |
| <div>Slide two content</div> | |
| <div>Slide three content</div> | |
| <div>And so on...</div> | |
| </div> |
Now, our aim is to convert either any one of the above code into the code that displays WordPress content. I am going to use unordered list for the same (ul, li)
Some cosmetics (Slider Layout)
We have enqueued bxSlider's CSS which will take care of almost everything in terms of styling and positioning. Take a look at how slider will look.
The slider layout is divided in following classes -
- bxslider : The wrapper or parent container
- thumbnail : thumbnail container
- content : post content container
- content title (will be styled as h2 or h3 or similar thing)
- content excerpt (within a paragraph) Here's the sample CSS :
| #slider{ | |
| width:624px; /*defines width*/ | |
| /*any other styling such as background, border, shadow etc. */ | |
| } | |
| .thumbnail{ | |
| float:left; | |
| width:265px; | |
| height:170px; | |
| border-radius:5px; | |
| overflow:hidden; | |
| } | |
| .content{ | |
| float:right; | |
| /*Other properties of your choice*/ | |
| } | |
| .content h2{ | |
| font-size:20px; | |
| line-height:28px; | |
| /*Other properties of your choice*/ | |
| } | |
| .content p{ | |
| font-size:12px; | |
| line-height:20px; | |
| /*Other properties of your choice*/ | |
| } |
Slider and The Loop
> The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post.
Enough introduction, the loop actually displays all the posts, here's the syntax of The Loop
| //Start of the loop | |
| <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> | |
| //THE CODE GOES HERE | |
| <?php endwhile; else: ?> | |
| <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p> | |
| <?php endif; ?> //End of the Loop |
Learn more about The Loop and Various examples from Here
Slider and the Loop - Part II
Now, let's put all the ingredients together and cook something tasty. As we know the loop displays all the posts present in database one by one. All we need to do is put each individual post content in to the list item <li> THE CODE HERE </li>
| <ul id="bxslider"> | |
| <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?> | |
| <!--Each post is wrapped in List item.. --> | |
| <li> | |
| <div class="thumbnail"> | |
| <?php | |
| if(has_post_thumbnail()) { ?> | |
| <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_post_thumbnail( 'thumbnail');?></a> <!-- Image links to Post --> | |
| <?php } else { ?> | |
| <div class="no-thumb"><h2>No thumbnail for this :D</h2><h3>wrapcode</h3></div> | |
| <?php } | |
| ?> | |
| </div> | |
| <div class="content"> | |
| <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> | |
| <h2> | |
| <?php the_title(); ?> <!-- The Title --> | |
| </h2> | |
| </a> | |
| <p> | |
| <?php | |
| the_excerpt(); | |
| ?> | |
| </p> | |
| </div> | |
| </li> <!-- END OF LIST ITEM --> | |
| <?php endwhile; endif;?> | |
| <?php wp_reset_query();?> | |
| </ul> |
Functions explained
- **
has_post_thumbnail(): ** Checks if post has thumbnail - **
php_the_title();- ** Returns Post title - **
the_post_thumbnail('thumbnail');- ** returns thumbnail image - **
the_excerpt();- ** Displays excerpt of post
Demo
See slider in action here -> WrapCode
Conclusion
I hope you have learned how to include content slider in your theme manually. Though there are many plug ins available, you should look for manual ways if you really want to be a good developer. I have kept this post open for comments. I would love to hear your responses and suggestions.