Genius is nothing but great effort applied. – Awa Kenzo

How To: Create a Featured Content Slider

There are a stack of plug-ins out there which use a mess of Java and jQuery to do what you could do in 50 lines or less. Creating a Featured Content Slider is easy when you take advantage of a Sub-Loop, Template Tags, TimThumb, and a little bit of jQuery inside the Thesis Theme.

Here is all the code:

custom.css

/* Featured Content Slider
------------------------------------------------------------ */
#slideshow {
     height: 250px;
     width: 660px;
     margin: 0 0 10px 0;
     overflow: hidden;
}

.nav {
     margin: 0;
}

#nav a {
     position: relative;
     top: 235px;
     left: 565px;
     color: #000;
     margin: 0;
     padding: 3px 5px;
     border: 1px solid #000;
     background: #FFF; /* sets the bg color of the nav box */
     text-decoration: none;
     z-index: 9999;
}

#nav a.activeSlide {
     background-color: #FD0000; /* sets the bg color of the nav box when active */
}

#nav a:focus {
     outline: none;
}

Anywhere in custom_functions.php

// Featured Content Slider jQuery
function fcs_scripts_html() {
?>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/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 }
add_action('thesis_hook_after_html','fcs_scripts_html');

// Image Grabber (Tim Thumb)
function grabImage() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	return $first_img;
}

Thesis Hook: Before Post (or anywhere you want the Featured Content Slider to show up)

<div id="slideshow">
<?php $sub_loop_1 = new WP_Query("cat=6&showposts=5");
while ($sub_loop_1->have_posts()) : $sub_loop_1->the_post(); ?>
	<a href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/lib/scripts/thumb.php?src=<?php echo grabImage(); ?>&amp;h=250&amp;w=660&amp;zc=1&amp;q=75" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /></a>
<?php endwhile; ?>
</div>

How to use it:

  1. Place the CCS in custom.css
  2. Place the jQuery & PHP into custom_functions.php
  3. Place the Slideshow code anywhere in your content, into any Thesis Hook (maybe thesis_hook_before_post), and even a custom page template
  4. Change (“cat=6&showposts=5″); to match a Category ID and desired post count
  5. Check “jQuery” in Thesis –> Design Options –> Javascript (see image)
  6. Create a new post, upload/add at least one image 660×250 pixels

Let’s get technical

So far we’ve used 46 lines of code…pretty impressive considering the leading Featured Content Slider plug-in is over 1,000 lines of code, weighs 684KB, and is only compatible up to WordPress 2.7.1! (Uhh, WordPress 3.1 is out!)

What I’ve done is really simple:

  • Used CSS to style
  • Used jQuery to create the “effects”
  • Used a Sub-Loop to grab the post data
  • Used Template Tags to print the post data
  • Used TimThumb (already included in Thesis) to optimize the images
  • Use PHP to pull the Image Path from the Post

The sub-loop simply queries the database at your direction. You need to specify what category to pull from, which is simple, just change: (“cat=6&showposts=5″); to whatever Category ID it is you want to feature. The template tags will populate the HTML for you.

The jQuery Cycle script has a huge range of options and effects. You can find them here

How do you find the Category ID?

WP Dashboard –> Posts –> Categories

The images don’t show up!?

1. Make sure you uploaded and inserted an image at least 660x250px wide!

2. It’s possible that TimThumb is a blacklisted on your server. (Hostgator) Check with your server administrator to make sure TimThumb is “white-listed”

3. Make sure you’ve checked “jQuery” in Thesis –> Design Options –> Javascript

Site Examples

Greg Rickaby runs on the Genesis Framework

Genesis Framework

The theme you're viewing is the eleven40 Child Theme, which was built on Genesis.

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Comments

  1. Polo says:

    Hi please donate for this site

  2. Marcelo says:

    It seems to ignore the thesis post image!!!

  3. Kevin says:

    is there a update to this for thesis 1.8?

  4. Faiq says:

    Hi! can u tell me how to place it on the homepage

  5. Bill Scheider says:

    Hi Greg,
    I followed this up to step3: Place the Slideshow code into any Thesis Hook (maybe thesis_hook_before_post). I’m kind of new and not sure where exactly this goes or the format to use for the hook. Is this put in custom_functions? Or somewhere else? And is that an add_action().
    Thanks for this! I’ve been for something like this that doesn’t use a plugin all week!
    Bill

  6. Ahmad Wali says:

    How do we get the 660x250px image? The size of the image is different and how do I make it to 660x250px? Thanks for the help.

  7. Storm says:

    Hey Greg,

    This might be what I’m looking for, but is there anyway to add a post excerpt (kind of like a transparent overlay)? Would really like some text, don’t see any in the examples.

    Also are you saying this won’t work, if I’m with Host Gator?

    Thanks

  8. I’ve been trying to get this to work with WordPress MU (upgraded to WordPress 3.0), but I think Tim Thumb is broken. Seems to show the slider ok, but doesn’t pull the images in properly. Any thoughts?

    Thanks,

    -James

  9. BTW – you can see mine in action at http://www.sydenhamsgottalent.com.

  10. Avi D says:

    OMG!! I’m so so sorry about posting this thrice…

  11. Avinash D says:

    A bit of help Greg…I’m getting a parse error when I call the slideshow code which is as under:

    function slideshow_code() {

    have_posts()) : $sub_loop_1->the_post(); ?>
    <a href="”><img src="/lib/scripts/thumb.php?src=&h=250&w=660&zc=1&q=75″ alt=”" title=”" />

    }
    add_action(‘thesis_hook_before_content’,'slideshow_code’);

    The parse error is:

    Parse error: syntax error, unexpected ‘<' in C:\xampp\htdocs\avinashdsouza\wp-content\themes\thesis_17\custom\custom_functions.php on line 222

    which is basically the 4th line of my function above.

  12. That’s a nice compact slider compared to many that I’ve seen, I’m using it on the site linked to my name. One thing I’m interested in though is TimThumb seems to invalidate the code on the w3 validator. I’m aware that in this case it isn’t really an issue as it’s the TT code however it probably won’t look good to clients on the homepage so I may, like Adam, see if I can remove that part from it. Having said all that, thanks again for another great contribution to the world of Thesis!

  13. Hi Greg

    Lovely instructions, thank you! You’ve really nailed the ‘confidence and simplicity angle…’

    I’ve created a custom home page as per your other post, added this in, created a couple of posts with pics in and it’s working! I particularly like that the pics are clickable – is just perfect.

    I am going to look SOOOOOOOOOOOOO clever tomorrow when we all discuss the new website.

    Pen

  14. Doug says:

    Far and away the clearest tutorial I’ve seen on this subject. Well done. Question: Is there a way to run the large images without having to input them full-sized into my posts (e.g. I’d like to insert as thumbnail and have the larger images run in the slider)? Thanks again.

    • Nanette says:

      +1 I am interested in this too.

    • I’ve successfully provided a picture for the slider without showing it in the post at all, by setting the CSS (in the picture’s admin) to “display:none; margin:0″. (If you don’t set the margin you may have a blank area left behind…)

      You can also make the pic any size you want in the post while leaving the slider unaffected by using the resizing option (the 100,90,80 list) within the picture admin.

  15. Is it possible to make this work with pages?

  16. Doug says:

    Makes me nervous when the first comment I read says “This is so easy!” so…
    ***basic question alert***
    Just starting in thesis – came across this tutorial – trying it out on a local install and got stuck with… place jQuery above – I can’t find where thesis starts/ends the head code and/or where I should be inserting your adjustments (theme files editor in wordpress dashboard? custom file editor in thesis?).

    Thanks for your patience and help for a beginner.

  17. Barbara D says:

    This is so easy! Your instructions are so clear!

    I’m just stuck at one point.

    Parse error: syntax error, unexpected ‘<' in /mnt/w0010/d42/s36/b02a4381/(my site)/wp-content/themes/thesis_17/thesis_17/custom/custom_functions.php on line 32

    Line 32 appears to be the command

    What have I done wrong? Thanks

  18. Mitch says:

    Nicely done Greg.. lots of jquery options can be used with that too.

  19. Nanette says:

    Any tips to put this into a sidebar at 250px wide?

  20. Norcross says:

    Great tutorial, but I’m running into an issue I can’t seem to resolve. I changed the code to look for a tag (featured) instead of a category, but otherwise kept it as-is. For some reason, it’s not pulling the jQuery to do the actual sliding. Here’s the site in question. Any ideas?

    http://dev.andrewnorcross.com/epicself/

  21. Avi D says:

    Greg,

    Awesome post!!!I was just gonna set up FCG in my header when I saw this…so much lighter. Just one question…when you said call it anywhere in your content you meant by invoking a function and using hooks right?

  22. eljefe949 says:

    Good man Greg. Saw the tweet where you said this was in the works. Stoked to give it a test drive. Thanks for posting.

    Less Bloat FTW!

  23. Neil says:

    Thanks for a great tutorial Greg.
    I have got it working ok but only for posts inserted into the edit box. It seems to ignore the thesis post image.
    Like Adam, I use a uniform size for post images and would like to use them here but, unlike Adam, I don’t know how.
    I’d be grateful if you’d tell me how to alter the code to do this.
    Many thanks

  24. Adam Baird says:

    Greg,

    This is great stuff. Will definitely use this going forward. The only thing I might do differently is just use the actual Thesis post image rather than TimThumb’ing it…just seems unnecessary to me…but then I use a uniform size for all of my post images and not everyone does.

    • Thanks, and you are right. It’s been my experience (working with all these radio DJ’s) they just blindly “upload and insert”. TimThumb more or less acts as a babysitter to ensure images always look slick on the homepage.

Trackbacks

  1. [...] To make a super-long story short, I taught myself how the custom_functions thingee works, and then came across…. Create a Feature Content Slider in Thesis! [...]

  2. [...] How to Create a Featured Content Slider [...]

  3. [...] Another tutorial by Greg Rickaby Featured Content Slider with out a plugin [...]

  4. [...] 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 [...]

Speak Your Mind

*