Advertisement
WordPress

How to Make a Featured Post Carousel for WordPress

by

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
  • Code
    Creative Coding
    Advanced Use of Attachments in WordPress: Creating Custom Queries for AttachmentsAdvanced use of attachments in wordpress 400
    This tutorial is the second in a four part series in which you'll learn some techniques for working with images in attachments in WordPress which give you advanced options.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding Featured ImagesCreating wordpress theme from html 400
    You've now worked through a number of steps to create a WordPress theme from static HTML files. Specifically, we've looked covered the following: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages creating an archive template file. Your theme now has a template file for displaying archive pages, but at the moment it's not displaying images properly. In this tutorial, you'll learn how to add featured image support to your theme and how to display and style them in your archive template.Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…