Wordpress Featured Post Slideshow

Wordpress Featured Post Slideshow Thumbnail Image

This post over at NETUTS a long time ago received a lot of comments that it was not animated. I thought it would be neat if I could figure out a way to animate it and now several months later, when I was working on the new theme I got around to it. I’ll show you how to

  1. use wp_enqueue_script to load the Jquery that is packaged with Wordpress.
  2. go over how Jquery Cycle works and make The Loop generate the necessary XHTML
  3. make a custom query to load only the posts we want
  4. configure Jquery Cycle to run the slideshow

1. Enqueue Jquery

The first thing you want to do is to get Jquery to load Wordpress comes with a version of Jquery included so its generally best to load that> The function to load javascript libraries and plugins is wp_enqueue-script. The code to load the jQuery and the jQuery Cycle plugin is below

<?php wp_enqueue_script('jquery.cycle.all.min','/wp-content/themes/upsidedowncity_v_3/jquery.cycle.all.min.js',array('jquery')); ?>
<?php wp_enqueue_script('jquery_script','/wp-content/themes/upsidedowncity_v_3/jquery_script.js'); ?>
<?php wp_head(); ?>

You place this code right above the “wp_head();” line your header.php file. The first wp_enqueue_script calls JQuery cycle which has been uploaded in to my current theme folder. The first section is the name of the script (file name minus the .js) then the path to the script then the array holds the libraries that the script depends on (JQuery in this case).

The next wp_enqueue_script calles “jquery_script” which is the .js file where we can place all of our jquery.

How Jquery Cycle Works

Jquery Cycle is a jquery plugin build for slideshows. To make it work you give it an element and it turns every child of that element into a slide. so to make our slideshow work we need to have a div with some children and in those children will be out images and headers.

So we need to make a containing div with unordered lists that hold 3 images and links. These ULs are the “slides ” Not the LIs.

The Code

Don’t get overwhelmed by the next code block. I’ll go over it.

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
32
33
34
35
36
37
38
39
40
41

<div id="featured_posts" class="clear">
<a class="prev"></a>
 
<div class="slide_cont">
 
<?php 
$containter = 1; 
$display = 1;
?>
 
  <?php $my_query = new WP_Query('category_name=featured');
  while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
<?php
if (($containter == 1) and ($display >= 4)) {
	echo "<ul class='slides' style='display:none;'>";
	} elseif  ($containter == 1) {
 	echo "<ul class='slides'>"; 
	} else {}
?>
 
<li>
	<h3 class="long"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<a href="<?php the_permalink() ?>"><img width="260" height="120" src="<?php $values = get_post_custom_values('featured'); echo $values[0]; ?>" alt='<?php the_title(); ?> Thumbnail Image' /></a>
</li>
 
<?php 
$containter++; 
$display++;
?>
 
<?php
if ($containter >= 4) {
echo "</ul>"; $containter = 1;} else {}
?>
 
		<?php endwhile; ?>
</div> <!-- end #slide_cont -->
 
<a class="next"></a>
</div> <!-- end #featured_posts -->

Right, Starting at the top on line 1 we begin a div to wrap this whole section with, we also end this div on line 41.

On line 2 we make an empty anchor tag and give it a class of “prev” this will be the button that make the slideshow go to the previous slide. There is also another anchor with a class of “next” right before the featured_posts div closes.

Lines 6-9 make 2 php variables called “container” and “display” later we will use these variables to control when to make our slide containers.

11-12 creates a new wp_query and tells to get everything from the category called “featured”. If you want your slides to be from a different category you can change that here. This also starts The Loop and everything from here until line 37 will repeat for every post in the “featured” category.

14
15
16
17
18
19
20

<?php
if (($containter == 1) and ($display >= 4)) {
	echo "<ul class='slides' style='display:none;'>";
	} elseif  ($containter == 1) {
 	echo "<ul class='slides'>"; 
	} else {}
?>

This is code that generates the wrappers around our slides. it uses the variables from lines 6-9. Lines 15-16 say if container is equal to 1 and display is equal to or greater then 4, make an unordered list with “display:none;”. You need to have display:none; because otherwise users will see all the slides while the document is still loading and then they all get hidden.

The next 2 lines say if the above test fails (i.e. container is not equal to 1 and display is not equal to or greater than 4) to check if container if equal to 1 if it is them make an unordered list.

If both these test fail nothing happens.

Lines 22-25 generates the header and the images for each post. You can add the images inthe custom field section in the wordpress write panel by putting a path to image as the value and the key as “banner”. For more information you can visit

The PHP chunk on lines 27-30 tells php to add 1 to the value of both of out variables you will see why later.

32
33
34
35

<?php
if ($containter >= 4) {
echo "</ul>"; $containter = 1;} else {}
?>

The above php checks the “counter” variable and if it is equal to or greater then 4 it ends the unordered list that was started above when the UL was started. Then it resets container to 1 so a new list will start next time we go through the loop. If counter is not equal to or greater then 4 it does nothing.

How it works

Here is a visual flow for how the above loop should work.

  1. The Loop Starts.
  2. The first “if” statement fires counter is equal to 1 so a visible UL is made.
  3. An image and link are generated
  4. Display and container now equal 2
  5. the second “if” statement is checked container equal 2 so nothing happens
  6. The first “if” statement fires container and display equal 2 so nothing happens
  7. Another image and link is made
  8. Display and container now equal 3
  9. the second “if” statement is checked container equal 3 so nothing happens
  10. The first “if” statement fires container and display equal 3 so nothing happens
  11. Another image and link is made
  12. Display and container now equal 4
  13. the second “if” statement is checked container equal 4 so our first 3 links and images are wrapped in a UL. Counter now equals 1
  14. The first “if” statement fires container equals 1 and display equals 4 so a hidden UL is made
  15. An image and link are generated
  16. Display equals 5 and container equals 2
  17. Ect…

What we have now is a DIV that contains unordered lists. each list contains a set of three posts

Make Cycle Work With Our Loop

Now we have our loop configured and it is generating XHTML like the following.

<div class="slide_cont">
<ul>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
</ul>
<ul>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
	<li><!--Loop Stuff --></li>
</ul>
</div>

Now in the jquery_script.js file in out theme folder we can insert the following example from the Cycle documentation.

jQuery(document).ready(function($) {
$('.slide_cont').cycle({
    fx: 'scrollDown'
});
});

Notice that I did not call JQuery with the $ shortcut. By default the jQuery included with wordpress uses jQuery.noConflict( ) so it does not interfere with the Prototype library. Hence using the different (document).ready(function) is needed. You can read more about noConflict here.

Note I use a slightly different cycle on my web page that adds previous and next controls. and adds several other parameters. I also use CSS buttons to make those empty anchors in the previous and next buttons.

Style Your Slideshow

Cycle works best when you fix all of your elements widths and heights. Below are the styles that I have applied to my sideshow

/*Featured Post Slide Show*/
#featured_posts{
width:960px;
margin-left:-10px;
height:140px;
}
 
#featured_posts h3{
font-size:12px;
width:255px;
}
 
#featured_posts ul{
 
}
 
#featured_posts ul li{
float:left;
margin:0 9px 0;
}
 
.slide_cont{
width:835px;
clear:none;
float:left;
margin:0 17px;
}
 
.slide_cont ul li h3 a, .slide_cont ul li h3 a:hover{
color:#fff;
}
 
.prev{
display:block;
width:35px;
height:75px;
background: url('images/left_arrow.png') no-repeat center;
cursor:pointer;
float:left;
margin:35px 0 0 10px;
}
 
.next{
display:block;
width:35px;
height:75px;
background: url('images/right_arrow.png') no-repeat center;
cursor:pointer;
float:right;
margin:35px 10px 0 0;
}
 
h1, h2, h3, h4, h5, h6{
color:#fff;
background:#000;
font-family:"courier new",courier;
padding:3px 0 3px 5px;
}

That should give you some basic styles to get you started.

Bring it all together

This is where it all comes together. I made my life easy by grouping all of the PHP code for the slideshow in featured_post_slideshow.php and used

<?php include('featured_posts_slideshow.php') ?> <!--Adds Featured Posts -->

At the bottom of my header.php to make it work across every page. Also now would be a good time to check if you have Cycle and jquery_script.js in your theme directory and is the wp_enqueue-script calls are correct and placed above the wp_head(); line in your header.php

If you have any questions leave a comment and I’ll help you out.

This also has some bugs. If the number of posts in your “featured” category isn’t evenly divisible by 3 the whole thing will come crashing to a halt.

Includes featued_posts_slideshow.php, CSS, Images and JQuery.

54 Comments

54 Comments