As a late adopter of WordPress, I find that WP Developers pack their themes full of plugins that are just too bloated for my needs. Maybe it’s a need for control in a development environment, but I still have a desire to keep my code simplified and neat. We all have our own preferences and brands of development around Rocket Pop, but at the end of the day it all works together cohesively. This is likely because, in general, we do not like to use very many WP plugins.
Sliders are a fairly common fixture in modern web design, and while I don’t believe them to be necessary or timeless, they do have their place. When it comes time to develop a new site with a featured content slider and using WordPress there are a great deal of options to choose from. Yes, you could take the plugin route and hack apart someone else’s code to make it suit what you want to do. Frankly, though, I don’t have time for that and I doubt you do either. The best part about WordPress in its simplified form, is that you really don’t have to use plugins as a whole thanks to the wonderful documentation that they provide.
Check out the finished result of this tutorial
Setting Up The Slider
We’re going to walk through how to build a very flexible content manageable slider that integrates with WordPress and should give you all that you need. First and foremost – go grab my favorite jQuery slider script which will be used as the basis of this demo, bxSlider. You can find installation instructions on the bxSlider homepage or their Github page.
I always serve my jQuery library from Google… because well… it’s Google. I love them and you should too. You’ll also notice that when I am calling the minified jQuery bxSlider script, I have stored the files within my stylesheet directory. You can reference this script with the command bloginfo(‘stylesheet_directory’). Within my parent theme folder or child-theme folder, I’ve created a /js/mylibs/ folder so that I can keep my theme’s JS files organized and easily accessible. (This path, for those new to building your own themes, would end up being www.mydomain.com/wp-content/themes/themename/js/mylibs/ with “themename” being the ‘stylesheet_directory’.)
The HTML markup for bxslider is very, very simple, which is why I’ve always sworn by it. It is an Unordered List (<ul>) with list items. Thats it! It couldn’t get much more flexible than that. Within the list items can be just about anything you put your mind to, which is why I’ve chosen to build WordPress sliders with this particular jQuery script:
Once your HTML markup foundation is laid, it’s time to test the basics. Go ahead and call the bxSlider with a jQuery function:
To break this bit down, what this script is basically doing is calling the plugin within a $(document).ready() call.
Here we are using a function that targets the class of our Unordered List as the container for the bxSlider. After the parent element has been identified the myriad of plugin options can be referenced and customized to your needs. Let’s keep it simple for now and set a mode of ‘fade’ and allow captions with captions: true.
As an extra note for beginner jQuery developers: remember to check the end of your options list for an ending comma. It is a common beginner developer mistake to break your jQuery and spend hours chasing down the error. Simply put:
What you should see at this point in the process, if jQuery has properly initialized, your markup is correct, and you’ve properly called the plugin, is a functioning slider.
How we want to handle the presentation of images for our slider is entirely developer preference. I prefer to use TimThumb as a means for scaling, cropping, and positioning images. This is helpful if you’re planning to hand off this site to a client who may not be entirely aware of the image size required for a featured image. Basically it makes your life a little bit easier and acts as a nice failsafe. There are some security issues that you need to be mindful of when using TimThumb which can be referenced here and here.
If you do not want to use TimThumb you can of course use WordPress’ built in add_image_size(), but be aware of its limitations. This demo shows you how to use TimThumb in a WordPress slider. If you need further help on implementing a slider using the add_image_size function, please see the WordPress Codex documentation or let us know in the comments below.
Now that we have our slider working, it’s time to put the WordPress pieces into this contraption. Don’t be scared, but let’s have a look at what we’re going to be building and then break it down from there.
Thats not so bad is it? I didn’t think so. We have all of our basic elements present from our original HTML markup, they’re just fancied up a bit. Below is the stripped down HTML markup template that we’re going to be working with and adding our WP and PHP tags into.
Again we have our UL with a class of “.bxslider” and within it is a single list item. Don’t be confused with the HTML markup that we had in our basic example above. When we include our wp_query and loop elements, WordPress will take care of making as many list items as necessary for our selected content. I prefer to wrap my sliders in a container element (“.slider-wrap”) so that I can position it as a block element – yes I know there are other ways to do this, but its how I like to do it.
So we’ve got a div wrapper, an unordered list, and a list item containing two other divs. The first DIV we should talk about is .blog-featured which contains an anchor tag and an image. This will be your container for the Featured image and an anchor tag wrapping that image that links to the featured content destination. The second DIV is .blog-summary which is where our WordPress content excerpt will live. These are both optional pieces, but for simplicity’s sake and just starting out let’s use these elements. Now that we’re happy with our structure, let’s get some meat to put on those bones.
For the sake of this example, we are going to be looking to pull posts from a Category that we’ve created within our WordPress installation called Featured. This means that all posts that have been marked as belonging to the “Featured” category in your dashboard will be displayed. To reference that category in our code we need to perform the query_posts(); function. Above your .slider-wrap div, place the code for the query within PHP tags:
<?php query_posts('cat=2'); ?>
How did we get the number 2 and why does it relate to my Featured category? Extended reference material can be found in the WordPress Codex here . Here’s the easy way: go into your WP Dashboard -> Posts -> Categories and hover your mouse over the Category you want to reference. Each Category (post and page for that matter…) has an ID number associated with it. It can be found within the URL displayed as tag_ID=2.
Now that we have queried the Featured category, lets expand this a bit and limit the number of posts we want to return to three.
<?php query_posts('cat=2&showposts=3'); ?>
With our category queried, we’ll need to start a WordPress loop function with an if statement to return some content. Here is the whole loop structure outside of the slider:
Here is the loop within the structure of our slider markup:
In layman’s terms this says, If the category has posts, while it has posts show them within an unordered list. Endwhile is closing that portion of the statement right before the unordered list closing tag. The bottom section states, If there are no posts (else) show this. After the Else content we close the If statement and reset the Post Data to cycle back through the loop.
TL;DR: If there are posts in the chosen category(s), show them as list items, or else show an error message.
Our loop should be returning content at this point. Since we’ve already covered each of the DIV elements and links within the UL, we can start filling in our desired content. To help with maximizing customization of your slider, I’ve given each list item a reference to the post ID it is containing. This will help you to target the list item should you need to customize it more or reference it later in the loop.
<li <?php post_class(); ?> id="post-<?php the_ID(); ?>">
Next we’ll want to pull some actual content to start playing with. Lets focus on the Featured Image portion of the post content.
As described in the comments of the code above, we’ve linked to the queried post, called our script for TimThumb, grabbed the ID of the featured image, pulled the URL of the ‘Full’ image size, echoed out that URL for the featured image so that TimThumb can manipulate it, and set our TimThumb options. We should now have a properly scaled featured image that links to the referenced post.
To complete our slider, we’ll want to add in an excerpt from the post so that it’s clear to the reader what content they’ll be seeing once they click-thru.
That should do it! You’ve made it to the end and now should have all of the building blocks you need to create a flexible WordPress slider using bxSlider and customize it as much as you want from here.
This is a fairly basic demonstration of the common uses of querying post content and showing it in a slider. bxSlider has plenty of customization options that you may integrate into your own methods. Let us know in the comments below if you have any questions or show off with your own implementation of this example. We would love to see what you come up with. Hopefully this helps you in your quest to a happier plugin-free WordPress experience. Keep an eye out for more tutorials from the Rocket Pop gang!