WordPress Featured Post Slider Using jCarousel

by

Having an effective WordPress featured post slider can be a great, functional addition to your site that provides ease of access to your viewers as well as SEO benefits.

Recently I wrote about the importance of having a featured a posts section and what it can do for your SEO tasks, to fill this need initially I used a plugin for a WordPress featured post slider on this site called featured content gallery and while it was effective as a WordPress featured post slider it was bloated, slow and conflicted with many of the other things I wanted to try on my site so I started off on a journey to find the most efficient, fast and clean way to showcase my featured content using a WordPress featured post slider. I searched all over the internet and came up with no WordPress featured post slider that did what I wanted how I wanted to do it so I decided to take matters into my own hand and make my own WordPress featured post slider to accomplish it.

Now that I have my new WordPress featured post slider working on this site I will share how to do it so anyone who is looking for the same type of WordPress featured post slider that I was can find it and benefit from it. I was inspired in part by the way johnchow.com displays his featured posts so I started to look at how he was doing it on his site, which lead me to find jCarousel and the rest is history. Simply follow the steps outlined below and you can use this solution on your WordPress powered site just like I do with my WordPress featured post slider here at AdminDaily.com

To start building your WordPress featured post slider just follow the steps outlined below.

  1. Download jCarousel HERE
    (there has been an update, until I have a chance to check on this please click HERE to download the version that works with this tutorial.)
  2. Extract the zip file and locate the javascript filed named jquery.jcarousel.pack.js and upload it to your server root directory in a folder named js
  3. Create new files and edit your sites theme files as outlined below and as always BACKUP YOUR FILES FIRST

First off, we will make a file named featured.php and place it into your wp-content/themes/your-theme/includes folder, this file will contain the following code, I will explain the functions and parts individually.

At the top of the file, we need to build a container for the WordPress featured post slider, so you have an opening div and the start of an unordered list like so;

[php]
<div id=”featured”>
<ul id=”posts”>
[/php]

below this, we will use a custom WordPress query to gather the posts we want for the WordPress featured post slider, start a counter to keep track of what post number each segment is and then start the loop that will display our posts. In this example, I will be taking the last 5 posts from the Featured category; you can change it to your liking.

[php]
<?php $my_query = new WP_Query(‘category_name=Featured&showposts=5’); ?>
<?php $count = 0; ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php $count++; ?>
[/php]

Continuing on below this, we will include the code that will be used by the loop to display each post, this is again just an example and you can obviously change it around to suit your particular needs. This is what I use in my WordPress featured post slider for my site and it does what I need it to.

As you can see, the above code will query the last 5 posts from the Featured category then display them each by looping using a while statement that is concluded at the end with an endwhile statement, if you want to see what each piece generates look at the page source of my homepage.

[php]
<li id=”post-<?php echo $count ?>” class=”first”>
<a href=”<?php the_permalink() ?>”><img class=”thumb” src=”<?php echo get_post_meta($post->ID, ‘thumbnail’,true) ?>” alt=”<?php the_title(); ?>” /></a>
<h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h3>
<div class=”content”>
<p><?php echo get_post_meta($post->ID, ‘feat_txt’,true) ?></p>
</div>
<div class=”oops”></div>
<a href=”<?php the_permalink() ?>” class=”more-link”>read more &raquo;</a>
</li>
<?php endwhile; ?>
</ul>
[/php]

Finally, we add the last unordered list to the bottom that will display the numbered buttons to click to show the posts in the WordPress featured post slider that are numbered 1 through 5 like so;

[php]
<ul class=”list”>
<li><a href=”#post-5″>5</a></li>
<li><a href=”#post-4″>4</a></li>
<li><a href=”#post-3″>3</a></li>
<li><a href=”#post-2″>2</a></li>
<li><a href=”#post-1″>1</a></li>
</ul>
</div>
[/php]

Click this link to download a ready to go featured.php file for your WordPress featured post slider to save you some time copy/pasting while making your WordPress featured post slider :-)

Simple enough so far right? Now we move on to the edits we need to put in our themes files, first off we will start out with the header.php file. In this file we need to add the jCarousel script that we previously uploaded to the js folder in the site root directory and add the specific function that controls the operation of the WordPress featured post slider on the page. We will also limit this to only the home page to save loading times on pages that don’t use it by simply not including it on those pages by using a if (is_home()) statement at the beginning. To accomplish this, simply place the below code into your header.php file before the closing </head> tag. (obviously change the script src to reflect your domain)

[php]
<?php if ( is_home() ) { ?>
<script src=”http://your.com/js/jquery.jcarousel.pack.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function mycarousel_initCallback(carousel) {
jQuery(‘#featured .list li a’).bind(‘click’, function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery(document).ready(function() {
jQuery(“#posts”).jcarousel({
wrap: “both”,
auto: 10,
scroll: 1,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
<?php } ?>
[/php]

Next, we include the featured.php file wherever you wish to show the WordPress featured post slider within your template files using a php include statement like so:

[php]<?php include (TEMPLATEPATH . ‘/includes/featured.php’); ?>[/php]

You will likely want the featured.php file to be included on your index.php theme file, but you are more than welcome to adjust and style to your taste.

Now that we have the files uploaded, the needed edits made and things ready to roll, we just need to add the styling elements to our themes css file to make the WordPress featured post slider fit the site properly and look nice and professional, this is the part that needs the most attention. The code I am putting here is what I have used on my site to get my WordPress featured post slider to display how I want, you will need to edit it to suit your needs unless you just happen to have the same width available and want to use the same colors I have on my site. Another note on this, you will want to check this over for any conflicting entries to make sure none of this will mess up the existing layout of your site (just change the names in the featured.php and css file if you need to)

[css]
#featured {
width:100%;
height: 199px;
margin:0 0 25px;
font:1.25em/1.5 georgia,serif;
overflow: hidden;
}

#featured:after {
content:”.”;
display:block;
height:0;
font:0/0 serif;
clear:both;
visibility:hidden;
}

#featured h3 {
font:1.47em/1.1 georgia,serif;
margin:0 0 10px;
color:#1e1e1e;
}

#featured h3 a {
color:#4a8393;
}

#featured h3 a:visited {
color:#4a8393;
}

#featured h3 a:hover,

#featured h3 a:focus {
text-decoration:underline;
}

#posts {
width:636px;
clear:both;
overflow:hidden;
}

#posts li {
float:left;
width:636px;
width/**/:/**/626px;
padding:0 10px 0 0;
}

#posts li.first {
margin:0;
}

#featured .thumb {
float:left;
border:1px solid #d7d7d7;
margin:5px 10px 11px 0;
}

#featured p {
padding:0 0 10px;
}

#featured .more-link {
float:right;
font-size:1.2em;
padding:0 10px;
margin:0 -10px -10px 0;
position:relative;
color:#fff;
background:#404040;
border:1px solid #333333;
}

#featured .list {
float:left;
display:inline;
position:relative;
font-size:.88em;
line-height:2.1;
font-family:arial,sans-serif;
z-index:5;
color:#333;
width:527px;
padding: 0px;
margin:-30px 0 0 0px;
background:#ffffff;
border-bottom: 1px solid #eeeeee;
}

#featured .list li {
float:right;
}

#featured .list li a {
float:left;
color:#333;
background:#f6f6f6;
border:1px solid #eaeaea;
border-right:none;
padding:0 8px;
}

#featured .list li a:visited {
color:#444;
}

#featured .list li a:hover,

#featured .list li a:focus {
color:#fff;
border:1px solid #333333;
border-right:none;
background:#404040;
text-decoration:none;
}

#featured .jcarousel-container {
width:646px;
width/**/:/**/636px;
padding:6px 0 0 10px;
margin:0px;
background:#ffffff;
position:relative;
float:left;
display:inline;
}

#featured .jcarousel-clip {
z-index:2;
position:relative;
overflow:hidden;
width:636px;
}

#featured .jcarousel-list {
z-index:1;
overflow:hidden;
position:relative;
top:0;
}

.oops {
clear:both;
font-size:0;
line-height:0;
width:100%;
overflow:hidden;
display:block;
}
[/css]

Now that we have all that done, we are almost ready to save all this and start displaying a super cool WordPress featured post slider using jCarousel. All that is left to do is to create or edit posts and add them to the Featured category and configure a few simple things in each post to provided the needed information for the featured posts slider, just complete these steps for each post you want to show in the slider and you will be good to go.

  1. Write new or add existing posts to the Featured category (create the category if you don’t have it already)
  2. Add a custom field named feat_txt by clicking where is says “add new” then enter the text you wish to display as the featured text in the slider (i recommend about 20-30 words for this)
  3. Add another custom field for the image you wish to use in the features posts slider and name this custom field thumbnail and place the complete url to the image you wish you use, in the featured.php file I supplied in this tutorial the image will be scaled to 135px by 135px so using and image of any other size will be a waste.

Here is a screen shot showing how the custom fileds section should look for any post you wish to feature.

*edited on 7/19/2010

I have made many modifications to the WordPress featured post slider in use on my site, I have integrated a custom function to pull a special excerpt for this as well as integrated the post thumbnail feature now available in WordPress, if you would like to read more on these additions head over and read “Upgrade your theme for WordPress Post Thumbnails” to get the thumbnails integrated and “WordPress SEO Meta Tags Without Plugins” for the function to use for the custom post excerpt.

and

This should be it, if you have any questions please don’t hesitate to post them here. I will be more than happy to answer any questions you may encounter trying to setup your WordPress featured post slider.

112 thoughts on “WordPress Featured Post Slider Using jCarousel”

  1. I’ve been looking for this exact thing, thanks. – Slight prob is I can’t make it carousel. I’ve followed it to the t and no joy!?

    • If you can provide a bit more information I will be happy to help you get it going. What is the domain you have it on, does it show and just not slide automatically? Any more specific info you can provide will make it easier to sort out for ya.

  2. It also isn’t working for me…

    I also don’t understand the part:
    “and place the complete url to the image you wish you use, in the featured.php”

    Where should I put it?

    • The path for the image needs to be a custom field named thumbnail and the text that shows should be a custom field names feat_txt. You add these custom fields when you create or edit your post, its at the bottom of the edit post page.. ALso, can you please be more specific, leave a link to your site and let me know what it’s not doing? Simply dropping by saying its not working doesn’t give me enough information to help you.

      • Thanks for the reply! i’m coding my theme locally, so I can’t give you a link unfortunately.
        What I meant was that it says ‘place the complete url to featured.php’ but it is already there rigt? (get_post_meta($post->ID, ‘thumbnail’)

        When I just follow the steps here it simply isn’t showing any output.

        I just figured it out!
        I put the featured.php in the main folder of my template and used in my header, and now it works…

        • php include(‘feature.php’);

          And you didn’t mention to remove the for and after CData and /script.
          It is all functional now! Thanks!

  4. Very good tutorial, so easy to follow. The only problem I faced was forgetting to put posts in the featured category.

    Again, awesome tutorial!

  5. Hi Jesse – first, congratulations on the birth of your beautiful new daughter! How lucky she is to have 3 older brothers. :)

    I’ve been looking all over for a script like this one and am so grateful to have finally found your site.

    Like a few others, though, I’m having a few problems and would love your help if you have a moment (I realize you may be too busy…):

    http://www.lifeworkinaction.com

    Problems:
    -posts don’t scroll
    -post buttons (1, 2, 3) don’t show up
    -script pushes my Samsarin php widget with the sidebar tabs down so it’s level with the first post (green tabs in right column)

    I’m using Chrome and just noticed that in IE the post buttons appear with a second “read more” button, but the buttons appear with the post that falls below the carousel.

    I have read and re-read your clear and easy to follow directions and am assuming I’ve done something wrong, but I can’t for the life of me figure it out.

    Any help is greatly appreciated.

    Thanks & congrats once again.
    Amy

    • Hi Amy and thank you,

      I looked over your site and “hope” I can help you get it sorted :-) the first thing I noticed is the width, depending on how your site is set up you will probably have to specify the width for the #featured div in your css file (it’s set at 100%) which works on my site, but everyones are a bit different. Also, the width of the other parts is based off the available width I have here, which is 636px so you will have to adjust that accordingly to get it just right for your site.

      The reason you see all the posts in IE is because the script for some reason isn’t working (normally it will show the active bit and the rest are hidden until they scroll into view)I am looking into that for you now, I will post back on here in a bit with more information.

    • OK, i think I see what is causing it.. Your theme does not have jQuery included in it. I suppose I should have made a note that this was needed :-)

      You will want to add a line in your header.php file to include the jquery.js file thats located inside your wp-includes/js/jquery folder.

      is should look like this: *EDIT OK it wont let me put code here lol.. I will email it to you instead

      Please let me know if this sorts it all out

  6. Spoke too soon – still having the issue with the sidebar tabs. If you have any thoughts I’d great appreciate it.

    • It looks to me like its still too wide and its causing the sidebar tabs section to drop down.

      Your site appears to have about 600px available in that area, the section for the posts slider that looks like this:

      #featured .jcarousel-container

      is still set to 620px and has 10px padding for an overall width of 630px. The best way to get this to fit just right is to just go down the list and take off an equal number of pixels for anything that has a defined width, start off by taking off 20px from everything then you can fine tune it from there. Hope this makes sense lol

  7. I thought that might be the problem too, so I put every thing down to around 500px, but it didn’t help. The read more button is only showing the top half, too, so perhaps there’s a clue in there. Hmmm….gotta love code mysteries!

  8. And only 4 posts work, the 5th one (which doesn’t necessarily correlate to button 5) is sometimes completely missing OR there is a bit of text to the left of the image. I noticed that when the image actually appears it’s about 10 px to the right of where the other images fall, too.

      • I see the all 5 posts are showing now and you are getting closer with the layout stuff. Does your layout use any floats? If it does, you may need to use a clear both in there to get things back to normal..

  9. Not sure about the floats. I created the theme in artisteer, not from ground zero. I’ll check.

    I’ve been thinking the problem might have something to do with where I’m placing the includes/featured.php code, but I don’t know where else to put it.

    I decided to experiment and remove the code from the index.php and insert it into a sticky WP post. With the help of exec-php widget, this almost works.

    But, in a post the carousel images don’t show up, nor does the text, but the list buttons (1-5), read more button, and place holders for the images show up. When I use the sticky post instead, the sidebar tab aligns perfectly, but the 1-5 list buttons take on the css of the theme and inserts bullets.

    Almost have it!

    I’ll check the floats. – Thanks for the idea!

  10. You’re right – it’s a float issue. Unfortunately, if I change the margins on the home page the other pages are messed up. I’ll see if I can get some help to sort it out. I’m not much of a php person.

    Thanks for your help today.

  11. Say I’m using WPMU and wanted to get 5 posts from featured category from across the entire MU community? How the heck could I do that? Been trying but not sure I’m getting close. Thanks for the tutorial it works great for one blog.

    • Hey Ricky, Thanks for stopping by. If your looking for a great solution for what your trying to do (and quite likely a lot more) go sign up over at http://premium.wpmudev.org and grab their post indexer plugin to get all posts across all blogs into one db you can query easily, its really slick.

      They are by far the most helpful and knowledgeable people I have ever stumbled upon when it comes to WordPress MU.

    • Hi Achi,

      It looks like you have conflicting css items on your page, I would advise picking one element at a time in the featured.php file and try renaming them (and edit the corresponding css) to get rid of any conflicting entries..

      things like floats, padding, margins etc can also impact the layout quite a bit.. perhaps trying a clear after any floating elements on your page would help as well.

  13. I’m getting an infection error from clamxv with the js files associated with this jquery carousel you have recommended here. Is this an issue or something that is common?

    • some antivirus programs may have the occasional false positive but I never have had the issue with this script. I would recommend checking with the makers of clamxv on this one, this script comes from a reputable source and shows as being clean by every antivirus I have.

    • I’m very glad you got it working, looks nice as well (sorry I can’t read Chinese or I would check out your site more.

      I also would not mind if you translated this to Chinese as long as you provide a link back to the original post here.

      Take care and thanks for stopping by.

      • Your post starts with an intro element…”If you haven’t already, please subscribe to my RSS feed or get updates by e-mail.”

        What I’m fascinated by is the [x] in the upper right corner. I know how to make an intro box et al…but I can’t figure the [x]. Someone suggested jquery but I’m still clueless…

  16. http://www.gradientblend.com/
    I have set this up so that everything is working. The Posts are all set to be Featured and they show up as planned, but for the life of me I cannot get this to show up right as far as the carousel is concerned. Everything seems to be working EXCEPT there is no slideshow or carousel…the posts just display vertically down the page. It’s as if the Jquery isn’t being fired, but I have checked and the link is pointing to the js file properly. All I need to do is to have the content display in the carousel and I’m done. Can anyone help me out, here? (Beating head against the desk!!!)
    .-= graefika´s last blog ..The Omega. This is the last. =-.

    • I just looked at your page source, I dont see the script portion that actually controls the slider.. you need to look up at the instructions on this page, find the part that starts with the if ( is_home() ) { ?>

      Add that section before the closing head tag and you should be good to go.

      • I pasted the code controlling the slider right above the tag. The code is there (locally that is) – but when I upload it to my server and view source on the same page, the code controlling the slider disappears. I don’t know if my server is not allowing me to actually replace the file or what. It’s like the code is being stripped out and I don’t know why. It could be working properly and I would never know it.
        .-= graefika´s last blog ..The Omega. This is the last. =-.

  17. Hi Jesse,
    Love the post, super useful! I got everything to work, but I'm having issues with the post->id query. If i replace it with a post-number, it works fine for that specific post, but when I try to use the post->id variable the image from the post do not show up.

  18. Hi, thanks for stopping by and I am glad you found this post useful :)

    I have a related topic you may want to check out, has to do with the new post thumbnails feature that WordPress 2.9+ supports, you can read it here:
    http://admindaily.com/upgrade-your-theme-to-support-wordpress-2-9-post-thumbnails.html

    Including the post thumbnails this way is much cleaner and more convenient than how I did it at the time of this original post… I think it may be time for a revision or update :-) thanks for reminding me.

  19. Hi Jesse. Thanks for the quick reply.
    Actually found the solution last night. Check this out:

    <?php $count++; ?>
    <?php global $post;
    $post_image = get_post_meta($post->ID, 'thesis_post_image',$single=true);?>

    <li id=”post-<?php echo $count ?>” class=”first”>
    <a href=”<?php the_permalink() ?>”><img class=”thumb” src=”<?php echo $post_image ?>” width=”135″ height=”135″ alt=”<?php the_title(); ?>” />
    <h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></h3>
    <div class=”content”>

    As you can see I insert after the count++

    Sorry, doesn't look like there's a way to highlight in the Disqus interface.
    Keep in mind though this is for thesis :)

  20. Hi Jesse, Thanks for the replying so fast.

    Check this out: Remember though i'm using thesis. I insert after count++
    The reason I think your post is awesome is because it lets me create different sliders on different pages which is what I really want to do :)
    <?php $count++; ?>
    <?php global $post;
    $post_image = get_post_meta($post->ID, 'thesis_post_image',$single=true);?>

    <li id=”post-<?php echo $count ?>” class=”first”>
    <a href=”<?php the_permalink() ?>”><img class=”thumb” src=”<?php echo $post_image ?>” width=”135″ height=”135″ alt=”<?php the_title(); ?>” />
    <h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></h3>
    <div class=”content”>

  23. Hi Jesse, just a heads up, the Featured Content Gallery you mention should be avoided.
    Yesterday I had a site taken down by the js downloader.agent virus. All attempts to upgrade or reload the Gallery files failed. Only complete removal of the Gallery plugin solved the issue.

    Looks like the perfect time to try your script :)

  24. Hi Bob,

    Thanks for the heads up on that… I guess now would be a good time to try it out ;-) I'm glad I'm not using that gallery on any of my sites anymore.

    I also have another related post that you might want to take a peek at, about enabling and integrating the new post thumbnails in WordPress 2.9 which you can find at http://admindaily.com/upgrade-your-theme-to-sup…

  25. Hi, I'm using WordPress as a base for my website. I was wondering if there was a way to make a list of the post topics appear on a new page when you click a category. Usually when you click on a category, it shows the blog posts in full, 5 to a page or whatever.

  26. This is possible, it just requires setting up your archive page the correct
    way. As an example, if you click on any of the category links in my sidebar
    here you will be taken to a page that only has a listing of the post titles
    and no post content. Let me know if this is the functionality you are
    looking for and I will point you in the right direction.

  29. Hi, thanks for stopping by. It appears that you have a conflicting script on your site that is preventing jCarousel from operating properly. Check for other javascript or try disabling plugins one at a time to see where the conflick lies, that will usually shed some light on any incompatibilities.

  30. Hi Jesse i am new to wordpress. Today was my fist day in wordpress that to i need to create exactly wat u have written in the post. I am using contructor themes downloaded from the wordpress.org site. there i can see four template files like template-site, template-archive,template-monocolumn, template-author. Now my doubt is where should i pu the code mention below —-
    Next, we include the featured.php file wherever you wish to show it within your template files using a php include statement like so:
    1

    looking forward

    • Hello Vijay,

      It sounds to me like those are page templates…

      The template files you need to add this to would be your main theme files that would be located in wp-content/themes/your_theme_folder/ and most likely you would want to include this into your index.php or home.php file if you have one.

    • Your welcome and I am glad you have it working BUT I noticed you have copied my entire post and placed it on your site, I’m hoping this was an unintentional oversight on your part. I would ask that you edit your article to make it compliant by writing your own unique excerpt of my post and then link back to my post on this site for further information and to read the rest of the article. Simply including a link to my site at the bottom of my copied post isn’t ok :)

      thanks for your understanding,
      Jesse

      • Hi Jesse

        Thanks for the reply and making be aware about the post. The post to my blog was unintentional, and i beg your pardon for it. I have disable the view of this post in my blog.

        Thank you for the support and understanding. I once again apologies for the mistake.

        Looking forward from you

  32. Thank you for your tutorial, unfortunately I’m having trouble setting this up. The jCarousel script you use in this how-to was updated on the 19th of April and the file names changed it appears.

    There are 3 scripts included:

    jquery-1.4.2.min.js
    jquery.jcarousel.js
    jquery.jcarousel.min.js

    so i tried changing jquery.jcarousel.pack.js in the header to both of the jcarousel scripts with no luck.

    I’m using the Use Google Libraries plug-in to keep my libraries updated but with this turned off, using the default wordpress one it still doesn’t work.

    I have set up a dummy site to test this out, could you have a look at my source and let me know what you think the problem is.

    thank you.

  33. Hi, I am new to wordpress and am looking exactly the same as you mentioned above. This one is working me for constructor theme but for default theme its not working. I got the post in my page and slider is not working.

    Can you please me some idea to resolve the problem?
    Thanks in advance…

    • If you are talking about there being a bullet next to each list item then you need to alter your css and make the list-sytle none for that.

  35. Hello jess,

    Thank you for this topic , I’ve tried to do the same things but I’ve failed :(

    please I need your help !!

    you can e-mail me , and I will provide you the list of the things that I’m looking to do on my site

    Thank you again

    Regards

  37. Dear Jesse..
    do you think that is possible to use your script with similar post? I think that if you merge its..
    this can becomes the best plugin for wordpress!

  38. It took me 8 hours to perfect your tutorial. It contains a lot of flaws. Maybe you should consider revising it.
    Anyway. Thanks a lot! You can look at ebook.foodrecap.net. Implementation is not complete yet.
    I am very tired. I am going t take a nap before applying on my main blog page…

    • Hi Marvin,

      Thanks for stopping by, I am glad you found it useful. I would be very interested in exactly what you believe were the flaws in this tutorial, I’ve used it just like this on many sites as have many others without issue. If you are referring to styling issues thats not a flaw, thats a design issue and as I stated in the tutorial you have to adjust the css to work with the space/layout of your site.

  39. Hi Jesse,
    Getting ready to use your tutorial and had a quick question. If I want to use the excerpt so it would pull a description automatically could I simply change “have_posts()) : $my_query->the_post(); ?> ”

    from the_post to the_excerpt? I am trying to work up a variation of what you have for a client and I would rather pull the generated excerpt rather than have them hand-craft an excerpt for each slide…I did look at the SEO excerpt related post that you have but they already have an SEO solution…so I don’t want to go that route.

    Thanks for any advice!

    P.S A previous poster mentioned that the download has name changes to the script and they are correct, so I don’t now how the new scripts affect your tutorial…I searched out and found an old version of the zip so I have the script you reference, but technically the current download link scripts wont work with your tut…just an FYI. : )

    • Hi Missy,

      If you want to use the post excerpt you would find the part that looks like this:

      ID, ‘feat_txt’,true) ?>

      and replace it with:

      The only down side to doing it this way will be the length of the excerpt and the effect that it will have on the layout of the slider. Thats why I linked to the SEO post, you can use that function to generate a excerpt of a specific length that you can use in the slider, doesn’t have to be used for meta tags.

      Thanks for reminding me about the file changes, I will check that out and see what changes I need to make.

  40. Also when using the featured image (thumbnails integrated) what code do you use to call the featured image…I have it almost working and I tried replacing src=”ID, ‘thumbnail’,true) ?>”

    with simply:

    but no dice…what am I missing?

    Thanks Again!

    • You need to replace the following:

      [php]<a href="<?php the_permalink() ? rel="nofollow">"><img class="thumb" src="<?php echo get_post_meta($post->ID, ‘thumbnail’,true) ?>" alt="<?php the_title(); ?>" /></a>[/php]

      with:

      [php]<?php
      if ( has_post_thumbnail() )
      the_post_thumbnail( ‘feat-thumbnail’ );
      else
      echo ‘<img src="path-to-a-default-image-here" height="85" width="85" alt="you alt text" title="your title" />’;
      ?>[/php]

      Of course you need to make sure you have enabled post thumbnails in the appropriate size and have it named feat-thumbnail in your themes functions.php file as outlined in the linked post about post thumbnails for this to work.

      lol, don’t worry about the issues getting code into your comments, happens to me too lol… if you wrap your code with a bracketed [ <-- these with php and close with a /php it will format how this reply looks :)

  41. Wow you’re fast!! lol

    Thank you sooo much…everything works offline now I just need to make it live. :)

    Thanks Again!!

    Missy

  42. can you help me pls? I do everything that you told in th article, but the slideshow didn’t appear.. i think it is because i dont have feat_text function and thumbnail function,, i design my themes with artisteer,,

    please i need ur help,, maybe u want to visit my website to see my problem :(
    pmbfilm.com
    hope you can answer this stuipd question :D

    • I checked out your site last night but saw something different on there so I am assuming you are trying something else? I tried to look again this morning but the page failed to load.

    • You could certainly code it to do that but doing so would be somewhat counter productive. If you have 5 sticky posts and you use those same 5 posts for the featured post slider you would have those 5 posts on the homepage twice, all the time… Of course you could keep it just how it is now and set it to use any post category you desire, so you could create a category named sticky, featured etc etc and use those for the slider…

  44. Hey Jesse,

    Very well written post that was pretty easy to follow by someone who are just getting started with WP.

    I am sorry if I am repeating someone here, but I did scan through the comments and couldn’t find my answers.

    What about if I want to include 8 latest or most popular posts from all categories?

    Also is there a way to make the thumbnail path dynamic? Could the post image be reused after resizing?

    Thank you so much.

    • Hi Beata, thanks for stopping by, I am glad you found this post useful and easy to follow.

      You could do a lot of customization to this, as a reference you may want to check out my post on how to use WordPress post thumbnails, you could use that for the images instead. That post can be found here:
      http://admindaily.com/upgrade-your-theme-to-support-wordpress-2-9-post-thumbnails.html

      As for the quantity of posts to show, you can adjust that in the code where is says:
      [php]<?php $my_query = new WP_Query(‘category_name=Featured&showposts=5’); ?>
      [/php] by adjusting the quantity from 5 and then adding to the [php]<li><a href="#post-5">5</a></li>[/php] as well if you would like the buttons to match (or you can even delete them all together if you don’t want to have them.

      To set it to grab posts from all categories instead of just the Featured category you can change the following:
      [php]<?php $my_query = new WP_Query(‘category_name=Featured&showposts=5’); ?>[/php]
      to this:
      [php]<?php $my_query = new WP_Query(‘showposts=5’); ?>[/php]

      as an example, then it will show the latest 5 posts from all categories.

      In order to select the most popular posts would require added functionality in order to know what posts are considered popular, if its based on views, comments etc etc.

  45. hello Jesse,

    This this the only tutorial that I finally made to work. Thanks so much for explanation. It is very easy and straight to the point.

    I have a question, if you have time and if it is easy enough, can you guide me what I need to change so instead of numbers (1,2,3,4,5) there would be (prev) and (next) buttons.

    Thank you in advance,
    Very cool tutorial.

    • Hi Anton,

      thanks for stopping by. If you want to get rid of the 1-5 etc you can leave that out of the code. It would be the part that looks like [php]<ul class="list">
      <li><a href="#post-5">5</a></li>
      <li><a href="#post-4">4</a></li>
      <li><a href="#post-3">3</a></li>
      <li><a href="#post-2">2</a></li>
      <li><a href="#post-1">1</a></li>
      </ul>
      [/php]

      then you will need to add the prev/next buttons where you would like and style them accordingly, the basic button format would be something like this for the previous button:
      [php]<a href="#" id="yourcarousel-prev">« Prev</a>[/php]
      and this for the next:
      [php]<a href="#" id="yourcarousel-next">Next »</a>[/php]

      once you have those in and styled how you want you will need to edit the function to include the previous and next functions. The following lines can be added right below where you see this in the current code:
      [php]return false;
      });[/php]

      [php]jQuery(‘#yourcarousel-next’).bind(‘click’, function() {
      carousel.next();
      return false;
      });

      jQuery(‘#yourcarousel-prev’).bind(‘click’, function() {
      carousel.prev();
      return false;
      });[/php]

  46. Thanks for this! I still have a few tweaks to do with it, but I’ve customized it a little, and it looks and works great! :) Bit of advice: keep it out of the loop! :) It took some playing around, some tweaking and resizing, but it works perfect as-is (adjustments were to fit my theme and my loop issue…).

    Thanks a lot for this! I really (REALLY) appreciate it!

    • Hi Dustin,

      You are very welcome, i am glad you found it useful and that it does the trick for ya :) Thanks for taking the time to leave a comment, I appreciate it.

  47. Thanks for this great tutorial. It’s been the easiest to follow for a Javascript newbie like myself. But in spite of my efforts, I can’t get the carousel effect to work. I’ve got a very rough version of the post slider on the lower half of a page I’m working on. I’ll pretty it up once I get it working. I know it’s not a conflict between the other plugins because I deactivated them individually and checked it. I’d really appreciate your help in spotting why it’s not working. Thanks.

  48. Hey Jesse. thanks for the tut. as well as the support. Early on you wrote to amy about including the js script to her theme. i think im having the same problem. The featured posts show up but dont slide. any ideas? my site is neuetuesday dot com

        • There are a few ways you can accomplish this, the preferred way is to enqueue the script by placing the following into your header.php theme file (must be before the jcarousel line):
          [php]<?php wp_enqueue_script("jquery"); ?>[/php]

          Or you can do it the manual way,in your header.php theme file (after and before the jCarousel script) you will want to include the jquery line like so:[php]<script type=’text/javascript’ src=’http://your-domain.com/wp-includes/js/jquery/jquery.js’></script>[/php]

          Note that if you chose the later method you will want to replace the path and file name with the correct one that corresponds with what you have on your server.. (note you can also include jQuery from a CDN or you can also include it from the Google repository by placing the dollowing in your themes functions.php file.
          [php]
          if( !is_admin()){
          wp_deregister_script(‘jquery’);
          wp_register_script(‘jquery’, ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;), false, ‘1.4.1’);
          wp_enqueue_script(‘jquery’);}[/php]

  49. Hey, this has turned out to be a godsend. thank you so much. im going to be apply for a job and this is just what my site needed.

    i have a question. you can see on my site www dot neuetuesday dot com that the 1st slides of the carousel match the chronological order of the posts. this is redundant on my site since the 1st post is also under the slider. do you have a quick fix that might reverse the slider order? also when the user hits the last slide it bumps a little. they have to hit the right hand arrow twice to go back to the 1st slide….i understand if you dont feel like replying. thanks a milion though for your tutorial

    • Hi Nat, I’m really glad you made such good use of it. You can alter the posts that display in it by changing the category they are pulled from to something else OR you can edit the following line:
      [php]<?php $my_query = new WP_Query(‘category_name=Featured&showposts=5’); ?>[/php]
      to somthing like this:
      [php]<?php $my_query = new WP_Query(‘orderby=title&order=DESC&category_name=Featured&showposts=5’); ?>[/php]

      you can use things like title, date etc for the orderby part. For additional information you can reference the WordPress Codex here as well Codex Orderby Parameters

  50. Hi There,

    Thanks so much for this tutorial. I’m having trouble getting it working. The content displays, but no slider… Any help would be greatly appreciated. Thanks!

    Noah

  51. Hello Jesse,

    Everything works like a charm. One of the best tutorials out there.

    Just curious if it is possible to make this carousel a vertical orientation. I added “vertical: true,” and it stopped working, is there something I need to change in css?

    Thank you.

  52. Very nice tutorial Jesse,

    Can you point me to the right direction, I want to integrate pause function on hover, I don’t know jquery that well :(

    Thanks you.

  53. I really appreciate your jcarousel for wordpress.
    I am having one problem though. I cannot get the H3 heading and image far enough to the left. The text wraps around and appears on the left before the H3 heading and image. The ‘list’ ul is at the left border like it should be. If you have a minute I would appreciate any ideas you have.

    Thanks,
    Doak

  54. Here is a side question. WordPress 3.1 includes jquery.js in the wp-includes/jquery folder, it is v1.4.4. Is it possible to just use this instead of a separate ‘js’ root folder. I could load the jcarousel function just before instead?

    Thanks,
    Doak

    • Jcarousel is a different file than the jquery file so both are required, you can however include the jcarousel file using a different method if you wish.

  55. I added padding: 0 20px 0 0; to the #posts div that solved the text bleeding out the right side and appearing on the left side before the post. This pulled everthing to the left and it works fine in IE8, IE9, and Firefox, but I noticed IE7 (what’s new) still has this problem Do you have any IE ‘bug’ fixes for this.
    I appreciate your help.

    Thanks,
    Doak

Comments are closed.