Add Article Thumbnails to WordPress with Rotating CSS

Written by Chris Roane

Most of the articles that have been posted recently on this website have an image that is displayed on the home page, categories and post pages. How I was doing this before was simply adding an image to the beginning of the WordPress post and putting a css style that had “float:left” on the image. However, I recently came across info that said having an article thumbnail was a feature that was integrated into WordPress 2.x . I discovered a solution that doesn’t require a WordPress plugin and is simple to implement into your WordPress blog.

You can take a look at the tutorial at That tutorial will take you through some preliminary steps you need to take to add this ability to your theme (so it becomes an option when you add a new post).

In this article I go through the code specifically that I use for this site to rotate the css style for each image, so that every other image is display on the left or right side of the text. You will want to add the code everywhere you want this “rotating image effect” for your article image thumbnails (take a look at the home page for an example).

Step #1

The first thing you will want to do is create the CSS styles in your style sheet, which most likely is the style.css file in your theme folder. Below is the CSS code that I use on this site.

.thumbLeft {

.thumbRight {

Step #2

Place the following PHP code right after the “if (have_posts()):” code in the template file you are working with (which probably will be index.php or archive.php).

$thumbClass1 = 'thumbLeft';
$thumbClass2 = 'thumbRight';
$thumbClass = 'thumbClass2';

Step #3

Put the following code somewhere in your while loop. I have mine after the “meta” div. Where you place it in your template depends on where exactly you want the image to show up.

if (has_post_thumbnail())
	if($thumbClass == 'thumbClass2')
		$thumbClass = 'thumbClass1';
		$thumbClass = 'thumbClass2';
	echo '<div class="' . $$thumbClass . '">';
	echo '</div>';

If you have any questions, or have any additional tips for doing this, please share these in the comments!

Did you like this article?

Enter your email address below to get notified when the site is updated. Or you can always subscribe to the RSS Feed.

Please help us spread the word about this site by tweeting, digging and sharing this article around the web (see the buttons immediately above).

Thursday, March 4th, 2010

5 Comments or Pings to Add Article Thumbnails to WordPress with Rotating CSS

  • I was very happy to discover this great site.
    I need to to thank you for your time just for this fantastic read!!
    I definitely savored every little bit of it and i also have you book-marked to see new stuff on your blog.´s last [type]

  • I like the valuable info you provide in your articles.

    I’ll bookmark your blog and check again here regularly.
    I am quite certain I will learn lots of new stuff right here!
    Best of luck for the next!
    web design awards´s last [type] ..web design awards

Trackbacks & Pings

Leave a Comment or a Question

CommentLuv badge