Creating Featured Slider in WordPress Theme using JQuery s3Slider

By on 20 April 2009 in Tutorial | 113 Comments

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

  1. Download the timthumb script here.
  2. create a new folder inside your theme name it scripts and place timthumb.php inside, within the folder create another folder named cache.
  3. make the cache folder writable by changing the permission into 777 (chmod 777)
  4. 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 thats it, you will have a smooth featured slider for your website.

Our motorcycle gear and jackets provide a real star look to italian leather jackets. Beside this we carry a wide variety of cheap leather jackets and leather flying jackets for men.

Tags: , , ,

113 Responses to “Creating Featured Slider in WordPress Theme using JQuery s3Slider”

Newer Comments »
  1. WP jquery TEST » slider » s3Slider 搭載テスト中 says:
    April 6, 2010 at 11:02 am

    [...] tobacamp　Creating Featured Slider in WordPress Theme using JQuery s3Slider [...]

  2. 分享十五个最佳jQuery幻灯插件和教程 : 冷兵器时代 says:
    March 25, 2010 at 8:18 am

    [...] 官方网站 | 演示 [...]

  3. Coder says:
    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.

  4. v says:
    February 5, 2010 at 9:18 am

    This is crap. Doesn’t work. I’m sick of amateur tutorial – waste of time..

  5. squad says:
    January 29, 2010 at 5:49 am

    solved it.the directory path to the js.files was wrong

  6. squad says:
    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?

  7. squad says:
    January 29, 2010 at 3:41 am


    <script type="text/javascript" src="/jquery/jquery.js">
    <script type="text/javascript" src=”/jquery/s3Slider.js">

  8. squad says:
    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!!

  9. keith says:
    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

  10. keith says:
    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

  11. Think2free.com » 15 exceptional jQuery photo gallery and slider plugins says:
    January 7, 2010 at 9:10 pm

    [...] Theme using JQuery s3Slider | Official Website | [...]

  12. ireng_ajah says:
    December 30, 2009 at 5:08 pm

    Nice tutorial but if you can show it with demo live i think more better

  13. eta muhasebe says:
    December 7, 2009 at 8:48 pm

    is there any simple for this example ?
    ı didnt found

  14. WordPress Sliders, Snippets, Dating Ads @ Webmaster Chronic Blog says:
    December 6, 2009 at 7:35 pm

    [...] Creating Featured Slider in WordPress Theme using JQuery s3Slider | Tobacamp Development css sliders in wordpress (tags: webdesign web css jquery wordpress) [...]

  15. links for 2009-12-06 @ Webmaster Chronic Blog says:
    December 6, 2009 at 7:02 pm

    [...] Creating Featured Slider in WordPress Theme using JQuery s3Slider | Tobacamp Development css sliders in wordpress (tags: webdesign web css jquery wordpress) [...]

  16. robert says:
    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!!!

  17. Kortschot says:
    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

  18. Kortschot says:
    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=”" />

    ‘

  19. Kortschot says:
    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

  20. 网页色妓个人网站-网页前端-网页设计 » 15个常用jQuery滑动插件和教程 says:
    October 13, 2009 at 3:40 pm

    [...] 官方网站 | 演示 [...]

  21. Daily Digest for October 7th says:
    October 8, 2009 at 12:49 am

    [...] Creating Featured Slider in WordPress Theme using JQuery s3Slider | Tobacamp Development [...]

  22. 30 Tutorials for Using JQuery in Wordpress | oOrch Blog says:
    September 27, 2009 at 10:56 pm

    [...] Creating Featured Slider in WordPress Theme using JQuery s3Slider [...]

  23. 30 Tutorials Combining Both jQuery and Wordpress says:
    September 26, 2009 at 3:15 pm

    [...] Creating Featured Slider in WordPress Theme using JQuery s3Slider [...]

  24. devtolu says:
    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.

  25. Spencer says:
    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 :)

  26. darien says:
    September 11, 2009 at 12:09 pm

    I’ve got the same parse error as Pat.

  27. Pat says:
    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′);’

  28. Yesar Almaleki says:
    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?

  29. Lascelles Clarke says:
    August 28, 2009 at 11:43 pm

    Please say how to implement Featured Slider in Joomla 1.5.

    Thanks

  30. 30 Tutorials Combining Both Wordpress and jQuery | .::tek3D Weblog::. says:
    August 18, 2009 at 7:37 pm

    [...] Creating Featured Slider in WordPress Theme using JQuery s3Slider [...]

  31. 15个最佳jQuery幻灯插件和实例| Ajax| 前端观察 says:
    August 10, 2009 at 10:32 pm

    [...] 官方网站 | 演示 [...]

  32. 30 Tutorials Combining Both Wordpress and jQuery | huibit05.com says:
    August 9, 2009 at 9:56 am

    [...] Creating Featured Slider in WordPress Theme using JQuery s3Slider [...]

  33. 30 Tutorials Combining Both Wordpress and jQuery : Speckyboy Design Magazine says:
    August 6, 2009 at 11:17 pm

    [...] Creating Featured Slider in WordPress Theme using JQuery s3Slider [...]

  34. Greg says:
    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!

  35. invoke says:
    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

  36. Livio says:
    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

  37. Abu Farhan says:
    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 ?

  38. V.C says:
    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?

  39. Ehab A. Mohammed says:
    June 21, 2009 at 5:58 pm

    Thank You =)

  40. SR says:
    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.

  41. se reed says:
    June 2, 2009 at 9:49 am

    for me, the header would show, but wouldn’t slide. i was unsuccessful at fixing it!

  42. V,C says:
    May 28, 2009 at 11:55 am

    It’s seem to be hard to create featured content slider.
    I can’t find S3slider anywhere.

  43. Justin says:
    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

  44. ivan says:
    May 23, 2009 at 11:12 pm

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

    thanks a lot

  45. Coloradocolin says:
    May 23, 2009 at 12:03 am

    Oops, the code didnt display. Here it is again:

  46. Coloradocolin says:
    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.

  47. Coloradocolin says:
    May 22, 2009 at 11:56 pm

    Just curious, I set this up on my site, but the last slide isnt playing. Any ideas?

  48. Justin says:
    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?

  49. Cokeramirez says:
    May 13, 2009 at 2:44 am

    I’ll try this, thanks!

  50. How To Creating Featured Slider in Wordpress | IndoDX says:
    April 22, 2009 at 10:04 pm

    [...] Read More on this post [...]

Newer Comments »