Design insights & tutorials.

Design An Elegant Featured Content Slider for Wordpress

Turquoise Flag-Tip

An Elegant Featured Content Slider for Wordpress

by John Sexton December 22nd, 2008.

Introduction

In this tutorial, we’ll create an elegant featured content slider for Wordpress like the one featured on http://www.fuseboxtheatre.com.

This featured content slider is based on “The Coda Slider,” a neat device used by Panic Software to display information about their “Coda” product on their website (http://www.panic.com). This effect is beautiful, flexible, and often copied.

We’ve managed to put together a nice implementation that seamlessly integrates with Wordpress for easy, automatic populating of featured content. The slider we’re going to build today uses a number of existing components, including the Coda Slider jQuery plugin, the Easing jQuery plugin, and jQuery itself.

The original Coda Slider tutorial at jQuery for Designers goes into the nuts and bolts of the jQuery code and the mark-up structure. I’ll refer you there if you want to learn more about the jQuery is actually working. Including it here would make this tutorial way too long – and besides, there’s no sense in re-inventing the wheel!

http://jqueryfordesigners.com/coda-slider-effect/

The purpose of this tutorial is to seamlessly integrate this slider with an existing Wordpress installation to create a beautiful, automatically populated, easy to manage featured content section. Let’s get to it!

The Markup and Javascript

As mentioned above, please refer to http://jqueryfordesigners.com/coda-slider-effect/ for a description of the jQuery, markup, and basic CSS necessary to get the slider working.

That tutorial also discusses the various jQuery plugins you need to get the slider working in the first place. For convenience, I’ve condensed the other jQuery plugins into 1 javascript file, which I’ve called coda-slider-condensed.js. You can download it here: coda-slider-condensed.js (Right click, save as).

The other jQuery plugin that you will need — that is not included in the jQuery for designers tutorial, but IS included here — is the jQuery Easing plugin. Easing is what gives the slider its sense of momentum – a small touch that really enhances the overall experience.

You can also get jQuery Easing here: http://gsgd.co.uk/sandbox/jquery/easing/

My coda-slider-condensed.js file already has easing enabled. If you want to change the type of easing, or its duration, look at lines 84-89 of coda-slider-condensed.js.

Before we get started with the Wordpress goodness, all you have to do is make sure you include the jQuery easing file, as well as the coda-slider-condensed.js and, of course, jQuery itself, in your Wordpress header.php file. Just cut and paste the following into your < head > < / head > tags.

[sourcecode language="html"]

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery-1.2.6.min.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery.easing.1.3.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/coda-slider/coda-slider-condensed.js" type="text/javascript" charset="utf-8"></script>

[/sourcecode]

Make sure to include the correct path to your javascript files – these paths are just examples!

Integration With Wordpress

Now that we have the basics we need to get the Coda Slider working, we can get to the meat of this tutorial: how to integrate with Wordpress!

Here’s what we want to do: create a featured content slider with our most recent 3 posts. Each featured post has an image and an excerpt associated with it. We want the image to show up both within our sliding panels, and as a smaller thumbnail in the slider navigation.

Let’s get started:

  • Since we want to feature 3 posts, we need to keep track of how many posts we’re going through. To do this, we’ll initialize a variable ($postcount) that we can use to track our progress. This handy variable will also enable us to seriously condense the code that we write later (that’s where the ‘elegant’ part comes in!)
  • Retrieve a query from the Wordpress database using the powerful wp_query command. Here we’ll just use it to grab the most recent 3 posts. If you want to learn more about wp_query and what you can do with it, check this out: http://nettuts.com/working-with-cmss/build-a-newspaper-theme-with-wp_query-and-the-960-css-framework/
  • Loop through each of the posts we have retrieved from the database and display them as our three featured posts. We want the thumbnails of each post’s featured image to automatically appear in the navigation section of our slider.
  • Prevent duplicate posts from showing up using a simple – but important – bit of code: $do_not_duplicate[] = get_the_ID(); This is an array of post IDs that we will store and reference later – to make sure that posts that show up lower down on our site are not duplicates of those in the featured section.

Here’s what this part looks like:
[sourcecode language="html"]

<?php
$postcount = 0;
$featured_query = new WP_Query(‘showposts=3’);
while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
[/sourcecode]

That’s just the PHP – we’ll need to wrap it in some DIVs to make it work with the slider, but we’ll tackle that later.

Filling The Panels

Next, we initialize our panels – this is where the power of our $postcount variable comes into play. Rather than have to manually create each panel (and manually add or subtract panels if we decide we’d like to change the number of featured stories), this variable, coupled with some simple PHP, allows us to automate that process.

[php]

<div class=“panel” id=“featured-<?php echo $postcount; ?>”>

CONTENT GOES HERE

</div> <!– End Panel –>
[/sourcecode]

We will end up with a series of DIVS like this:

[sourcecode language="html"]
<div class=“panel” id=“featured-1”> CONTENT </div>
<div class=“panel” id=“featured-2”> CONTENT </div>
<div class=“panel” id=“featured-3”> CONTENT </div>
[/php]

For CONTENT, anything could go in that spot – static content, post excerpts, custom field information, etc. Now I’ll briefly describe how to get the featured images and featured text into that content area.

Using Featured Images

On http://www.fuseboxtheatre.com, we are pulling data from the post’s custom “Image” field to get the featured image, and we are also getting the title and excerpt. Here’s how we do it:

[sourcecode language="html"]
<div class="featured_media">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");

if (isset($value_feat_img[0])) { ?>

<a href="<?php the_permalink() ?>" rel="bookmark"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?>

</div>
[/sourcecode]
This gives us an image that is linked to our post. This assumes that you have your post image located in a folder called “yourimagefolder” that resides inside of your site’s root. Of course you can adjust your path to whatever fits your individual situation. You can manipulate this image with CSS by targeting the wrapping div, of class .featured_media.

To assign an image to a post, go down to the “Custom Fields” section of your post and enter the image name with a custom field key of “Image,” like so:

Using Featured Text

Now we want the text to go along with the image. We open another div, “.featured_text” and go from there:
[sourcecode language="html"]

<div class="featured_text">

<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?>
</a>
</h2>

<div class="entry-content">

<?php the_excerpt(); ?>

</div>

</div>
[/sourcecode]
This will give us a containing text area, an < h2 > level post title which is linked to our post, and the excerpt for that post. Again we can manipulate these using CSS by targeting “.entry-title” or “.entry-content”.

That’s all we need inside each one of our sliding panels. Now we need to end our WHILE loop and close some divs.
[sourcecode language="html"]

<?php endwhile; ?>

[/sourcecode]

Adding Thumbnail Navigation to the Slider

Now comes the navigation – these are thumbnails that you can click to go to the associated featured post. These will be automatically drawn from the same “Image” custom field as your featured post image.
[sourcecode language="html"]
<div id=“shade”>
<ul class=“navigation”>

<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?></ul>
</div>
[/sourcecode]
We start off by opening our #shade div and our Navigation list – then do the same PHP as before to make sure we get the same three posts and do not duplicate them – after all, we want the thumbnails, post titles, or whatever else we are using for the slider navigation to correspond to the content they are matched to.

For each navigation item, we use the same code we used before to get the post’s custom image, but now we put it inside of a list item:
[sourcecode language="html"]
<li>

<?php // get the image filename
$value_img = get_post_custom_values("Image");

if (isset($value_img[0])) { ?>

<a href="#featured-<?php echo $postcount; ?>">

<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

</a>
<?php } ?>

</li>

<?php endwhile; ?>
< / div> <!– End Shade (be sure to remove space) –>

[/sourcecode]
The cool thing here is use of the $postcount variable – we are now linking our thumbnails to the panel divs we generated before – all by their IDs, and all automatically, just by referencing $postcount! This means we can just write the code once and loop it, rather than having to write it out explicitly for each panel.

We’re also using the Wordpress custom field “Image” again – this time to take the same image we used as our featured image, and now use it as a slider navigation thumbnail. Using the technique, we can have this same custom image show up in the actual sliding “Panel” divs themselves, too!

The one thing that’s different here is that we’ve added a class to the image: “.scroller-thumb” Now, using CSS, we can specify a size for this thumbnail image. After all, we want to use the same image for the navigation as for the featured image, but we don’t want them both to be the same size. We also don’t want to manually create two image sizes and two custom fields for every post.

Here’s some simple CSS to constrain these image sizes:
[sourcecode language="css"]
img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}
[/sourcecode]
Now we’ve finished the operations we want for each list item, so we end our WHILE loop, and close the navigation list, #shade DIV. That’s it for the code portion of the slider – now we need to make sure everything is nicely wrapped up inside of the appropriate divs. Here it is all together: In your HEADER.PHP:
sourcecode language=”html”]

[/sourcecode]
In your INDEX.PHP (or wherever else you want the slider to appear)
[sourcecode language="html"]
<div id="wrapper">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<div id="featured-<?php echo $postcount; ?>" class="panel">
<div class="featured_media">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");

if (isset($value_feat_img[0])) { ?>

<a rel="bookmark" href="<?php the_permalink(); ?>"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?></div>
<div class="featured_text">
<h2 class="entry-title">
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a></h2>
<div class="entry-content">

<?php the_excerpt(); ?></div>
</div>
</div>
<!– End Panel –>

<?php endwhile; ?></div>
<!– End Scroll Container –></div>
<!– End Scroll –>
<div id="shade">
<ul class="navigation">

<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<li>

<?php // get the image filename
$value_img = get_post_custom_values("Image");

if (isset($value_img[0])) { ?>

<a href="#featured-<?php echo $postcount; ?>">

<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

</a>
<?php } ?></li>
< ?php endwhile; ?></ul>
</div><!– End Shade –>
</div><!– End Slider –>
</div><!– End Wrapper –>
[/sourcecode]

Conclusion

This has been an overview of how to create an elegant featured content slider for Wordpress. I hope you’ve enjoyed it! Below, you can find the CSS we are currently using for our slider at http://www.fuseboxtheatre.com. You may need to tweak it to fit your own layout.

One last thing: rather than just having the most recent three posts appearing in your featured content slider, sometimes you want to be able to control which posts show up. There are a number of ways to do this, such as adjusting the post date, assigning posts to a specific “featured” category, etc.

I prefer to do this using another cool Wordpress plugin: WP-Sticky. You can find it here: http://lesterchan.net/portfolio/programming/php/#wp-sticky (Edit: This was written before the release of Wordpress 2.7, which has a “Stick Post” feature build-in.)

I’ve found that using this plugin to assign the status of “Announcement” to the posts I want to feature is the easiest way to go. Announcement posts will always stay on top of the rest of your posts, but you can easily turn “Announcement” off, and the post will return to its rightful place among the rest of your posts. There are more cool tricks you can do with this plugin – I’ll encourage you to play around with it to discover them for yourself!

BONUS:

Remember that cool stuff we did with do_not_duplicate? Let’s say you have a bunch more posts that you want to appear below your featured content area (like we have on http://www.fuseboxtheatre.com). In order to make sure those posts don’t appear in duplicate, use this bit of code on your second Wordpress loop:
[sourcecode language="html"]

<?php query_posts(‘showposts=8′); ?>;

<?php while (have_posts()) : the_post();

if (array_search(get_the_ID(), $do_not_duplicate) !== false)

continue; update_post_caches($posts);
?>;

CONTENT GOES HERE

<?php endwhile; ?>;

[/sourcecode]

The CSS:

[sourcecode language="css"]

/* FEATURED CONTENT SLIDER STYLES */

#wrapper{
width: 62.2em;
border: 0.1em solid #2b2b2b;
margin-bottom: 2em;
}

#slider {
margin: 0 auto;
position: relative;
}

.scroll {
width: 62.2em;
overflow: auto;
overflow-x: hidden;
position: relative;
background: #0e0e0e;
}

.scrollContainer div.panel {
padding: 1em;
width: 61.2em;
}

.format_text.featured_media{
margin-right: 1em;
float: left;
}

.format_text.featured_media a img{
width: 15em;
height: 12em;
}

.format_text.featured_text{
font-size: 1em;
float: left;
width: 35.5em;
}

.format_text.featured_text div.format_text.entry-content p{
margin-bottom: 0;
padding-bottom: 0;
}

#shade {
background: #000;
height: 9em;
border-top: 1px solid #333;
}

#shade.tall-shade {
background: #000;
height: 12em;
border-top: 1px solid #333;
}

ul.navigation {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 0.9em;
}

ul.navigation li {
display: inline;
margin-right: 0.8em;
}

ul.navigation a {
padding: 0.9em;
color: #000;
text-decoration: none;
float: left;
font-size: 1.25em;
}

ul.navigation a:hover {
background: url(images/arrow_down.png) no-repeat 50% 0%;

}

ul.navigation a.selected {
background: url(images/arrow_down.png) no-repeat 50% 0%;
}

ul.navigation a:focus {
outline: none;
}

.scrollButtons {
position: absolute;
top: 130px;
cursor: pointer;
}

.scrollButtons.left {
left: -13px;
z-index: 100;
display: none;
visibility: hidden;
}

.scrollButtons.right {
right: -13px;
z-index: 101;
display: none;
visibility: hidden;
}

.hide {
display: none;
}

span.thumbtitle{
display: block;
font-size: 1.3em;
text-align: center;
display:none;
}

img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}

img.scroller-thumb-big{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
}

a.selected img.scroller-thumb{
}

[/sourcecode]

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • http://www.gomedia.us Jeff Finley

    This is awesome! Good to see some sexy web dev tutorials on the zine now.

  • http://www.gomedia.us Jeff Finley

    This is awesome! Good to see some sexy web dev tutorials on the zine now.

  • http://www.gomedia.us Adam Wagner

    I’ll be following this tutorial next weekend. Thanks for sharing your process John!

  • http://www.gomedia.us Adam Wagner

    I’ll be following this tutorial next weekend. Thanks for sharing your process John!

  • http://www.gomedia.us Liz

    Amazing! I’ll be trying this out myself. It’s great to see a web-based tut on here, thanks ‘jsexton’!

  • http://www.greasypigstudios.com Arvin Bautista

    What happens when you have more than 3 entries? The fusebox example only shows three in the slideshow

  • http://www.greasypigstudios.com Arvin Bautista

    What happens when you have more than 3 entries? The fusebox example only shows three in the slideshow

  • http://www.gradientgraphics.net Wes D.

    This is great, I was just getting ready to re-do my portfolio site and convert it to a wordpress theme, this will come in handy for my featured projects.

    Thanks guys and keep up the AWESOME WORK!

  • http://www.gradientgraphics.net Wes D.

    This is great, I was just getting ready to re-do my portfolio site and convert it to a wordpress theme, this will come in handy for my featured projects.

    Thanks guys and keep up the AWESOME WORK!

  • LizHunt

    Amazing! I’ll be trying this out myself. It’s great to see a web-based tut on here, thanks ‘jsexton’!

  • Pingback: Design An Elegant Featured Content Slider for Wordpress | GoMediaZine | Apni Library

  • http://apnilibrary.com John

    Great Share!

    I must be trying this sooner, very nice. I would also like to thank http://www.apnilibrary.com , as through which i reach here. And thanks GoDediaZine.com too!

  • http://apnilibrary.com John

    Great Share!

    I must be trying this sooner, very nice. I would also like to thank http://www.apnilibrary.com , as through which i reach here. And thanks GoDediaZine.com too!

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • Max Weir

    Wow this is really cool, thanks for the detailed process and is something that I will look at for future projects.

  • Max Weir

    Wow this is really cool, thanks for the detailed process and is something that I will look at for future projects.

  • Pingback: Daily Digest for 2009-01-28 | Stephen Bolen

  • http://www.scottad.com scottAD

    I am TOTALLY USING THIS!!

    Wicked cool beans.

  • Scott D

    I am TOTALLY USING THIS!!

    Wicked cool beans.

  • Mike Meisner

    Awesome write up man. I wrote something similar, using jFlow but this is way more in depth, and I like the use of thumbnails and clean code. Excellent!

  • Mike Meisner

    Awesome write up man. I wrote something similar, using jFlow but this is way more in depth, and I like the use of thumbnails and clean code. Excellent!

  • http://www.izzataziz.net/ Izzat Aziz

    good tutorial really is, might use it for next project. wonder what else jquery can do, it like unlimited.

  • http://izzataziz.com izzat aziz

    good tutorial really is, might use it for next project. wonder what else jquery can do, it like unlimited.

  • Adam Pek

    I have problem with the PHP script on line 8

    “$featured_query = new WP_Query(‘showposts=3’); ”
    I wonder if anyone had the same problem if yest what is the solution?

  • Adam Pek

    I have problem with the PHP script on line 8

    “$featured_query = new WP_Query(‘showposts=3’); ”
    I wonder if anyone had the same problem if yest what is the solution?

  • Juanp

    Thank you for the tutorial but I cannot make the panels work.
    They just appear one under the other.
    Any idea?

  • Juanp

    Thank you for the tutorial but I cannot make the panels work.
    They just appear one under the other.
    Any idea?

  • http://www.fuseboxtheatre.com John Sexton

    If the panels are just appearing under one another, you may have forgotten to include the javascript files.

  • http://www.fuseboxtheatre.com John Sexton

    If the panels are just appearing under one another, you may have forgotten to include the javascript files.

  • Pingback: Goals for Spring Semester 2009 (Jr. Studio)

  • http://forthelose.org Wordpress Themes

    Wow, awesome tutorial. Being a Wordpress theme designer myself, I’m always looking for new things to implement into themes. I’ll be using this in my next project. Thanks a load.

  • http://forthelose.org Wordpress Themes

    Wow, awesome tutorial. Being a Wordpress theme designer myself, I’m always looking for new things to implement into themes. I’ll be using this in my next project. Thanks a load.

  • pvf

    hey guys,

    thanks for this tutorial! it rocks!!
    just a specific question,
    i haven’t been able to re-size the nav thumbs the way i want to… i don’t really wanna resize them i wanna just cutt off the excess… to make it fit in a rectangular place like you guys actually did, instead of having a square nav thumb. Would you kindling point me in the right way??

    thanks,

    pvf

  • pvf

    hey guys,

    thanks for this tutorial! it rocks!!
    just a specific question,
    i haven’t been able to re-size the nav thumbs the way i want to… i don’t really wanna resize them i wanna just cutt off the excess… to make it fit in a rectangular place like you guys actually did, instead of having a square nav thumb. Would you kindling point me in the right way??

    thanks,

    pvf

  • Pingback: FTL Weekly Review - Vol. 1 - ForTheLose.org

  • william

    jsexton,
    Awesome article. I am however having a small display problem. The posts are sliding as they should but the picture, headline and excerpt are all stacked on top of each other. (the articles themselves are not stacked, just the contents of the articles) It seems like the css you have included should cause them to float left, but it doesn’t seem to be working. Firefox’s error console is not reporting any errors.

    Anyone else having this problem?

    If I figure it out first, I’ll repost with the results.

  • william

    Ah, I think I found my problem.
    John, in your code for the index.php page where it says:

    <div id=”featured-” class=”panel”>

    the class “format_text” is missing. It should look like this:

    <div id=”featured-” class=”panel”>

  • http://www.fuseboxtheatre.com John Sexton

    Thanks for the heads up William. We had some quirks with getting the code to published code to display correctly in this Wordpress post.

    I thought I had hunted them all down, but if anyone else finds them, please post them here and I will correct them.

  • http://www.fuseboxtheatre.com John Sexton

    Thanks for the heads up William. We had some quirks with getting the code to published code to display correctly in this Wordpress post.

    I thought I had hunted them all down, but if anyone else finds them, please post them here and I will correct them.

  • william

    jsexton,
    Awesome article. I am however having a small display problem. The posts are sliding as they should but the picture, headline and excerpt are all stacked on top of each other. (the articles themselves are not stacked, just the contents of the articles) It seems like the css you have included should cause them to float left, but it doesn’t seem to be working. Firefox’s error console is not reporting any errors.

    Anyone else having this problem?

    If I figure it out first, I’ll repost with the results.

  • william

    Ah, I think I found my problem.
    John, in your code for the index.php page where it says:

    <div id=”featured-” class=”panel”>

    the class “format_text” is missing. It should look like this:

    <div id=”featured-” class=”panel”>

  • william

    Juanp,
    Hey I was also having that issue where the panels where all stacked on top of each other. I was using the wordpress default theme and after a lot of playing around discovered that my problem was related to the content div in the style sheet.

    The font-size was originally set to 1.2em but I changed it 10px. That seemed to fix it.

    Hope that helps someone.

  • william

    Juanp,
    Hey I was also having that issue where the panels where all stacked on top of each other. I was using the wordpress default theme and after a lot of playing around discovered that my problem was related to the content div in the style sheet.

    The font-size was originally set to 1.2em but I changed it 10px. That seemed to fix it.

    Hope that helps someone.

  • http://www.ejhansel.com Eric

    I’ve got everything working great. But I cant seem to get the bonus section working right. Has anyone else been able to get this to work? If so could you explain it in better detail. Thanks in advance.

  • http://www.ejhansel.com Eric

    I’ve got everything working great. But I cant seem to get the bonus section working right. Has anyone else been able to get this to work? If so could you explain it in better detail. Thanks in advance.

  • http://www.fuseboxtheatre.com John Sexton

    The bonus section just makes it so that the posts you select to appear in your slider do not appear again in the “normal” blog layout posts that you might have underneath it.

    I just added that in there because it’s a nice way to remove that duplicate content.

    The “CONTENT GOES HERE” section is where you would put your or whatever – you could make that as simple or as complex as you like.

  • http://www.fuseboxtheatre.com John Sexton

    The bonus section just makes it so that the posts you select to appear in your slider do not appear again in the “normal” blog layout posts that you might have underneath it.

    I just added that in there because it’s a nice way to remove that duplicate content.

    The “CONTENT GOES HERE” section is where you would put your or whatever – you could make that as simple or as complex as you like.

  • http://www.embedded411.com Jon

    Great tutorial… but I REALLY got lost somewhere! http://embeddedcomputingsystems.com/2/?page_id=13

    What am I doing wrong?

  • http://www.embedded411.com Jon

    Great tutorial… but I REALLY got lost somewhere! http://embeddedcomputingsystems.com/2/?page_id=13

    What am I doing wrong?

  • Ty-Crssp

    Hey this is an ultimate tutorial, can’t wait to get started on my own setup for this.
    Love the way you incorporated all the javascript into one condensed file, leaving in the comments for where to go for the original resources, way pro! Have to remember that one. ;)

  • Ty-Crssp

    Hey this is an ultimate tutorial, can’t wait to get started on my own setup for this.
    Love the way you incorporated all the javascript into one condensed file, leaving in the comments for where to go for the original resources, way pro! Have to remember that one. ;)

  • Ty-Crssp

    Not to familiar with Wordpress (working on it),
    Seems like it would be cool to be able to restart the slider, a refresh on the include page would work if it were not wordpress, not sure on a wordpress technique. Carousel’s and the like once you click one of the slides, then it stops rotating or navigating to the next slide automatically. Trouble with a restart is it would go back to the first slide would be the only catch, sure there’ld be a fix for that though too?

  • Ty-Crssp

    Not to familiar with Wordpress (working on it),
    Seems like it would be cool to be able to restart the slider, a refresh on the include page would work if it were not wordpress, not sure on a wordpress technique. Carousel’s and the like once you click one of the slides, then it stops rotating or navigating to the next slide automatically. Trouble with a restart is it would go back to the first slide would be the only catch, sure there’ld be a fix for that though too?

  • http://www.embedded411.com Jon

    Sorry, I posted a bad URL the other day. I am trying to get my slider going here: http://embeddedcomputingsystems.com/2/

    Any clue where I’ve gone wrong?

    Thanks,

    Jon

  • http://www.embedded411.com Jon

    Sorry, I posted a bad URL the other day. I am trying to get my slider going here: http://embeddedcomputingsystems.com/2/

    Any clue where I’ve gone wrong?

    Thanks,

    Jon

  • http://technosailor.com Aaron Brazell

    First off, thanks for this.

    Second of all, you’re making the WP part of this difficult. I wish designers spent time understanding the WP API. It would prevent breakage or security problems later on.

    For custom fields, use get_post_meta(). It takes three arguments: $post_id, custom field key and a boolean detrermining if the value is returned as an array (default, false) or a string (true). Example:

    $thumb = get_post_meta( $post->ID, 'image', true );

    Second of all, your javascript libraries. WP has built in dependency checkers and queues for handling the use of JS in themes. It also bundles jQuery, so please don’t ask people to bundle it again. :) So you use wp_register_script() to bring in easing and coda, wp_enqueue_script() to make sure WP kicks out the javascript in the proper order and wp_print_scripts() to put them into a theme. Here is an example function:

    function other_js()
    {
    wp_register_script('jquery-easing', bloginfo('template_directory) . '/scripts/jquery.easing.1.3.js', array('jquery'));
    wp_register_script('jquery-coda-slide', bloginfo('template_directory) . '/scripts/coda-slider-condensed.js', array('jquery','jquery-easing'));
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-easing');
    wp_enqueue_script('jquery-coda-slide');
    wp_print_scripts();
    ?>

    $j = jQuery.noConflict();
    $j(document).ready( function(){
    // Stuff
    });

    <?php
    }

    Aside from my nitpicking tho, nice tutorial. Thanks.

  • http://technosailor.com Aaron Brazell

    First off, thanks for this.

    Second of all, you’re making the WP part of this difficult. I wish designers spent time understanding the WP API. It would prevent breakage or security problems later on.

    For custom fields, use get_post_meta(). It takes three arguments: $post_id, custom field key and a boolean detrermining if the value is returned as an array (default, false) or a string (true). Example:

    $thumb = get_post_meta( $post->ID, 'image', true );

    Second of all, your javascript libraries. WP has built in dependency checkers and queues for handling the use of JS in themes. It also bundles jQuery, so please don’t ask people to bundle it again. :) So you use wp_register_script() to bring in easing and coda, wp_enqueue_script() to make sure WP kicks out the javascript in the proper order and wp_print_scripts() to put them into a theme. Here is an example function:

    function other_js()
    {
    wp_register_script('jquery-easing', bloginfo('template_directory) . '/scripts/jquery.easing.1.3.js', array('jquery'));
    wp_register_script('jquery-coda-slide', bloginfo('template_directory) . '/scripts/coda-slider-condensed.js', array('jquery','jquery-easing'));
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-easing');
    wp_enqueue_script('jquery-coda-slide');
    wp_print_scripts();
    ?>

    $j = jQuery.noConflict();
    $j(document).ready( function(){
    // Stuff
    });

    <?php
    }

    Aside from my nitpicking tho, nice tutorial. Thanks.

  • http://www.fuseboxtheatre.com John Sexton

    Thanks for the feedback and tips. I’m always looking to improve my Wordpress skills!

  • http://www.fuseboxtheatre.com John Sexton

    Thanks for the feedback and tips. I’m always looking to improve my Wordpress skills!

  • http://www.alyenstudio.com Alyen

    I have problem with the PHP script

    “$featured_query = new WP_Query(‘showposts=3’); ”
    I wonder if anyone had the same problem if yest what is the solution?

  • http://www.alyenstudio.com Alyen

    I have problem with the PHP script

    “$featured_query = new WP_Query(‘showposts=3’); ”
    I wonder if anyone had the same problem if yest what is the solution?

  • http://www.fuseboxtheatre.com John Sexton

    I’ve heard some people had problems with cutting and pasting the code, because the characters may not be encoded correctly, especially the single quotes ( ‘ ).

    If you’re having weird errors, you might try deleting the line and re-typing it in your text editor.

  • http://www.fuseboxtheatre.com John Sexton

    I’ve heard some people had problems with cutting and pasting the code, because the characters may not be encoded correctly, especially the single quotes ( ‘ ).

    If you’re having weird errors, you might try deleting the line and re-typing it in your text editor.

  • http://benbishop.me.uk/ Ben Bishop

    Regarding making the posts sticky, I am a little stuck. By default the three most recent posts are featured. When I make an older post sticky though it then features 4 posts, the three most recent and the one sticky one. Where am I going wrong?

  • http://benbishop.me.uk/ Ben Bishop

    Regarding making the posts sticky, I am a little stuck. By default the three most recent posts are featured. When I make an older post sticky though it then features 4 posts, the three most recent and the one sticky one. Where am I going wrong?

  • http://www.fuseboxtheatre.com John Sexton

    The newer versions of Wordpress already have a sticky feature built in, so you don’t need the WP Sticky plugin any more.

    The slider should only feature the number of posts that you specify with:

    $featured_query = new WP_Query(‘showposts=3′);

    By default, this just draws the most recent three posts. Sticky posts are always counted as “most recent.”

    But you can further specify which posts to get from individual categories, or exclude categories, or stuff like that.

    http://codex.wordpress.org/Function_Reference/WP_Query

    Check this Wordpress Codex entry on the WP_Query function to get a sense of all the options you have.

  • http://www.fuseboxtheatre.com John Sexton

    The newer versions of Wordpress already have a sticky feature built in, so you don’t need the WP Sticky plugin any more.

    The slider should only feature the number of posts that you specify with:

    $featured_query = new WP_Query(‘showposts=3′);

    By default, this just draws the most recent three posts. Sticky posts are always counted as “most recent.”

    But you can further specify which posts to get from individual categories, or exclude categories, or stuff like that.

    http://codex.wordpress.org/Function_Reference/WP_Query

    Check this Wordpress Codex entry on the WP_Query function to get a sense of all the options you have.

  • http://benbishop.me.uk/ Ben Bishop

    @John, thanks for the prompt reply. I have it working fine (three most recent posts) until I make a post sticky using the built in feature of 2.71. Then 4 thumbs appear underneath. It appears the ignore the following query when making posts sticky and just adds the sticky to the stated ’3′.

    $featured_query = new WP_Query(’showposts=3′);

    I’ll carry on playing around and see what I can come up with though. Thanks anyway.

  • http://benbishop.me.uk/ Ben Bishop

    @John, thanks for the prompt reply. I have it working fine (three most recent posts) until I make a post sticky using the built in feature of 2.71. Then 4 thumbs appear underneath. It appears the ignore the following query when making posts sticky and just adds the sticky to the stated ’3′.

    $featured_query = new WP_Query(’showposts=3′);

    I’ll carry on playing around and see what I can come up with though. Thanks anyway.

  • Minus

    hi there,

    For some reason i am getting this: Parse error: syntax error, unexpected T_STRING…..on line 24. I no practically nothing about php so I certainly cant think of any way to troubleshoot this. If anybody can help me it would be greatly appreciated. Cheers!

  • Minus

    hi there,

    For some reason i am getting this: Parse error: syntax error, unexpected T_STRING…..on line 24. I no practically nothing about php so I certainly cant think of any way to troubleshoot this. If anybody can help me it would be greatly appreciated. Cheers!

  • Minus

    Ok so I seemed to have gotten that sorted out, but now I have encountered an additional problem. I am getting the following error:

    Parse error: syntax error, unexpected $end in….on line 107.

    What I dont get is that line 107 is the last line of my index.php file and that is:

    So, like I mentioned before, I am a complete noob (but want to learn) and would like more than anything to get this working. If anyone can help me, I would be greatly appreciative. SOS!

  • Minus

    Ok so I seemed to have gotten that sorted out, but now I have encountered an additional problem. I am getting the following error:

    Parse error: syntax error, unexpected $end in….on line 107.

    What I dont get is that line 107 is the last line of my index.php file and that is:

    So, like I mentioned before, I am a complete noob (but want to learn) and would like more than anything to get this working. If anyone can help me, I would be greatly appreciative. SOS!

  • Sebas

    hi there,

    it seem that I did something wrong cause everything show but not as a slider. Where’s the problem ?
    http://www.rdturboproduction.com/test/wordpress/

    thanks for your help!

    Sebas

  • Sebas

    hi there,

    it seem that I did something wrong cause everything show but not as a slider. Where’s the problem ?
    http://www.rdturboproduction.com/test/wordpress/

    thanks for your help!

    Sebas

  • Sebas

    nvm my script wasnt loaded correctly !!

  • Patrik Kekäläinen

    Is there a way to only output posts from a specific category? I´m not a programmer so I would be grateful if someone could help me?

  • http://brianlis.com Lis

    I'm having the same issue as Minus

    “Parse error: syntax error, unexpected $end in….on line 107.

    What I dont get is that line 107 is the last line of my index.php file and that is:”

    My line # is different of course. But the error is the same and it's the last line.

  • http://subigya.com suBi

    this is awesome, but I have one question.

    What if I don't want the most recent posts, and just want to have 3 posts from a specific tag i specify as “featured” ?

  • http://subigya.com suBi

    or category

  • william

    suBi,
    To display posts from a specified category, I think you could do something like this:

    $featured_query = new WP_Query(‘showposts=3&cat=5’);

    where 5 is the category ID of whatever category you want. If you know the category but not the category ID you can just look at your list of categories in the admin section and mouse over one them. The url it's trying to go to will look something like this (http://localhost/wordpress/wp-admin/categories….). There is probably an easier way to look that up but that's what I always do.

    Try it out and let us know how it goes.

  • muckadeezy

    I'm having the same issue as Minus and Lis

    “Parse error: syntax error, unexpected $end in….on line 107.

    What I dont get is that line 107 is the last line of my index.php file and that is:”

    My line # is also different of course. But the error is the same and it's the last line.

  • muckadeezy

    Seesmic video reply from Disqus.

  • http://www.jlamarferren.com JL

    How much would you charge if I asked you to do this for my wordpress blog?

  • http://www.whitewallweb.com lucas

    lovely piece of code. I can't seem to get it to work in IE 7 though. It displays, just does not slide. All other browsers are perfect!

    Any ideas?

  • http://www.westernmass-squash.com MTB

    I think there is an extra space towards the end that threw me off for a while:
    “< ?php endwhile; ?></ul>
    </div><!– End Shade –>
    </div><!– End Slider –>
    </div><!– End Wrapper –>”

    By eliminating the space, I ended Lis' problem of the $end.

  • Justin

    Thanks, but i am still having issues. (http://shadesofgrayjournal.com)

    As you can see, the image isnt working and the size is all messed up. im pretty sure i enlarged all the width sizes in the css but it still dosnt want to work. also, the image is missing.

  • hnns

    Hi. This is really really cool!

    However, at least for me it screws up in Safari (Mac).

    check it out: http://tinyurl.com/ppcfrs

    Any ideas? Am I just incapable??

  • hnns

    It was my (CSS) fault. Fixed now.

  • M.L.

    I do not know what I am doing wrong. I can not get it to work I keep getting this error:
    Parse error: syntax error, unexpected '=' in /home/liberate/public_html/creativiteamarketingandevents/wp-content/themes/creativitea2/index.php on line 13

    Here is what my code looks like:

    <div id=”wrapper”>
    <div id=”slider”>
    <div class=”scroll”>
    <div class=”scrollContainer”>
    <?php
    $postcount=0;

    $featured_query=new WP_Query(‘showposts=3’);

    while ($featured_query->have_posts()) : $featured_query->the_post();

    $do_not_duplicate[]=get_the_ID();
    $postcount++;?>
    <div id=”featured-<?php echo $postcount; ?>” class=”panel”>
    <div class=”featured_media”>

    <?php
    // get the image filename
    $value_feat_img=get_post_custom_values(“Image”);

    if (isset($value_feat_img[0])) { ?>

    <a rel=”bookmark” href=”<?php the_permalink(); ?>”><img class=”frame” src=”<?php echo bloginfo('template_url'); ?>/yourimagefolder/<?php $values=get_post_custom_values(“Image”); echo $values[0]; ?>” alt=”<?php the_title();?>” />

    <?php } ?></div>
    <div class=”featured_text”>
    <h2 class=”entry-title”>
    <a title=”Permanent Link to <?php the_title(); ?>” rel=”bookmark” href=”<?php the_permalink(); ?>”><?php the_title(); ?>
    </h2>
    <div class=”entry-content”>

    <?php the_excerpt();?></div>
    </div>
    </div>
    <!– End Panel –>

    <?php endwhile; ?></div>
    <!– End Scroll Container –></div>
    <!– End Scroll –>
    <div id=”shade”>
    <ul class=”navigation”>

    <?php
    $postcount=0;

    $featured_query=new WP_Query(‘showposts=3’);

    while ($featured_query->have_posts()) : $featured_query->the_post();

    $do_not_duplicate[]=get_the_ID();
    $postcount++;?
    <li>

    <?php // get the image filename
    $value_img=get_post_custom_values(“Image”);

    if (isset($value_img[0])) { ?>

    <a href=”#featured-<?php echo $postcount; ?>”>

    <img class=”scroller-thumb” src=”<?php echo bloginfo('template_url'); ?>/yourimagefolder/<?php $values=get_post_custom_values(“Image”); echo $values[0]; ?>” alt=”<?php the_title(); ?>” title=”<?php the_title(); ?>” />

    <?php } ?></li>
    < ?php endwhile; ?></ul>
    </div><!– End Shade –>
    </div><!– End Slider –>
    </div><!– End Wrapper –>

    WHAT AM I DOING WRONG? PLease Help…. Thanks

  • Hirvesh

    Thanks! Just what I was looking for to implement at Codefusion Lab (http://codefusionlab.co.cc)

  • http://www.club-penguin.org/ club penguin

    I was just getting ready to re-do my portfolio site and convert it to a wordpress theme, this will come in handy for my featured projects.

  • C.C.

    I was really hoping to use this. But I've been messing around with it for 2 days and it just won't work. The articles stacks on top of each other. It doesn't function at all like the one on your page. I fixed a few things that for some reason wasn't copying correctly from you code. Maybe bundling the code into a downloadable zip file would help. But I really don't want to use Yet Another Feature Content Plugin using SmoothGallery! I mean how many is enough!? Everyone is using it!

  • Sebas

    http://www.rdturboproduction.com/

    I've got 2 problems :

    $buttons is not defined
    [Break on this error] $buttons.show(); // show the navigation buttons
    coda-sli…densed.js (ligne 128)
    jQuery.easing[jQuery.easing.def] is not a function
    [Break on this error] return jQuery.easing[jQuery.easing.def](x, t, b, c, d);

    why doesnt it work ?

  • Sebas

    http://www.rdturboproduction.com/

    I've got 2 problems :

    $buttons is not defined
    [Break on this error] $buttons.show(); // show the navigation buttons
    coda-sli…densed.js (ligne 128)
    jQuery.easing[jQuery.easing.def] is not a function
    [Break on this error] return jQuery.easing[jQuery.easing.def](x, t, b, c, d);

    why doesnt it work ?

  • http://technosailor.com Aaron Brazell

    You should just turn this into a plugin and make it easy. A template tag or two. :)

    Also, since FBT is using Thesis, did you have to modify the Thesis core?

  • http://technosailor.com Aaron Brazell

    You should just turn this into a plugin and make it easy. A template tag or two. :)

    Also, since FBT is using Thesis, did you have to modify the Thesis core?

  • Shelby

    How is the height of the text box set? I'd like to make mine taller and can't figure it out.

  • sam

    Hi

    Great tutorial need this.

    Is it possible to do the same thing with pages?

  • sam

    Hi

    Great tutorial need this.

    Is it possible to do the same thing with pages?

  • http://monkey-house.ca/ Greg

    Hard to follow the tutorial! Starting with the first “code example” div, text isn't wrapping within your divs. it's bleeding under the ads and into the black area to the right (Chrome and FireFox).

    Looking forward to giving it a try, though! Might copy out the source of the tutorial just to be able to read it. ;-)

  • StJon

    Hi,
    This is a great tutorial, so I have got it working fine in my actual wordpress theme that I am working on right now.
    At first I couldn’t get the script to load using:

    <script src=”http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery-1.2.6.min.js” type=”text/javascript”></script>

    So I tried:

    <script src=”<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js” type=”text/javascript” charset=”utf-8″></script>

    Witch seems to works for me, if that helps someone.

    Also there something bugging me (a lot), I’m getting a JavaScript error in Internet Explorer since I have done this tutorial, I’m using the version: 7.0.5730.13. And I’m getting the same error when I go to fuseboxtheatre.com is there some way to fix this?
    I’m I doing something wrong?
    Help would be greatly appreciated.

  • mikhail

    HAs anyone solved this problem??

    “$featured_query = new WP_Query(‘showposts=3’); “

    I seem to get a parse syntax error too with this line of code and everything that looks like it

  • StJon

    Problem solved replace ( ‘ ) by ( ' )

    And you get:

    ” $featured_query = new WP_Query('showposts=3'); “

    That works.

  • mikhail

    Finally got it to work. It was a lot of work to get this thing working but in the end it was great cuz I really planned on getting this content slider on my site.

    Great Post!!!

  • http://twitter.com/MarkRRobertson Mark R. Robertson

    This was soo helpful. Question for you on the bonus…

    I have my page “paged” so that one can look back several weeks through the all the articles. My question is how do I make
    <?php query_posts('showposts=8'); ?>;
    work with
    <?php query_posts('paged=' . $paged); ?>

    I have it this way so that I can only show the featured slider on the first page. I tried
    <?php query_posts('showposts=8', 'paged=' . $paged); ?> but that breaks the paging. Any thoughts here…

    PS, do you do any free lance work, maybe I can hire you to help me finish.

  • http://twitter.com/MarkRRobertson Mark R. Robertson

    BTW, the other reason that I want to add a post count is that I want to control the number of posts that show up in addition to the featured ones. The problem is that when I put your code, in addition to the paging not working, it doesnt show 8 below, only shows some and must somehow be counting posts that are included in the featured rotation. Hope that makes sense.

    The full code that I have currently is:
    <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; ?>
    <?php if (!is_paged()) include ('featured.php'); ?>
    <?php query_posts('paged=' . $paged); ?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post();

    if (array_search(get_the_ID(), $do_not_duplicate) !== false)

    continue; update_post_caches($posts);
    ?>

  • http://www.webdevtuts.net/ Marcell

    Very good tutorial! Only minor errors but good.

    for every one who i having problems!

    Look for this–> < ?php endwhile; ?> and change to this <?php endwhile; ?>

    Look for this–> change ` to '

    ” $featured_query = new WP_Query('showposts=3'); “

  • Ricky

    Try to deactivate all plugins first then it will display correctly.

  • Ricky

    same problem with Lucas. Any help from somebody?

  • http://twitter.com/MarkRRobertson Mark R. Robertson

    Anyone? Would love the help…

  • http://www.coolwebdeveloper.com/plugins Featured Articles Plugin

    Hello Guys,

    We have created a new Featured Articles rotation plugin. It gives a choice from 10 pre-built themes. Automatic addition and deletion of articles from admin section.

    It even contains a ad rotator. Go check it out here – http://www.coolwebdeveloper.com/plugins

  • http://blog.monkey-house.ca/ Greg

    Pretty good plug-in!

    There are some things I would change–and admittedly, I'd rather remove the “get this plugin” button. How liberal is the plug-in's license in terms of modifying visual components including styling as well as that button?

  • marujo

    exists this tool as a plugin for wordpress?? any chance to i get the files to implement in wordpress? cool work. thanks a lot

  • justinsainton

    I'm going to work on turning this into a plugin, any one else tried yet? Any feature requests? I'll comment again when it's done.

  • Lariza

    Hi, thanks for the code, but I really cannot recommend this to anyone for two reasons: 1.the layout breaks in IE6, IE7 and IE8 (check the example website to see the problem). 2. In sub-pages IE says:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Mon, 26 Oct 2009 17:04:12 UTC

    Message: '0.offsetWidth' is null or not an object
    Line: 19
    Char: 9
    Code: 0
    URI: http://www.fuseboxtheatre.com/_wpFBX/wp-content

    This may have something to do with the fact, that my jquery png fix for IE6 doesn't work in sub pages…?

  • Lariza

    Hi again – I confirm it: png fix works if I remove line 19 (but of course the slider doesn't work the way it should anymore).

  • Tito

    Hi,

    I have been reading the tutorial and my question is where do you write this code? in the custom.css, custom_functions.php or style page. I can't seem to find where?

  • cctravis

    I got this kind of working but not sure what I am doing wrong at this point. The slider seems to be going but then there are repeat photos under it.

    clubsurfnicaragua.com/

  • cctravis

    I can not figure out how to get the thumb nails to display correctly. Someone please look at clubsurfnicaragua.com/ and let me know what I am doing wrong.

  • http://www.techmug.com/ Fraz Ahmed

    There is a broken link in above article. Correct link is http://net.tutsplus.com/working-with-cmss/build

  • You Suck

    Probably one of the worst tutorials I have ever seen

  • You Suck

    Absolute failure, I couldn't think of a worse way to execute this.

  • Fred

    I am stuck at “Integration With Wordpress”.

    Where do I place the code?
    I alrady put the paths to the js files to the header, but where do I continue?

    regards

  • http://claremontcurrents.com/ Jeremy

    I've tried incorporating this slider into a new layout I'm trying to design for my site. Unfortunately, the slider doesn't actually slide and clicking the navbuttons doesn't work either. (Though — going to the url/#featured-2 does work, which is telling, I think)

    Any ideas on how to fix this? I incorporated the code from here almost verbatim. I bet this is a js problem, and my area of expertise (ha!) is PHP.

    The problem is at: http://claremontcurrents.com/defaultblogtest

  • http://patrickhaney.com Patrick Haney

    For anyone having issues with the coda-slider-condensed.js script, I've found 2 things that need to be fixed to get things working properly. The first is simple enough, and doesn't cause much of a problem, but the line:

    $buttons.show(); // show the navigation buttons

    Doesn't actually work because $buttons is undefined. I commented it out and didn't see any negative results.

    The second thing is for the previous and next buttons. If you're noticing that the previous button doesn't work, you want to add a z-index to both buttons so that they sit above everything else in the stack order, otherwise you're really just clicking on the panels div, which does nothing.

    .scrollButtons {
    position: absolute;
    top: 60px;
    z-index: 1000;
    }

    This should take care of navigating back a panel. Hope that helps anyone still having trouble.

  • berndi

    So what code belongs to the Header.php?
    The test above is missing…

    ther: In your HEADER.PHP:
    sourcecode language=”html”]

    [/sourcecode]
    In your INDEX.P

  • http://www.mrpayday.ca Payday Loans

    I'm always looking to improve my Wordpress skills! Thank you for the tips and feedback. payday loans edmonton

  • Matt

    Thanks for this nice work!
    dizi izle

  • John

    Great post!
    dizi izle

  • http://www.focuscashloans.com cash loans online

    Eventually everything connects – people, ideas, objects. The quality of the connections is the key to quality per se.

  • http://www.focuscashloans.com bad credit payday loans

    The details are not the details. They make the design.

  • http://www.focuscashloans.com cash payday loans

    The new strategy is to teach intelligent design without calling it intelligent design.

  • http://www.unclepayday.com bad credit loans canada

    What is design? It's where you stand with a foot in two worlds – the world of technology and the world of people and human purposes – and you try to bring the two together.

  • Velvet Grooves

    Is this post still active?

  • Velvet Grooves

    Basically I can't get this code to work, but can get this URL to work:
    http://embeddedcomputingsystems.com/2/?page_id=13

    Minus the actual swaying content. It swaps between story, but doesn't slide.

  • barefootceo

    I know that a bit of time has passed with the discussion on this post, but I thought I would share a WordPress Slider Plugin that we recently created that doesn't require any coding. It's called SlideDeck.

    Check it out: http://www.slidedeck.com/wordpress/

    • Jeredrew Tankarr

      99 Bucks……

  • http://www.amandadollar.com/cheap-discount/ Bestwish

    cant wait to read what you have to share… do well in south africa n win the tile for mumbai…cheers…

  • http://www.amandaiec.com/yiwu_agent/ yiwu agent

    This is a great post and makes me think of where I can fit in. I do a little bit of everything mentioned here and I guess I have to find my competitive advantage.

  • http://www.amandaiec.com/yiwu_fair/ yiwu fair

    Good recommended website.

  • http://www.yiwuen.com/yiwu yiwu guide

    Thank you for the tutorial but I cannot make the panels work.

  • Paul_a

    for some reason all the posts that are featured are stacked up on top of one another in the the panel section. Its supposed to show 1 article at a time isn’t it?

  • Paul_a

    hey Velvet how did you fix it? I have the same problem. Strange thing is is it sways between content just fine in my localhost but on my webhost it just swaps without sliding

  • Paul_a

    for whom ever cares… I figured it out. If you are having this problem that means the scroll function is not being recognized in the coda. I recommend you use firebug for firefox to debug it!

  • http://www.filminiizle.com filmini izle

    I get an error related to the Slider-effect. My page giving the error. Can you help

  • http://www.resimlerii.net Resimleri

    Great.

  • http://www.domain2host.in Domain Registration

    Nice blog. I will keep visiting this blog very often.

  • http://www.drmustafaerarslan.net/ panax

    The slider seems to be going but then there are repeat photos under it.

  • http://www.drmustafaerarslan.net/ panax

     I wrote something similar, using jFlow but this is way more in depth, and I like the use of thumbnails and clean code

  • http://www.drmustafaerarslan.org/ panax

    Thanks for the advice, this was a great project with my son

  • http://www.drmustafaerarslan.org/ panax

    Thanks for the advice, this was a great project with my son

  • http://www.drmustafaerarslan.org/ panax

    I was using the wordpress default theme and after a lot of playing around discovered that my problem was related to the content div in the style sheet. s

  • http://www.drmustafaerarslan.org/ panax

    Very cool and interesting article

  • http://www.drmustafaerarslan.net/ panax

    Thanks for the detailed tutorial