Creating a jQuery Slider with WordPress Post Thumbnails

  • follow us in feedly
Published July 29, 2013 by Brad Knutson
Create a jQuery Slide with WordPress Post Thumbnails

We’ve all seen websites that have sliders on their home pages. A few examples from my niche that come to mind are SearchEngineLand and SearchEngineJournal. These sliders are a great way to grab users attention and point them through to your content.

For WordPress, there are a lot of plugins out there that will allow you to dynamically generate a slider with your most recent posts. The problem with this, and the problem with all plugins (in my opinion), is that they add additional processing time on the server for every page load.

I’ve always been a fan of creating a custom solution, and avoiding plugins whenever possible. It reduces the number of queries that need to be run each time a page loads and speeds up page-load time for the end-user.

So with that problem in mind, I came up with a simple demonstration of a jQuery slider using the post thumbnails and post titles using the WordPress loop, bxSlider and a little CSS.

Skip to the demo

jQuery and Scripts

For this example, I’ve decided to work with bxSlider. Head over to their site and download the source code and upload it to your server. bxSlider is free for unrestricted use. It comes with tons of options and is really easy to work with.

Assuming you already have jQuery linked in your header, we’ll now need to add a link to the bxSlider script and the stylesheet. You certainly could combine the script and styles with other javascript files or stylesheets that you already have, but for this example, I’ll keep them separate. Add the below code to the head of your page.


<link rel="stylesheet" href="path/to/bxslider/jquery.bxslider.css" />
<script type='text/javascript' src='path/to/js/bxslider/jquery.bxslider.js'></script>
<script>
jQuery(document).ready(function() {
jQuery('.bxslider').bxSlider({
  adaptiveHeight: true,
  mode: 'horizontal',
  captions: true,
  auto: true,
  useCSS: true,
  easing: 'ease-in',
  pager: false
});
});
</script>

The settings for the bxSlider() function are specific to my example. I set adaptiveHeight: true, because not all of my post thumbnails are the same height. You can customize your slider by looking at the options available for bxSlider here.

PHP

Add this code to the appropriate page template (your home page template for example). All we’re doing is looping through our posts and grabbing the URL of the thumbnail image (or featured image) and the post title, then structuring them in a list so that our jQuery script can handle them properly.

$content = '<ul class="bxslider">';
$loop = new WP_Query( array( 'post_type' => 'your_post_type', 'posts_per_page' => 10, 'post_status' => 'publish', 'orderby' => 'date', 'order' => 'DESC' ) );
	while ( $loop->have_posts() ) : $loop->the_post();
		$thumb_id = get_post_thumbnail_id();
		$thumb_url = wp_get_attachment_image_src($thumb_id,'full', true);
		$content .= '<li><a href="';
		$content .= get_permalink();
		$content .= '"><img src="';
		$content .= $thumb_url&#91;0&#93;;
		$content .= '" alt="';
		$content .= get_the_title();
		$content .= '" /></a></li>';
	endwhile;
$content .= '</ul>';
echo $content;

You could actually package this as a shortcode as well, and place it wherever you see fit.

function thumb_slider_shortcode() {
	$content = '<ul class="bxslider">';
	$loop = new WP_Query( array( 'post_type' => 'your_post_type', 'posts_per_page' => 10, 'post_status' => 'publish', 'orderby' => 'date', 'order' => 'DESC' ) );
		while ( $loop->have_posts() ) : $loop->the_post();
			$thumb_id = get_post_thumbnail_id();
			$thumb_url = wp_get_attachment_image_src($thumb_id,'full', true);
			$content .= '<li><a href="';
			$content .= get_permalink();
			$content .= '"><img src="';
			$content .= $thumb_url&#91;0&#93;;
			$content .= '" alt="';
			$content .= get_the_title();
			$content .= '" /></a></li>';
		endwhile;
	$content .= '</ul>';
	echo $content;
}
add_shortcode('thumb_slider', 'thumb_slider_shortcode');

If you run a site that doesn’t include thumbnails for every post, then you’ll need to add a conditional check to make sure the post has a thumbnail.

if ( has_post_thumbnail() )

The Output

The above code generates a formatted list of post thumbnail images. Here is the output that I get before I published this post (after I publish it, the very first item in the list will be the thumbnail for this very post).


<ul class="bxslider">
<li><a href="http://bradsknutson.com/blog/yelp-beyond-the-listing/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/yelp-beyond-the-listing.jpg" alt="Yelp: Beyond the Listing" /></a></li>
<li><a href="http://bradsknutson.com/blog/schema-org-markup-for-small-businesses/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/schema-org-markup-for-small-businesses.jpg" alt="Schema.org Markup for Small Businesses" /></a></li>
<li><a href="http://bradsknutson.com/blog/how-to-increase-facebook-page-likes/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/increase-facebook-likes.jpg" alt="How To Increase Facebook Page Likes" /></a></li>
<li><a href="http://bradsknutson.com/blog/tracking-mailchimp-conversions-google-analytics/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/mailchimp-and-google-analytics.jpg" alt="Tracking MailChimp Conversions in Google Analytics" /></a></li>
<li><a href="http://bradsknutson.com/blog/simple-kred-api-example/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/kred-api-example.jpg" alt="Simple Kred API Example" /></a></li>
<li><a href="http://bradsknutson.com/blog/introducing-my-social-authority/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/my-social-authority.jpg" alt="Introducing: My Social Authority" /></a></li>
<li><a href="http://bradsknutson.com/blog/using-instagrams-api-create-image-gallery/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/instagram-gallery-api.jpg" alt="Using Instagram&#8217;s API to Create an Image Gallery" /></a></li>
<li><a href="http://bradsknutson.com/blog/css-social-ribbons/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/css-social-ribbons.jpg" alt="CSS Social Ribbons" /></a></li>
<li><a href="http://bradsknutson.com/blog/creating-a-custom-404-page-in-wordpress/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/07/custom-404-page-wordpress.jpg" alt="Creating a Custom 404 Page in WordPress" /></a></li>
<li><a href="http://bradsknutson.com/blog/spice-up-web-design-with-google-fonts/" ><img src="http://bradsknutson.com/wp-content/uploads/2013/06/google-web-fonts.jpg" alt="Spice Up Web Design with Google Fonts" /></a></li>
</ul>

The Result

I modified the styles slightly, but you could style the slideshow however you’d like. Get creative with it!

  • SEO Mystery
  • Easily Manage Twitter #Hashtag Contest with Zapier
  • CSS Button With Sliding Information
  • It’s Not a Sprint, It’s a Marathon: Content Marketing 101
  • A 4 Month Hiatus From Blogging
  • Google Partners Presentation Suggests Asking for Positive Google+ Reviews, Among Other Bad SEO Practices
  • How to Add Different Sidebar Content For Each Page in WordPress
  • Improve Social Conversions with Snip.ly
  • What Will SEO Look Like in 2018? 1 Year Follow Up
  • You Don’t Need jQuery
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

4 thoughts on “You Don’t Need jQuery

  1. Paul

    Many people seem to forget one of the original main reasons javascript frameworks like jQuery were created: cross-browser compatibility. Sure, document.getElementById() is a safe example, but how about getElementsByClassName()? I personally have to make sure code works for IE8 and found out IE8 does not even support that method, but found out you CAN use the alternative querySelectorAll(). This is just one example and I’m sure there are many, many others leading to continuously browsing caniuse.com.

    Here’s a hypothetical. So eventually you write some if else blocks in your javascript code to do conditional calls per web browser. Maybe you go one step further and decide to refactor those blocks into their own functions and create a file that contains all these browser-check functions. What you’ve already started to create is your own home-brew javascript framework. But I can guarantee you the one the guys at jQuery wrote is more feature-rich and cross-browser compatible than anything you could attempt to write.

    Well anyways, I should mention that I’m partially playing devil’s advocate here. I personally try to use vanilla javascript wherever I can, but there are always cases where jQuery just does exactly what you want with a tenth of the code, and the decision to remove jQuery altogether is just too drastic. With technologies like gzip’ing content and asset compilation, these size problems almost become a non-issue. Regardless, I’m glad this article was written as some people DO need a wake-up call when it comes to their reliance on javascript frameworks.

    Reply
    1. Brad Knutson Post author

      Paul,

      You make all valid points. In Josh’s presentation, he did cover specific use cases where jQuery would still be necessary. One of those use cases was supporting older versions of Internet Explorer. It’s a shame that such a significant chunk of users prefer IE8, or even IE7 or 6. At one of my previous jobs (granted, this was 5+ years ago) the company was forced to use IE6 because of a web-based software we used that wasn’t supported in any newer version of IE. In cases like this, I would absolutely go with jQuery, because as you stated, the jQuery folks have spent years developing a cross-browser compatible framework that covers use cases we didn’t even know existed.

      Josh mentioned it in his talk, and I tend to agree with the idea – jQuery covers so many infinitely small use cases of browser/OS configurations, and because of it the library is bloated. Unless you’re running a website that gets hundreds of thousands or millions of hits a day, you’ll probably be fine ignoring those extremely small percentages of users. Josh said something along the lines of “if they are using an old version of Chromium on an outdated version of Linux and my Javascript is broken in your browser, then a lot of the internet is probably broken for you, and you’re used to it.”

      Josh was also kind enough to provide his own framework of sorts of commonly used JS functions to replace what he would have normally used jQuery for. It’s a great resource. https://github.com/joshbroton/you-dont-need-jquery/blob/master/demo/js/not-jquery.js

      Thanks for commenting Paul! I’m always up for different takes!

    2. Josh Broton

      Paul, good thoughts, and mostly on. But a couple of things to consider:

      1. Using jQuery doesn’t mean less code. It means YOU write less code, but in reality, the browser parses and executes 120KB of (unminified and ungzipped) JavaScript before it even gets to your code. TJ Van Toll said that jQuery 2 (the fast and lean one) takes 1100ms to parse and execute in older versions of the Android browser. When most of what people use it for is .addClass, .appendTo, and .ajax, that’s a completely unacceptable performance penalty.

      Also, .getElementByClassName is a bad example. .querySelectorAll uses CSS selectors (just like jQuery), and also works back through IE8. It’s also ~100x faster querying the DOM for elements than jQuery’s, EVEN THOUGH JQUERY USES IT BEHIND THE SCENES.

      2. You should NEVER be querying for the browser. 100% of your client tests should focus on functionality/capabilities. There are dozens of plugins that can change a user agent string in 10 seconds, and extensions/plugins, etc all change a browser’s capabilities.

      Simply if else it…

      var addListener = function(element, event, callback) {
      if(element.attachEvent) {
      element.attachEvent("on" + event, function() {callback.call(this);});
      } else if(element.addEventListener) {
      element.addEventListener(event, callback, false);
      }
      };

      There’s your functionality test and appropriate code inside the if else.

      3. Native/VanillaJS functions that have been introduced in the last couple of years were directly inspired by the syntax of jQuery. That’s why they are so similar.

      $(selector) -> document.querySelectorAll(selector)
      el.addClass(‘newclass’) -> el.classList.add(‘newclass’)
      el.on(‘click’, callback) -> el.addEventListener(‘click’, callback)

      Once you get the hang of it, and if you’re not supporting old browsers, it’s actually quite easy.

      Hope that helps!

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">