Replacing Thesis Post Image with WordPress Post Thumbnail

This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.

Thesis comes with a feature called the Thesis Post Image. When you associate an image with a post, you can easily resize and crop it to whatever dimensions you want anywhere on the site (see my post on Custom Images). But it’s a bit difficult to use for multiple reasons:

  • You have to upload an image, then copy the image’s URL, close the upload window, then paste the URL in a text box on the post page. It’s not very intuitive for non-technical people to use.
  • It displays the full-size image on the featured posts and single post pages. A lot of times a client will upload an image that’s too large, thinking Thesis will just resize it. It resizes all the thumbnails but leaves the original on the main post.

WordPress has a great new featured called WordPress Post Thumbnails. When activated, you’ll see a “Set Featured Image” button in the post editor (see the image at the top). You click this, are taken to the upload screen to upload your image, and then you press “Use as Featured”. That’s all you have to do – no copying and pasting of URL’s.

There is a downside to this solution though. You have to manually code in the dimensions you want the thumbnails to be in your custom_functions.php file. If you add a new image size in the future, you’ll have to use the Regenerate Thumbnails plugin to go through all your images and make new thumbnails (it makes the thumbnails when the image is uploaded, so if you change the thumbnail dimensions all uploaded images will be wrong).

None of these issues are a big deal if you’re doing a project for a client, since you’ll be setting up the post images for them and they won’t need to resize them in the future (and if they do, they can hire you to install the plugin and click “Regenerate”).

So, here’s how you add WordPress Post Image support to Thesis. I’m going to post all the code, then walk you through what it’s doing.
[php]/* Image Sizes */
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 500, 400 );
add_image_size( ‘teaser-image’, 250, 115, true);

add_action(‘thesis_hook_before_post’,’add_thumbnail’);
function add_thumbnail() {
if(has_post_thumbnail() && is_single()):
echo ‘<p>’.get_the_post_thumbnail().'</p>’;
elseif(has_post_thumbnail()):
echo ‘<p><a href="’.get_permalink().’">’.get_the_post_thumbnail().'</a></p>’;
endif;
}

add_action(‘thesis_hook_before_teaser’,’teaser_thumbnail’);
function teaser_thumbnail() {
if(has_post_thumbnail()):
echo ‘<p><a href="’.get_permalink().’">’; the_post_thumbnail(‘teaser-image’);
echo ‘</a></p>’;
endif;
}[/php]

  • The first line, add_theme_support( 'post-thumbnails' ) , tells WordPress that this theme supports Post Thumbnails, so the post editor should have the featured image box. This is why you don’t already see it in Thesis.
  • The next line defines the default size of a post thumbnail. If you just use ( number , number ) then it will use “Box resize mode” which will scale the image to fit within a box of that dimensions (no cropping). Note that you should set this to whatever you want. I have it set for a maximum of 500px wide and 400px tall.
  • The next line defines a new image size (this one is for teasers). By adding “true” to the conditions it switches it to hard-crop mode, where it will always make a thumbnail of exactly those dimensions. Set this to whatever you’d like. I have it set to crop the image to 250px wide by 115px tall.
  • The next block of code is the function that adds the post thumbnail to the beginning of the post. It basically says “if this post has a thumbnail and we’re on a single page, just show the image. If we’re anywhere else (like the homepage) make the image a link to the single post.”
  • The next block of code is the function that adds the post thumbnail to teasers. It just says “if this post has a thumbnail, stick the teaser version of the image at the top and make it click through to the full post.” Since it uses the hook thesis_hook_before_teaser, it will only execute on teaser posts.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Nanette says

    I am working with this code and I am wondering if it is possible to have the thumbnail image on the home page be below the Headline and on the single page have the image be above the headline?

    • Bill Erickson says

      Yes you can. You’ll want to break the first function into two – one for single and one for homepage.

      add_action('thesis_hook_before_headline','add_single_thumbnail');
      function add_single_thumbnail() {
      if(has_post_thumbnail() && !s_single()):
      echo '<p>'.get_the_post_thumbnail().'</p>';
      endif;
      }
      add_action('thesis_hook_before_post', 'add_home_thumbnail');
      function add_single_thumbnail() {
      if(!is_single() && has_post_thumbnail()):
      echo '<p><a href="'.get_permalink().'" rel="nofollow">'.get_the_post_thumbnail().'</a></p>';
      endif;
      }

  2. serge says

    Hi Bill, some nice php here!

    I’ve gone a little bit further, i created a function originally (now it is a plugin for thesis) that checks if a wp feaztured image is set (on save_post hook) and if it is – it populates thesis_post_image field. Which is more user friendly. ( I have always clients just uncapable to use custom fields or php snippets)

    you’ve gor video here (btw don’t forget to grab your affiliate link 😉 )

    http://creersitepro.com/wordpress-featured-image-thesis-theme/

    cheers,
    serge

    • Bill Erickson says

      add_action('thesis_hook_before_teaser','teaser_thumbnail');
      function teaser_thumbnail() {
      if(is_home() && has_post_thumbnail()):
      echo '<p><a href="'.get_permalink().'" rel="nofollow">'; the_post_thumbnail('teaser-image');
      echo '</a></p>';
      endif;
      }

  3. JACK says

    excellent post.

    i have teasers appearing on the homepage, but trying to figure out a few tweaks.

    1. how can we display the teaser on category and archive pages too?
    2. how do i display the teaser under the title? i was certain my thesis settings were correct, but unsure if your code (which is great btw) overrides thesis settings.
    3. if you’re posting a youtube video, then flushing left with text right won’t work. is it possible to have the thumbnail appear under the main content of each post? right now, i have no thumbnails in posts as it throws off the design, but having the thumbnail appear at the bottom is good, because then facebook will use that image when your site gets liked (if no image is on the page, they use default or no image).

    thanks!!

  4. crankers says

    eventually figured it out with a mixture of the Get Image plugin and a different code in the custom functions file.

  5. Richard says

    I’ve been having quite a bit of hassle with non displaying thumbnails since I moved to Thesis a couple of months ago. It has been driving me nuts and then I came across your article and code. I actually understood it and so a copy and code paste later – hey presto! I have working thumbnails.
    Thanks a lot.

  6. David Radovanovic says

    Serge, I have no problem adding hooks and filters to the Thesis custom_functions.php file. How about sharing your code. It seems to be a more logically way the WP Feature Image dilemma. Plugins only add bloat to a site and sloooows it down. Thanks.