It's becoming more and more common for blogs to feature certain posts at the top of the page. In this tutorial, we're going to show you how to implement this in WordPress. We'll be using the default theme, Kubrik, as our base theme, but it should be adaptable to most themes with some modification. There's very little code and featuring posts is simple.
What we're shooting for
We're going to be modifying the Kubrik theme that comes prepackaged in WordPress to be able to feature posts at the top of the page. This tutorial has only been tested on WordPress 2.5.x but it should work on the 2.3.x series as well. We're going to assume you're using 2.5.x or above. By the end of the tutorial, you'll have something like this:
Step 1 - Creating the default image
Before we do anything, go to the themes folder of your WordPress installation (wp-content/themes/) and make a backup of the "default" folder. This is the Kubrik theme we will be editing. The backup is in case you want to revert back to the original, unmodified theme.
First, we're going to make a default image in the event no featured post image is specified. Let's keep it sweet and simple for this tutorial. Open up your preferred image editor and create a 233x130px rectangle with 10px radius rounded corners. I made the background a white to grey radial gradient and put some text on top. This is what I have:
Save the image as "no-featured-image.jpg" in the "images" folder that is inside the "default" folder.
Step 2 - Add the PHP code
Now for the code. Open the "header.php" file inside the "default" folder. At the end of the file, you will see a div block and an hr tag like this:
<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
Between the ending div tag and the hr, insert the following code:
<div id="featured">
<ul id="carousel">
<?php
$featured_posts = get_posts('numberposts=3&category=1');
foreach( $featured_posts as $post ) {
$custom_image = get_post_custom_values('featured_image', $post->ID);
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";
printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
}
?>
</ul>
<div class="clear"></div>
</div>
This code will output three images in an unordered list. Each image is a link to a featured post. We'll talk about how to configure the code after we add the CSS.
Step 3 - Style with CSS
Next we need to add some CSS styles. Open up the "style.css" file and put the following code below at the end of the file. All this does is float the list elements to the left and space them out evenly.
/* Featured Post Carousel */
#featured {
padding: 10px 10px 0 20px;
}
#carousel {
list-style: none;
margin: 0;
padding: 0;
}
#carousel li {
float: left;
padding: 0;
margin-right: 10px;
}
Step 4 - Understanding the code
Let's take a look at what the code we added does. Inside the container div (id="featured") we have an unordered list and some PHP code to generate list elements.
$featured_posts = get_posts('numberposts=3&category=<strong>1</strong>');
The first line shown above retrieves the post information using the get_posts() function and assigns the post data to the $featured_posts variable. The get_posts() function excepts a single parameter in the form of a query string similar to what you might see at the end of a URL (sans the initial question mark). The first parameter is "numberposts" which we've set to 3 for this tutorial. This parameter sets how many featured posts we will be showing. The second parameter is "category" which we've set to 1. The value of the "category" parameter should be the ID of the category you are using for your featured posts. You can find the ID of a category by going to the category management page and hovering your mouse over a category title. The status bar will show a link. The last number is the category ID.
The next line is a foreach loop that will loop through the posts we've retrieved using the get_posts() function. The first line inside the foreach loop retrieves the URL of the image using the get_post_custom_values() function and stores the URL in the $custom_image variable. The first parameter specifies the key of the custom value we're using, "featured_image". The second parameter specifies what post we're getting the value from.
$custom_image = get_post_custom_values('featured_image', $post->ID);
In the next line we do a quick check to see if an image was indeed specified. If no image was specified, we assign the $image variable the URL of the default image. If an image was specified, we use that.
$image = $custom_image[0] ? $custom_image[0] : get_bloginfo("template_directory")."/images/no-featured-image.jpg";
In the last line we actually output the list elements. Each element is an image that links to the featured post.
printf('<li><a href="%s" title="%s"><img src="%s" alt="%s" /></a></li>', get_permalink($post->ID), $post->post_title, $image, $post->post_title);
Step 5 - Creating Featured Posts
That's it! Now, whenever you want to feature a post, assign it to the featured category and create a custom value with a key of "featured_image" and a value of the image URL. Images should be 233x130px.
See It in Action
You can view the theme in action on our NETTUTS WordPress Demo server:
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Nate July 21st
Pretty interesting stuff, thanks.
TPN July 21st
Cool. Thanks.
Tommy Day July 21st
Sweet!
Braden Keith July 21st
Is this turning into wordpresstuts? I’m not finding very applicable stuff here anymore because I don’t have wordpress.
Thomas Evan Lecklider July 21st
Is there any way you know of to extract an image from a post without having to create a custom field? WP spits out all images wrapped in paragraph tags, making it difficult to style separately from the rest of the paragraphs.
ilham saibi July 21st
nice, thanks.
Collis Ta'eed July 21st
@Braden: Hiho! Yes it has been a little WordPress centric lately! But don’t worry I’ve just loaded 3 non-WP posts into the system for the next three days
Andrei Constantin July 21st
I see no problem regarding wordpress, as long as there is a demand for it. Lots of people are using it and will do so in the future. I do however expect the non-wp tuts to come
Mark Abucayon July 22nd
That was very nice.. thank you for sharing this one.
Taote July 22nd
Why is the word carousel in the title? I don´t think it is a carousel. When I read it, I thought you would be able to click and navigate forward and backward, through more posts.
Ben Griffiths July 22nd
Interesting, thanks
Glad to see a few non WP posts are coming though!
Shane July 22nd
Yay for wordpress
thanks for posting.
Giuseppe July 22nd
Is putting the image URL in a special field the best solution? I think it would be better to fetch the image from the post uploads.
Tom July 22nd
Love your Wordpress tutorials, keep up the good job!
Chris Cagle July 22nd
Very nice - I see how I could have optimized my own tutorial on this same topic a little better… http://www.cagintranet.com/archive/wordpress-tip-3-awesome-custom-field-tricks/
Apt Design July 22nd
Awesome stuff. Amazing that you can do something so cool with so little code. Thanks!
Chris July 22nd
Nice tut, but wheres the “carousel”? All I see is static featured images.
Braden Keith July 22nd
@Collis
THANKS! Can’t wait to see them!
Scienceo July 22nd
Your articles and advices are always very well done … If I had time, it is with pleasure that I will have put them in action ! Thanks a lot ! (a french lector)
Nouman Saleem July 22nd
wait….who’s not using wordpress?
haha. I don’t mind em, but the in general tutorials are great as well.
Dan July 22nd
I’m hoping for less Wordpress content as well. Sounds like it’s coming though, so I’m excited. I like what non-wordpress stuff is here so far.
Joefrey Mahusay July 22nd
This is very helpful to us WP developer. Thanks!
Jim July 22nd
Please keep the Wordpress tuts coming. They’re incredibly helpful, relevant, and desired!
Thanks!
Andrew July 22nd
I’ve been looking to do something like this with one of my blogs. Thanks for the tut, that should give me the motivation I need to actually get it done!
Connor July 23rd
Nice, though I was expecting something that maybe was animated…
Christopher Rogers July 24th
Awesome tutorial, exactly what I was looking for. But I can’t seem to get the article title to appear on the bottom of the image as you do in the demo. The images are loading fine. Can you tell me what to look for?
BeyondRandom July 25th
awesome stuff! Will have to get this going when I get home! Thanks
Scott Bernadot July 25th
Great Tutorial, but like another said, where is the carousel?
For those looking for a carousel, check out my site:
http://wpforsale.com/premium-wordpress-plugins/wordpress-image-carousel-plugin/
I am using it on my home page.
Gabe Diaz July 25th
Christopher Rogers - In the demo the section titles are actually over the background image in one jpg. So you have an image preview for the last 3 entries from a specific category, in this case category 1.
I guess they decided to call this a carousel in that it will auto update or push the newest post with image up into one of those 3 spots.
Instead of having 3 images up top for your last 3 posts and have summaries of the same posts underneath you can also edit your wordpress loop to offset the summaries in the body by 3(or any number you choose) so that you see your latest 3 images up to and the 4th with summary in the body of the site.
Giuseppe - You can edit the php to look for your custom field image in the upload folder within wordpress. Doing so you would be able to use the post upload feature built into wordpress and all you would need to put into the value field would be year/month/filename IE 2008/07/file.ext
Only drawback to uploading thumbs, or main images via the upload file(s) in WP2.6 is that all uploads via the uploads file(s) button link the uploads to the post. So if you were upload a gallery with 5 images and a thumbnail to a post, and inserted that gallery into your post you would see 6 images since your thumbnail is included. Easy work around…create a page solely for your thumbnails so that they are not included with any other galleries
Hope this helps!
googlefish July 28th
it’s cool, thanks a lot!
Bryan McConnahea July 30th
Awesome post, this is just what I was looking for, in order to complete my new blog design. But, dude please tell me what editor you are using in the images above. It looks awesome. Let me know when you get a chance.
Thanks again!
Bryan
Jeff July 31st
I just had to do something like this for a client, and ended up contriving some convoluted solution having to do with categorization and tagging, outrageous PHP and so forth. This is FAR more elegant; I think I’m going to move to this model.
Thanks!
Bryan August 1st
Hey - I wrote a day or so ago, and never heard back. Just a few questions if you wouldn’t mind answering them?
1. Is there any way to, instead of using a default image when none is specified, use no image at all (so it’s just normal text with no image)?
2. What editor are you using in the images above?
Thanks,
Bryan
Phil August 1st
Hey, I would love to know if there was a trick out there that would do the thumbnails automatically, because I know myself. If I would add this, I’d do it for a month or so and then get too lazy to do thumbnails and thus not feature any posts anymore.
Somebody an idea or helping link? I googled, I failed.
James Lao August 1st
@Bryan
1. Yes. Instead of using the ternary operator to assign the $image variable, just test $custom_image[0] with an if statement and show an image on true and whatever text you want on false.
2. Not sure what you mean by ‘editor’. If you mean the admin style, it’s new in WordPress 2.6.x
@Phil
Look into the GD library for graphics processing.
selcuk August 3rd
thanks, i discover yesterday nettuts.com, very useful things for me.
tob109 August 6th
Very nice, has anyone done this with pages in stead of posts?
polaris September 2nd
like it
Chelle September 4th
That’s pretty neat
I am bookmarking this to play with later on my next redesign kick 
Goobi September 18th
Thank you so much for this! Will definitely implement this on SA.
page September 18th
Wow
thanks
iPeter September 21st
Is there a way to rearrange the featured posts? It seems that they line up according to the date they were published?
kareem November 25th
this is wonderful tutorial i will put acopy of this lesson on
my site here
http://www.as7ap4you.com
Saman Sadeghi December 18th
Great tutorial! Now, how can we have the featured article advance automatically?
Essentially, I’d love to learn how to display one article (tagged as “Featured”) and, after a couple of seconds, have this automatically advance to the next article with the same tag.
jill December 21st
I agree with many of you - this is not a CAROUSEL. This is just placing 3 static images on top of a page.
I need something like this - but with the ability to scroll through more posts. Is there a quick fix to add some LEFT and RIGHT arrows, and add the ability to scroll through multiple posts?
blake December 21st
not a carousel. misleading.
Add Your Comment
( GET A GRAVATAR )Your Name January 9th
Trackbacks