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

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); }
                });
            });
            </script>
	<?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; ?>
    </div>
<?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;
	width:650px;
	margin: 0 0 50px 0;
	padding-left:0;
	padding-right:0;
	}
#slideshow p{
	margin-top:0;
	color:#0b486b;
	font-size:14px;
	font-weight:600;
	}
#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;
	font-weight:bold;
	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