How To Add WordPress Post Thumbnails To Thesis

Thesis is an absolutely fantastic framework for WordPress. One of the things that is sorely lacking to date is integration of WordPress post thumbnails.

Post thumbnails have been available for use for quite some time now, and they provide a simple way of placing post images, teaser thumbnails, featured post images, thumbnail for lists of posts in your blog’s sidebar, and any other use of post images you can think of. Its not quite as efficient as the current Thesis system, but it works quite well, and the small sacrifice in terms of efficiency is well worth it for the time you’ll save if you ask me.

Setting Up Post Thumbnails

Thumbnails aren’t enabled by default, so you need to enable them manually. What you’ll need to do is place this code in custom_functions.php:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 610, 9999, true );
add_image_size( 'teaser', 150, 150, true );

There are three things involved here:

1. Post thumbnails are activated using add_theme_support( 'post-thumbnails' );
2. The default size is established using set_post_thumbnail_size( 610, 9999, true );
3. An additional thumbnail size is established using add_image_size( 'teaser', 150, 150, true );

To add additional sizes, you’ll need to add add_image_size( 'image_name', [image width in pixels], [image height in pixels], true ); to the end of that snippet.

In order to call the thumbnails for use within your theme you’ll need to use . That will call the default size. To call a size other than the default, you need to insert the name of the image used in establishing that particular size of thumbnail within the parenthesis. For the teaser image established above, it would look like .

Using The Post Thumbnails

You can use these post thumbnails in any loop on your blog for just about any purpose you can think of. For the purposes of this post, I’m just going to show you how to set up post images and teaser images like you would normally see in a Thesis installation.

Setting Up Post Images

Thesis allows you to place post images above or below the post headline, and floated to the left or right. I’m not going to show you how to create post options to allow for that kind of differential (though its certainly possible). For this post, I’m going to show you how to hard code the post image in any of those locations.

First, you need to call the post image in a function. The image should be linked to the single post if it is appearing in a list of posts. If it is appearing on the single post, it should not be linked. That code looks like this:

function post_image() {
	if(has_post_thumbnail()) {
		if(is_single()) { ?>
			<div class="post_image">
				<? the_post_thumbnail(); ?>
			</div>
		<? }
		else { ?>
			<div class="post_image">
				<a href="<? the_permalink(); ?>" title="<? the_title(); ?>"><? the_post_thumbnail(); ?></a>
			</div>
		<? }
	}
}

We’ve also added a conditional (if( has_post_thumbnail() )) to make sure the post image is set. If its not, then this code won’t be applied.

Second, you need to use a Thesis hook to apply the post image below or above the headline. To place it above, use add_action( 'thesis_hook_before_headline', 'post_image' );.

To place it below, use add_action( 'thesis_hook_before_post', 'post_image' );.

Next, we need to write some CSS so that the post image fits with your design and the location in which you’ve placed it. You’ll probably need to add to this depending on your particular design, but here’s a starting point.

.post_image { margin-bottom: 1em; margin-left: 1em; float: right; }

Of course, if you don’t want to float your image to the right, you’ll want to remove margin-left: 1em; float: right;. If you want to float left, you’ll need to use margin-right: 1em; float: left; in its place.

You may also want to make use of the margin, padding, background, and border properties. That, however, is largely dependent upon your design.

Setting Up Teaser Images

Like post images, you need to start with a function to setup the post image. The one main difference is that teaser images will always be linked to the single post because they will never show up on the actual single post. That function looks like this:

function teaser_image() {
	if(has_post_thumbnail()) { ?>
		<div class="post_image">
			<a href="<? the_permalink(); ?>" title="<? the_title(); ?>"><? the_post_thumbnail(); ?></a>
		</div>
	<? }
}

Again, we’re using a conditional to dictate that if their is no post thumbnail set, then the code is not applied. In order to add this to our teaser, we need to use add_action( 'thesis_hook_before_teaser_headline', 'teaser_image' ); or add_action( 'thesis_hook_after_teaser_headline', 'teaser_image' );. Those should be fairly self explanatory ;)

Once again, you’ll need to add CSS to make this fit with your design. A good starting point is the exact same as the post images. Again, the CSS looks like:

.post_image { margin-bottom: 1em; margin-left: 1em; float: right; }

Again, depending on the specifics of your design, you’ll probably want to make use of margin, padding, background, and border in your CSS code.

Other Uses

You can use WP post thumbnails for featured posts, related posts in your post footer, popular or favorite posts in your sidebar, and the list goes on. If you’ve got any questions, please let me know in the comments!