Creating Featured Slider in Wordpress Theme using JQuery s3Slider

Featured Slider is considered as one of the hottest elements on a website, the trend of using the slider effects continued each year. JQuery which has becomeÂ WordpressÂ prominent javascript framework shows many love to sliding effect and this tutorial will guide you through one of them; the JQuery s3Slider.

View the HTML demo in here to see what weâ€™re trying to create.

What You Need

JQuery. Get the latest JQuery download and place it inside your wordpress theme, you might create a new folder for it as well.

s3Slider.js. You can download the script in here and place it on the same folder as above.

Step 1: Modify Your Theme header.php file

I would assumed that your theme didnt have JQuery linked inside the header file, so you will need to link both files between the HEAD tag like these;

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/s3Slider.js”></script>

Activate the s3Slider by placing this script after both lines;

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#slider’).s3Slider({
timeOut: 3000
});
});
</script>

you can modify the fade out speed by changing the timeout variable.

Step 2: Set up your Featured Slider Section

Try to locate where do you want to place the featured slider section, it could be in your header.php or other files, then start building the layer:

<div id=”slider”>

<ul id=”sliderContent”>
<li class=”sliderImage”>Â <img class=”featimg” src=â€” alt=” />
<span class=”top”>Text to appear/ caption<span></li>
</ul>

</div>

This is the ground code of the html tag for using the s3Slider.

Now letâ€™s apply it on wordpress theme.

<div id=”slider”>

<ul id=”sliderContent”>
<?php
$my_query = new WP_Query(‘category_name=featured&showposts=3′);
while ($my_query->have_posts()) : $my_query->the_post();
?>
<li class=”sliderImage”>Â <img class=”featimg” src=â€<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>”Â />
<span class=”top”><?php the_excerpt(); ?><span></li>
<?php endwhile; ?> </ul>

</div>

As you can see we have place wordpress magic inside,

$my_query = new WP_Query(‘category_name=featured&showposts=3′);

This line will retrieve 3 posts from category named featured.

<img class=”featimg” src=â€<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>”Â />

This line will get the image from your posts, you need to add custom field in your posting named â€˜thumbâ€™.

<span class=”top”><?php the_excerpt(); ?><span></li>

You can also use text from your post excerpt to appear on the featured slider.

Step 3: Add CSS styling for the slider

This styling is necessary to make your slider works.

#slider {
width: 150px;
height: 150px;
position: relative;
overflow: hidden;
}

.sliderImage span {
position: absolute;
width: 150px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}

All the properties on slider tag are important, you will also need to make sure all the images youâ€™re using is the same width & height with the css definition. the .sliderimage span property is used for slider caption/text.

Step 4: Extra-Using Timthumb for imageÂ automatic scale

It might take you some extra time to make sure all the images you upload for the featured slider are having the same scale especially if your featured slider are regularly updated. Using automatic image rescaling is the option.

You could use the famous timthumb script build by Darren Hoyt. To make this magic happen you need to

Download the timthumb script here.
create a new folder inside your theme name it scripts and place timthumb.php inside, within the folder create another folder named cache.
make the cache folder writable by changing the permission into 777 (chmod 777)
in some web server it might also necessary to make the scripts and timthumb.php folder into 755.

Step 5: Extra-Apply the timthumb script for your images

modify this line:

<img align=”right” class=”featimg” src=â€<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>” alt=”<?php the_title(); ?>”Â />

into

<imgÂ class=”featimg” src=”<?php bloginfo(‘template_directory’); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, “thumb”, $single = true); ?>&h=150&w=150&zc=1″ alt=”<?php the_title(); ?>”Â />

the script will make automatic thumbnail for your images with 150×150 size (modify it to fit your need).

and thatâ€™s it you will have a smooth featured slider for your website.

Tags: featured slider, jquery slider, wordpress slider, wordpress tutorial

Top

55 Responses to “Creating Featured Slider in Wordpress Theme using JQuery s3Slider”

Cokeramirez May 13, 2009 at 2:44 am

I’ll try this, thanks!
Justin May 17, 2009 at 11:26 am

Hello,

I was wondering if you could help add next and previous buttons to this tool on wordpress?
Coloradocolin May 22, 2009 at 11:56 pm

Just curious, I set this up on my site, but the last slide isnt playing. Any ideas?
Coloradocolin May 23, 2009 at 12:02 am

Solved it. You need to add:

.clear {
clear: both;
}

to your style sheet and then add: before you close your list, then your last slide will play.
Coloradocolin May 23, 2009 at 12:03 am

Oops, the code didnt display. Here it is again:
ivan May 23, 2009 at 11:12 pm

@Coloradocolin
yes, we need to add those on css file.

thanks a lot
Justin May 28, 2009 at 3:57 am

are you sure this script is 100% right?

$(document).ready(function() {
$(â€™#sliderâ€™).s3Slider({
timeOut: 3000
});
});

for one the quotation marks are not standard characters so I changed those but this is still giving me an error in IE.

here’s the location I’m trying to set it up … it’s the 700×250 image milesbonny.com.s63937.gridserver.com

Please help
V,C May 28, 2009 at 11:55 am

It’s seem to be hard to create featured content slider.
I can’t find S3slider anywhere.
se reed June 2, 2009 at 9:49 am

for me, the header would show, but wouldn’t slide. i was unsuccessful at fixing it!
SR June 2, 2009 at 9:51 am

or me, the header would show, but wouldnâ€™t slide. i was unsuccessful at fixing it!

p.s. if you could, would you remove that previous comment? didn’t mean to put my name.
Ehab A. Mohammed June 21, 2009 at 5:58 pm

Thank You =)
V.C July 13, 2009 at 4:05 pm

Thank your for that tips.
Could you show me how to add the button 1, 2, 3,… to that slide content?
Abu Farhan July 16, 2009 at 6:54 pm

Can I use directly to the wordpress that already use plugin with jquery ?
Can you show demo directly to wordpress ?
Livio July 24, 2009 at 1:45 am

no images are coming in slide what do we have to make separate directory to call the images
invoke July 29, 2009 at 5:48 am

Hi there,

Trying to set up the code into wordpress for flash at the top in the header. Getting confused as to where to put the code in the files already there and when you create new ones and how they all link together and where.

My images arent showing up.

Any help appropriated
Greg August 5, 2009 at 10:52 pm

I haven’t implemented this yet, so I’m just taking a blind stab at helping anyone having trouble seeing the images–

For your post, you need to create a new meta-data field called “thumb”. The field needs to be populated with a URL. You COULD just have a directory with images, but more likely you’ll use Wordpress’s uploader to upload an image to the post. But you don’t need to insert it into your post (if you don’t want to), it’ll just be an image that’s considered part of the post. In the gallery, “Show” the photo, and then copy the URL. Close the uploader, and paste this URL into the “thumb” meta-data field.

Now when the PHP iterates, it will look for a meta-data field in your post called “thumb”, and extract the URL you pasted. This becomes the image URL.

—

My question:

Like others above, I’m looking for next/prev arrows, as well as the slider to stop auto-sliding once one of those navigation links is clicked. Featured Slider v2 would be great!
Lascelles Clarke August 28, 2009 at 11:43 pm

Please say how to implement Featured Slider in Joomla 1.5.

Thanks
Yesar Almaleki September 5, 2009 at 4:36 pm

Thanks for the amazing tutorial , can I add this slider in the same manner to the BORNEO Joomla theme? or will it need more tweaking?
Pat September 11, 2009 at 6:52 am

I get a “Parse error: parse error, unexpected ‘=’ in” with ‘$my_query = new WP_Query(â€™category_name=featured&showposts=3â€²);’
darien September 11, 2009 at 12:09 pm

I’ve got the same parse error as Pat.
Spencer September 13, 2009 at 3:07 am

Thanks for this, worked a treat, spent a few minutes wondering why only the first span came up, and there is a small problem with the code example, the span for the excerpt isn’t closed, 2 opening spans, just in case anyone gets the same problem
devtolu September 24, 2009 at 3:22 pm

hello all, i used s3slider on a html page and i could see my pictures scroll but when i save the page as .php the images dont display what could be happening.

why is the php page not displaying my images.
Kortschot October 19, 2009 at 4:27 pm

Hi,

Nice script, all though some errors.

in the php’s â€ and â€™ are used, this is not correct, should be ” and ‘.

On the s2slider’s page is the right code. This is my code, it works on IE to.

have_posts()) : $my_query->the_post(); ?> <a href=""><img class="featimg" src="ID, "thumb", $single = true); ?>" alt="" />

Style:

#s3slider { width: 536px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ margin-bottom: 10px; }
#s3sliderContent { width: 400px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0; /* important */ height: 300px; } #s3sliderContent a:link, #s3sliderContent a:active, #s3sliderContent a:visited { text-decoration : none; } #s3sliderContent a:hover { text-decoration : underline; } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ height: 300px; } .s3sliderImage span { position: absolute; /* important */ left: 0; font: 11px 'Lucida Grande',Arial,Helvetica,sans-serif; padding: 10px 13px; width: 510px; background-color: #000; filter: alpha(opacity=80); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ bottom: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ }
.clear { clear: both; }

Hope it helps.

Paul
Kortschot October 19, 2009 at 4:28 pm

sorry, the php did not post correctly, here again:

‘

have_posts()) : $my_query->the_post();
?>
<a href=”"><img class=”featimg” src=”ID, “thumb”, $single = true); ?>” alt=”" />

‘
Kortschot October 19, 2009 at 4:29 pm

sorry Ivan…

ill try a blockquote…

have_posts()) : $my_query->the_post();
?>
<a href=”"><img class=”featimg” src=”ID, “thumb”, $single = true); ?>” alt=”" />

hope this works, was my last try. otherwise inspect my source
robert November 5, 2009 at 12:59 am

Looks like no one can figure out that pasting code here DOESN’T WORK. I need help with why the last image won’t show up, the person who posted a fix got their code cut off!!!
eta muhasebe December 7, 2009 at 8:48 pm

is there any simple for this example ?
Ä± didnt found
ireng_ajah December 30, 2009 at 5:08 pm

Nice tutorial but if you can show it with demo live i think more better
keith January 23, 2010 at 4:02 pm

I had a problem with the caption not showing up after the first picture and realized that the code for the caption should be

also if you want the caption on the right or left you can create a class as such and add this to the css

.right {
right: 0;
bottom: 0;
width: 160px !important;
height: 435px;
}

I got a version of the plug in working on my demo site
keithkeslerdesign.com/blog
keith January 23, 2010 at 4:06 pm

sorry the code didn’t show up. what you need to do is close the span element with a backslash instead of leave it open like is shown in the tutorial.

instead of
squad January 29, 2010 at 3:34 am

very nice tutorial…i tried it out so far but i only have one image showing.No sliding.I’m working on my local server so you cant take a look on my site.I correctly changed the directory to the .js files, i copied and pasted the other codes as shown,added the content field on every post.Could anyone please tell me what i’m doing wrong and why the plugin isnt sliding?Thanks!!
squad January 29, 2010 at 3:41 am

<script type="text/javascript" src="/jquery/jquery.js"> <script type="text/javascript" src=â€/jquery/s3Slider.js">
squad January 29, 2010 at 3:43 am

well i tried to post the linking of the js.files in the header right above…didnt work.does anyone have a clue where the problem is?
squad January 29, 2010 at 5:49 am

solved it.the directory path to the js.files was wrong
v February 5, 2010 at 9:18 am

This is crap. Doesn’t work. I’m sick of amateur tutorial – waste of time..
Coder February 18, 2010 at 11:46 pm

This really is a terrible tutorial..and the author hasn’t even followed up on any of the issues. Complete waste of time.
Ekozul June 15, 2010 at 1:54 pm

nice tutorial, thanks,,
doris July 15, 2010 at 7:03 pm

Nice tutorial but if you can show it with demo live i think more better
ash July 21, 2010 at 10:52 pm

Will this also retrieve posts that belong to multiple categories along with featured like featured, sports, etc? or posts only belonging to featured category?