Adding a thumbnail to the WordPress Loop

This post will demonstrate how to create a loop like the one pictured below.

loop1

Our example uses the Twenty Eleven theme so this might not apply to your choice of theme. Twenty Eleven uses the content.php file by default to display content and we will be editing that file to add a thumbnail.

Let’s first look at the existing code of content.php:

<?php
/**
 * The default template for displaying content
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>

	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<header class="entry-header">
			<?php if ( is_sticky() ) : ?>
				<hgroup>
					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
				</hgroup>
			<?php else : ?>
			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
			<?php endif; ?>

			<?php if ( 'post' == get_post_type() ) : ?>
			<div class="entry-meta">
				<?php twentyeleven_posted_on(); ?>
			</div><!-- .entry-meta -->
			<?php endif; ?>

			<?php if ( comments_open() && ! post_password_required() ) : ?>
			<div class="comments-link">
				<?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'twentyeleven' ) . '</span>', _x( '1', 'comments number', 'twentyeleven' ), _x( '%', 'comments number', 'twentyeleven' ) ); ?>
			</div>
			<?php endif; ?>
		</header><!-- .entry-header -->

		<?php if ( is_search() ) : // Only display Excerpts for Search ?>
		<div class="entry-summary">
			<?php the_excerpt(); ?>
		</div><!-- .entry-summary -->
		<?php else : ?>
		<div class="entry-content">
			<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
			<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
		</div><!-- .entry-content -->
		<?php endif; ?>

		<footer class="entry-meta">
			<?php $show_sep = false; ?>
			<?php if ( is_object_in_taxonomy( get_post_type(), 'category' ) ) : // Hide category text when not supported ?>
			<?php
				/* translators: used between list items, there is a space after the comma */
				$categories_list = get_the_category_list( __( ', ', 'twentyeleven' ) );
				if ( $categories_list ):
			?>
			<span class="cat-links">
				<?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyeleven' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list );
				$show_sep = true; ?>
			</span>
			<?php endif; // End if categories ?>
			<?php endif; // End if is_object_in_taxonomy( get_post_type(), 'category' ) ?>
			<?php if ( is_object_in_taxonomy( get_post_type(), 'post_tag' ) ) : // Hide tag text when not supported ?>
			<?php
				/* translators: used between list items, there is a space after the comma */
				$tags_list = get_the_tag_list( '', __( ', ', 'twentyeleven' ) );
				if ( $tags_list ):
				if ( $show_sep ) : ?>
			<span class="sep"> | </span>
				<?php endif; // End if $show_sep ?>
			<span class="tag-links">
				<?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyeleven' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list );
				$show_sep = true; ?>
			</span>
			<?php endif; // End if $tags_list ?>
			<?php endif; // End if is_object_in_taxonomy( get_post_type(), 'post_tag' ) ?>

			<?php if ( comments_open() ) : ?>
			<?php if ( $show_sep ) : ?>
			<span class="sep"> | </span>
			<?php endif; // End if $show_sep ?>
			<span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentyeleven' ) . '</span>', __( '<b>1</b> Reply', 'twentyeleven' ), __( '<b>%</b> Replies', 'twentyeleven' ) ); ?></span>
			<?php endif; // End if comments_open() ?>

			<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
		</footer><!-- .entry-meta -->
	</article><!-- #post-<?php the_ID(); ?> -->

We will be removing a lot of the code to create a much simpler content.php file.

  • First we need to check if the post has a thumbnail (i.e. featured image). To accomplish this we will use get_the_post_thumbnail() function and not has_post_thumbnail(). The function has_post_thumbnail() seems to fail in many cases and as mentioned in the WordPress Codex our method is now recommended.
  • If the post has a thumbnail we will output a post_class “thumbnail” so we have more granular control when styling this with CSS.
  • Inside a thumbnail div we output the_post_thumbnail(‘thumbnail’) where you could replace the “thumbnail” value with a different standard WordPress image size or a custom size you have added.
  • After the thumbnail div we will open a containing div for the post body with our thumbnail.
  • Then we need to finish up our if else statement with an else condition for when there is no thumbnail. In this case we will output the normal article div used in Twenty Eleven. Alternatively you could create a default thumbnail image to be displayed when no featured image is set.

Note we have also modified a lot of other parts of the content.php file but that is outside the scope of this simple tutorial.

<?php
/**
 * The default template for displaying content
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
	
	<?php if ( '' != get_the_post_thumbnail() ) : ?>
	
		<article id="post-<?php the_ID(); ?>" <?php post_class('thumbnail'); ?>>
					
			<div class="post-thumb">
						
				<?php the_post_thumbnail('thumbnail'); ?>
							
			</div>
			
			<div class="post-thumb-body">
						
	
	<?php else : ?>
	
		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<?php endif; ?>
	
		<header class="entry-header">
		
			<?php if ( is_sticky() ) : ?>
			
				<hgroup>
				
					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
					
					<h3 class="entry-format"><?php _e( 'Featured', 'twentyeleven' ); ?></h3>
					
				</hgroup>
				
			<?php else : ?>
			
			<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
			
			<?php endif; ?>

			<?php if ( 'post' == get_post_type() ) : ?>
			
			<div class="entry-meta">
			
				<?php twentyeleven_posted_on(); ?>
				
			</div><!-- .entry-meta -->
			
			<?php endif; ?>

			
		</header><!-- .entry-header -->

		<?php if ( is_search() ) : // Only display Excerpts for Search ?>
		
		<div class="entry-summary">
		
			<?php the_excerpt(); ?>
			
		</div><!-- .entry-summary -->
		
		<?php else : ?>
		
		<div class="entry-content">
		
			<?php the_excerpt(); // Removed the content and replaced with excerpt ?>
			
		</div><!-- .entry-content -->
		
		<?php endif; ?>
		
		<?php if ( '' != get_the_post_thumbnail() ) : ?>
		
			</div><!-- #post-thumb-body -->
			
		<?php endif; ?>


		<div style="clear:both;"></div>
	</article><!-- #post-<?php the_ID(); ?> -->

And here is some CSS that will get you started although you will probably need to write some more styles to match your theme.

.post-thumb{
	float:left;
	padding-right:20px;
}

.post-thumb-body{
	float: left;
	width: 470px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.