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 wpbeginner.com. 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 {
	position:relative;
	float:left;
	padding-right:15px;
	padding-bottom:10px;
}

.thumbRight {
	position:relative;
	float:right;
	padding-left:15px;
	padding-bottom:10px;
}

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).

<?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.

<?php
if (has_post_thumbnail())
{
	if($thumbClass == 'thumbClass2')
	{
		$thumbClass = 'thumbClass1';
	}
	else
	{
		$thumbClass = 'thumbClass2';
	}	
					
	echo '<div class="' . $$thumbClass . '">';
	the_post_thumbnail();
	echo '</div>';
}
?>

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