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(); ?>&h=250&w=660&zc=1&q=75" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /></a>
<?php endwhile; ?>
</div>How to use it:
- Place the CCS in custom.css
- Place the jQuery & PHP into custom_functions.php
- Place the Slideshow code anywhere in your content, into any Thesis Hook (maybe thesis_hook_before_post), and even a custom page template
- Change (“cat=6&showposts=5″); to match a Category ID and desired post count
- Check “jQuery” in Thesis –> Design Options –> Javascript (see image)
- 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
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.
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
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!
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?
Yes, or you could create a custom homepage template
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/
Any tips to put this into a sidebar at 250px wide?
Nicely done Greg.. lots of jquery options can be used with that too.
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
This:
Is just a comment, delete it and it you’ll be good go!
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.
Doug,
As a beginner, you should try the plug-in: Thesis Open-Hook. When that’s installed, visit ThesisHooks.com. When you’ve seen how the magic of hooks work, come on back and place that jQuery code into the box called, “WP_HEAD”.
…and the fog lifts! I can see clearly now. Thanks.
Doug – there’s no going back :)
Is it possible to make this work with pages?
Figured out how to make it work with pages
Changed the WP Query code to this:
page, ‘post__in’ =>array(64,62,69)); ?>
have_posts()) : $sub_loop_1->the_post(); ?>
Great work Loren, thank you for sharing!
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.
+1 I am interested in this too.
Me three.
Any ideas?
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.
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
w00t! :)
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!
You’re right it wasn’t W3C Valid. I have updated to code so that it will validate XHTML 1.0 Strict
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.
OMG!! I’m so so sorry about posting this thrice…
BTW – you can see mine in action at http://www.sydenhamsgottalent.com.
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
Make sure TimThumb is allowed on your server. It’s very common for hosting providers to “Blacklist” TimThumb.
Looks like I kind-of found a fix here: http://www.kristarella.com/2010/05/mod-timthumb-for-wpmu-and-thesis/
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
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.
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
Hi! can u tell me how to place it on the homepage
is there a update to this for thesis 1.8?
All the sites you see in the examples above are running Thesis 1.8
It seems to ignore the thesis post image!!!
Hi please donate for this site
Ok