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.
<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>
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:
<?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++;
?>
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.
<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>
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:
<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>
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:
<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>
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.
<?php endwhile; ?>
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.
<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>
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:
<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) -->
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:
img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}
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)
<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 -->
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:
<?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; ?>;
The 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{
}
Go Media is a creative agency based in Cleveland, Ohio. Besides the GoMediaZine, we also work for clients and sell stock artwork and design files on the Arsenal.
January 28th, 2009 at 10:39 am -
This is awesome! Good to see some sexy web dev tutorials on the zine now.
January 28th, 2009 at 10:48 am -
I’ll be following this tutorial next weekend. Thanks for sharing your process John!
January 28th, 2009 at 10:51 am -
Amazing! I’ll be trying this out myself. It’s great to see a web-based tut on here, thanks ‘jsexton’!
January 28th, 2009 at 1:26 pm -
What happens when you have more than 3 entries? The fusebox example only shows three in the slideshow
January 28th, 2009 at 1:43 pm -
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!
January 28th, 2009 at 4:00 pm -
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!
January 28th, 2009 at 9:26 pm -
Wow this is really cool, thanks for the detailed process and is something that I will look at for future projects.
January 29th, 2009 at 12:02 pm -
I am TOTALLY USING THIS!!
Wicked cool beans.
January 30th, 2009 at 1:33 am -
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!
February 1st, 2009 at 2:23 pm -
good tutorial really is, might use it for next project. wonder what else jquery can do, it like unlimited.
February 2nd, 2009 at 4:14 pm -
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?
February 3rd, 2009 at 11:28 am -
Thank you for the tutorial but I cannot make the panels work.
They just appear one under the other.
Any idea?
February 4th, 2009 at 2:18 pm -
If the panels are just appearing under one another, you may have forgotten to include the javascript files.
February 7th, 2009 at 11:27 am -
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.
February 7th, 2009 at 1:58 pm -
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
February 9th, 2009 at 4:21 pm -
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.
February 9th, 2009 at 4:49 pm -
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”>
February 9th, 2009 at 5:10 pm -
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.
February 10th, 2009 at 11:24 am -
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.
February 15th, 2009 at 11:58 pm -
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.
February 16th, 2009 at 3:10 pm -
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.
February 19th, 2009 at 4:05 pm -
Great tutorial… but I REALLY got lost somewhere! http://embeddedcomputingsystems.com/2/?page_id=13
What am I doing wrong?
February 20th, 2009 at 9:15 pm -
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. ;)
February 20th, 2009 at 9:19 pm -
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?
February 23rd, 2009 at 3:30 pm -
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
February 23rd, 2009 at 7:44 pm -
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 andwp_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.
February 24th, 2009 at 6:09 pm -
Thanks for the feedback and tips. I’m always looking to improve my Wordpress skills!
February 26th, 2009 at 5:40 am -
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?
February 26th, 2009 at 1:06 pm -
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.
February 27th, 2009 at 11:22 am -
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?
February 27th, 2009 at 12:14 pm -
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.
February 27th, 2009 at 5:22 pm -
@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.
March 2nd, 2009 at 8:54 pm -
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!
March 2nd, 2009 at 9:11 pm -
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!
March 4th, 2009 at 8:22 pm -
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
March 7th, 2009 at 12:00 am -
nvm my script wasnt loaded correctly !!
March 12th, 2009 at 4:23 am -
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?
March 28th, 2009 at 1:17 pm -
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.
March 28th, 2009 at 4:32 pm -
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” ?
March 28th, 2009 at 4:32 pm -
or category
March 30th, 2009 at 10:02 am -
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.
April 5th, 2009 at 6:40 am -
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.
April 5th, 2009 at 6:50 am -
Seesmic video reply from Disqus.
April 7th, 2009 at 6:59 pm -
How much would you charge if I asked you to do this for my wordpress blog?
April 21st, 2009 at 5:46 am -
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?
May 6th, 2009 at 9:06 pm -
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.
May 23rd, 2009 at 12:40 pm -
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.
May 24th, 2009 at 5:25 pm -
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??
May 25th, 2009 at 8:31 am -
It was my (CSS) fault. Fixed now.
May 27th, 2009 at 11:19 am -
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
June 1st, 2009 at 3:43 am -
Thanks! Just what I was looking for to implement at Codefusion Lab (http://codefusionlab.co.cc)
June 8th, 2009 at 5:03 am -
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.
June 11th, 2009 at 5:01 pm -
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!
June 13th, 2009 at 5:11 pm -
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 ?
June 13th, 2009 at 6:11 pm -
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 ?
June 24th, 2009 at 2:03 pm -
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?
June 24th, 2009 at 3:03 pm -
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?
June 25th, 2009 at 2:26 pm -
How is the height of the text box set? I'd like to make mine taller and can't figure it out.
July 5th, 2009 at 7:34 am -
Hi
Great tutorial need this.
Is it possible to do the same thing with pages?
July 5th, 2009 at 8:34 am -
Hi
Great tutorial need this.
Is it possible to do the same thing with pages?
July 30th, 2009 at 12:47 am -
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. ;-)
July 30th, 2009 at 9:29 pm -
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.
July 31st, 2009 at 5:09 am -
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
July 31st, 2009 at 6:31 am -
Problem solved replace ( ‘ ) by ( ' )
And you get:
” $featured_query = new WP_Query('showposts=3'); “
That works.
July 31st, 2009 at 9:23 am -
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!!!
August 7th, 2009 at 1:27 pm -
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.
August 7th, 2009 at 1:29 pm -
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);
?>
August 8th, 2009 at 10:33 pm -
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'); “
August 17th, 2009 at 4:39 pm -
Try to deactivate all plugins first then it will display correctly.
August 17th, 2009 at 4:43 pm -
same problem with Lucas. Any help from somebody?
August 18th, 2009 at 2:09 pm -
Anyone? Would love the help…
August 18th, 2009 at 4:01 pm -
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
August 19th, 2009 at 2:02 pm -
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?
August 20th, 2009 at 5:03 pm -
exists this tool as a plugin for wordpress?? any chance to i get the files to implement in wordpress? cool work. thanks a lot
October 11th, 2009 at 12:15 am -
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.
October 26th, 2009 at 1:13 pm -
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…?
October 26th, 2009 at 1:45 pm -
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).
November 27th, 2009 at 1:49 am -
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?
December 4th, 2009 at 3:21 am -
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/
December 4th, 2009 at 12:35 pm -
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.
December 30th, 2009 at 1:52 am -
There is a broken link in above article. Correct link is http://net.tutsplus.com/working-with-cmss/build...
January 23rd, 2010 at 4:11 pm -
Probably one of the worst tutorials I have ever seen
January 23rd, 2010 at 5:07 pm -
Absolute failure, I couldn't think of a worse way to execute this.
February 19th, 2010 at 4:38 am -
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
April 8th, 2010 at 4:01 pm -
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
April 21st, 2010 at 11:41 am -
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.
April 23rd, 2010 at 6:45 am -
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
April 30th, 2010 at 5:57 pm -
I'm always looking to improve my Wordpress skills! Thank you for the tips and feedback. payday loans edmonton
May 5th, 2010 at 4:24 am -
Thanks for this nice work!
dizi izle
May 18th, 2010 at 1:03 am -
Great post!
dizi izle
June 7th, 2010 at 6:26 pm -
Eventually everything connects – people, ideas, objects. The quality of the connections is the key to quality per se.
June 7th, 2010 at 6:27 pm -
The details are not the details. They make the design.
June 7th, 2010 at 6:30 pm -
The new strategy is to teach intelligent design without calling it intelligent design.
June 7th, 2010 at 6:32 pm -
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.
June 10th, 2010 at 7:23 pm -
Is this post still active?
June 10th, 2010 at 7:24 pm -
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.
August 7th, 2010 at 1:33 pm -
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/
August 30th, 2010 at 6:41 am -
cant wait to read what you have to share… do well in south africa n win the tile for mumbai…cheers…
August 30th, 2010 at 6:42 am -
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.