Adding Featured Post Images in Thesis

Adding Featured Post Images in Thesis

You may have noticed that I have added a little bit of an enhancement to my themes lately, with the custom post thumbnails added to the to of some (soon to be all) posts. You may also be wondering how I did this. Well, you are in luck. Here’s how I did it.

First I started with a little tutorial over at ‘ThemeBig’ about Adding WordPress Post Thumbnails to Thesis. This was a great start but it had a few things added that I didn’t want like the teaser images and was missing something I found necessary which was the proper title attribute on the images. So here’s the custom_functions.php and custom.css additions you’ll need to make and what they do.

custom_functions.php

// Custom Featured Post Image code
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 700, 100, true );

function add_post_image() {
if(has_post_thumbnail()) { // Make sure we have a post thumbnail
if(is_single()) { // If this is a single blog post ?>

get_the_title())); ?>

The following two items Enable the post-thumbnails and sets the default post size.

add_theme_support( ‘post-thumbnails’ );

set_post_thumbnail_size( 700, 100, true );

Adding Featured Post Images in Thesis

The arguments you are using on the set_post_thumbnail_size are the image with, height, and ‘true’ tells WordPress to crop the image you provide. Since you are using Thesis, you should set the ‘width’ item (or the ‘700’ in this case) to the width of your content column. From here on out, the images you upload to your ‘Featured Image’ should be at least as wide as the width you have specified here to allow proper cropping.

The next thing we need to do is add some custom CSS.

custom.css

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

The CSS is pretty self-explanatory.

Adding Featured Images

This is done from the Edit screen of a post. On the right hand side you should have a pod that is by default under the ‘Tags’ pod. It’s labeled Featured Image. Clicking that link to ‘Set featured image’ gives you a modal. Where you can either add your own new image or use and existing image from your Media Library. From here, you DO NOT want to insert into post but use a small link at the bottom that says ‘Use as featured image’. Once this is done, You can click ‘Done’ and now your post has a featured image. If you need more help on this you can visit the Post Thumbnails page in the WordPress Codex.