Content sliders can be fun...

Adding a Featured Content Slider for Thesis (no plugin required)

by Norcross on May 7, 2010

There are a lot of plugins out there that will create a ‘featured content’ gallery. But if you’re anything like me, you don’t like using plugins unless you absolutely have to. I want to thank Greg Rickaby for his tutorial. However, his didn’t quite work for me, so I modified it and changed / added a few things. So let’s roll up our sleeves a bit and do it ourselves. Let’s get started, shall we?

Step 1: Setting The Functions

It’s a personal preference, but I always set my functions in a list at the beginning of my custom_functions.php file. This helps me debug issues, choose load order (when there are multiple functions using the same hook) and if need be, comment out a function without removing the code completely. So let’s do that now.

add_action ('wp_head', 'slider_scripts'); // Adds slider scripts, etc
add_action('thesis_hook_before_content', 'featured_slider'); // Adds featured slider

Step 2: Calling The Scripts

One issue I ran into was using the default jQuery library in Thesis. They load in the footer, and for some reason that didn’t do the job. So I downloaded the libraries and manually uploaded them into a folder I labeled ‘js’ within the custom folder. You’ll need the full jQuery library (found here) and the jQuery Cycle (found here). Then add the function to load them in the wp-head.

    function slider_scripts() {
	if (is_home()) { ?>
            <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/jquery.min.js"></script>
            <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/jquery.cycle.all.2.72.js"></script>
            <script type="text/javascript">
            $(function() {
                $('#slideshow').before('<div id="nav" class="nav">').cycle({
                    fx:     'fade',
                    speed:  '3000',
                    timeout: '3000',
                    pager:  '#nav',
                pause:   '0',
                fastOnEvent: '0',
                    before: function() { if (window.console) console.log(this.src); }
	<?php } }

Step 3: The Slider Function

This is the guts of the feature. It does the following:

  • Determines how it will grab the posts (in the example, it uses the tag ‘featured’)
  • Selects the number of posts it will retrieve, from the most recent going back
  • Pulls the image from the Thesis Post Image field
  • Sets the height, width, and image quality
  • Adds the post title below the post

The function for getting the image
Note: this function is not required to be called in a hook, hence the reason it wasn’t included in Step 1

function grabImage() {
 global $post, $posts;
 $first_img = get_post_meta($post->ID, 'thesis_post_image', true);
 return $first_img;

The Slider itself

function featured_slider () {
if (is_home()) { ?>
    <div id="slideshow">
    <?php $featured_loop = new WP_Query("tag=featured&showposts=5");
    while ($featured_loop->have_posts()) : $featured_loop->the_post(); ?>
        <a href="<?php the_permalink(); ?>" /><img src="<?php echo bloginfo('template_url'); ?>/lib/scripts/thumb.php?src=<?php echo grabImage(); ?>&h=250&w=630&zc=1&q=80" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /><p><?php the_title(); ?></p></a>
    <?php endwhile; ?>
<?php } }

Step 4: Style It

The CSS included can obviously be changed for your liking. A few things to keep in mind:

  • You’ll want to make sure that the height and width under the #slideshow match what you have in the slider function itself.
  • I’ve included some rounded edges on the post numbers on the bottom of the slider
  • Make sure the bottom margin in the #slideshow is big enough to include the post title, otherwise it may get washed out.
#slideshow {
	height: 250px;
	margin: 0 0 50px 0;
#slideshow p{
#slideshow a img{}
.nav {margin: 0;}
#nav a {
	position: relative;
	top: 235px;
	left: 10px;
	color: #ffffff;
	margin: 0 2px;
	padding: 5px 8px;
	background: #0b486b; /* sets the bg color of the nav box */
	text-decoration: none;
	z-index: 9999;
 	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
#nav a.activeSlide {background-color:#ffffff;color:#0b486b; border:1px solid #0b486b; }/* sets the bg colors of the nav box when active */
#nav a:focus {outline: none;}

Editor’s Note: This tutorial was a guest post by Andrew Norcross. He’s a self described “freelancing web monkey” from St. Petersburg, FL. I had the chance to meet Andrew at Search & Social Spring Summit this week and let me tell you, he knows his stuff. I really appreciate Andrew sharing this tutorial with us and if you’re looking for a web developer, WordPress designer, or Thesis guru, he’s your man.

image source: kretyen

{ 5 comments… read them below or add one }

ian harrison July 19, 2010 at 12:56 am

Hi, I have been battling with featured content sliders over the last week and was wondering if i implimented this slider can i then put another one further down the page withou any conflict in scripts.

and if so would i just change the css “slideshow” to “slideshow2” say to style it?

Thanks in advance,


Norcross August 6, 2010 at 7:00 pm

@Ian it’s possible, although you might need to have two copied of the script itself and edit the markup in the 2nd version to avoid conflicts. It’s doable.

David Radovanovic August 10, 2010 at 2:12 pm

Clean and simple slider. Thanks for sharing!

Robert Schrader August 8, 2011 at 6:24 pm

This definitely doesn’t work.

Norcross August 8, 2011 at 6:26 pm

I took a quick look at your site’s source code, and it appears as though you haven’t copied any of the JavaScript files into your theme. That being said, this post is pretty outdated, you may want to look for others.

Previous post:

Next post: