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

      • Bill Erickson says

        You’ll need to create a new custom field, let’s call it “clickthrough_url”, and put the URL in it.

        Then right after this line ( if(has_post_thumbnail() && is_single()): ) put the following:

        global $post;
        $url = get_post_meta($post->ID,'clickthrough_url',true);

        Then, replace the line you highlighted with this:

        echo '<a href="'.$url.'" rel="nofollow">';

        • Paul says

          Thanks Bill.
          I’ve managed to get the thumbs working but the custom field url is not. The link is now going to the home page though.

          Also, I’m trying to add the featured image from a url instead of uploading. There is no ‘use as featured’ link for this method. Is there a way around this, as all my images across my site will be sourced from my images subdomain.
          cheers

          • Bill Erickson says

            Using WordPress’ Post Thumbnail you must upload the image using the uploader. Basically it’s creating a post for each image uploaded.

  1. Dixie Vogel says

    Thank you for this post. I have been interested in replacing the Thesis-specific thumbnails with WP generated thumbs, and this gave me what I needed to accomplish that. Much appreciated!

    • tom says

      Maybe let me precise my problem.
      When you open the featured post (the first one on homepage) the image displays. However, I’d like it to be dispalyed also above the post on the main blog page. I modified the code you gave because I don’t want pics in teasers (there must be something worng with this function as there’s no way I can change the width of the image). Here is my script:

      set_post_thumbnail_size( 595, 150, true );
      add_action(‘thesis_hook_before_content’,’add_thumbnail’);
      function add_thumbnail() {
      if(has_post_thumbnail() && is_single ()):
      echo ‘‘.get_the_post_thumbnail().’‘;
      endif;
      }

      I will be grateful for any help.

      • Bill Erickson says

        You need to change “thesis_hook_before_content” to “thesis_hook_before_post“. The first one loads code before the block of posts, and the second one loads code at the beginning of a post.

        Also, if you’ve changed the dimensions of the post thumbnails, you’ll need to use the Regenerate Thumbnails plugin to make new thumbnails at those new dimensions: http://wordpress.org/extend/plugins/regenerate-thumbnails/

      • Bill Erickson says

        Also notice that you shouldn’t remove the is_single part. The code is saying “if there’s a post thumbnail and we’re on a single post page, just display the image. If there’s a post thumbnail and we’re not on a single post page (so on the homepage) display the image and make it link to the post.”

  2. tom says

    Thanks for your reply. What if I want to have the image before the block of posts? Is there any chance that the image would be dispalyed on the homepage (of the blog) as well as on the single post page?

    • Bill Erickson says

      Where is this image being defined? The post thumbnail is associated with a post. The homepage is an aggregation of posts, not a single post (which is why it doesn’t have a single image).

      If you want an image at the top of your homepage and on single posts, you’ll need to manually define it. Upload an image to your /custom/images folder, then stick something like this in your custom_functions.php file:


      add_action('thesis_hook_before_content','top_image');
      function top_image() { ?>
      <img src="<?php bloginfo('template_url');?>/custom/images/top-image.jpg" />
      &lt?php }

      • tom says

        I’ve been just thinking.. How about such a solution: I make an extra “multimedia” box only on the homepage:

        function imagebox() { ?>
        if (is_home()) {

        <?
        }
        }
        add_action('thesis_hook_before_content' , 'imagebox');

        I style it in .css and then if it's possible I could put beetwen the divs some code grabbing the "featured image" from the first post..

        Is it possible?

        • Bill Erickson says

          It’s possible but beyond the scope of this tutorial. If you’d like, you can send me an email and we can discuss pricing.

          Thanks

  3. Courtney says

    Hey there Bill,

    Just wanted to say that I think you’re awesome! Thanks for all of the thesis customization posts, they help tons! Hope you’re having as much fun in Austin as I am =)

    Take care,
    Courtney

  4. Will Quick says

    Hi Bill,

    This post is so tantilisingly close to what I’m looking for that I’ve just spent the last hour trying to implement it, to no avail!

    Basically I’d like to float a 100×100 post image to the left of my header in my blog I’ve just started working on.

    It seems like it should be relatively straight forward if I upload a post image into each post I write but I just can’t seem to do it… it’s driving me mental. It’s actually driving me so mental that I’ve had to have a stiff drink to calm myself down (unfortunately I have a tendancy to get over-focused on a task and can’t seem to rest until I’ve finished it… help me…)

    Anyway, all your tutorials are amazing, thank you so much!

    Will

  5. Karmen says

    Great tutorial, but for some reason the hard crop isn’t working for my post thumnail or teaser size. And Yes I have regenerate thumbnails.

    This is the code i’m using:

    [CODE]add_theme_support(‘post-thumbnails’);

    set_post_thumbnail_size( 565, 214, true );

    add_image_size(‘teaser-img’, 565, 214, true);
    add_image_size(‘homepage’, 282, 105, true);

    add_action(‘thesis_hook_before_headline’,’add_thumbnail’);
    function add_thumbnail() {
    if(has_post_thumbnail() && is_single()):
    echo ”.get_the_post_thumbnail().”;
    elseif(has_post_thumbnail()):
    echo ‘‘.get_the_post_thumbnail().’‘;
    endif;
    }

    add_action(‘thesis_hook_before_teaser_headline’,’teaser_thumbnail’);

    function teaser_thumbnail() {
    if(has_post_thumbnail()):
    echo ‘‘; the_post_thumbnail(‘teaser-img’);
    echo ‘
    ‘;
    endif;
    }
    [/CODE]

    • Bill Erickson says

      I’m not sure if this is causing the issue, but there’s some problems with your code.

      Don’t put this: echo ”.get_the_post_thumbnail().”;

      Either use this: echo get_the_post_thumbnail();

      Or this : the_post_thumbnail();

      Also, try using the_post_thumbnail(‘homepage’) at the top rather than the_post_thumbnail().