WordPress Post Thumbnails Tutorial (Using Custom Fields)

This tutorial will show you how to add thumbnails for each post using a custom field, then output the thumbnails in your WordPress loop.  Many people prefer browsing using thumbnails, especially for something like a portfolio site where visuals may be more important to you and your visitors.

1. Find page.php in your template directory, which can be found at: /wp-content/themes/yourthemename/page.php.
2. Make a copy of the page.php and call it thumb.php.
3. Open up thumb.php and add the following code at the very top of the document. This is the code for creating a Custom WordPress Template.

   <?php
   /*
   Template Name: Thumbnails
   */
   ?>

4. After uploading your new template into the same folder as page.php (/wp-content/themes/yourthemename/), you should make sure it shows up. Create a new page in WordPress and on the right under Template you should see “Thumbnails” in the dropdown. Assuming it’s showing, create a new page using the template and then go back to thumb.php in your editor.
5. Next we’ll add the thumbnail code, which will need to be placed in the loop. The placement will depend on how your theme is programmed, but a good place to start would be below the_title() or above the_content() (search for these in your template). To explain this code, what we’re doing is nothing too different from standard HTML. First a div is created for styling and placement, then a link so the thumbnails will link to the article, and finally the thumbnail itself. Notice that the image src is going to be set by a post meta value of thumb. (which will correspond to a custom field of thumb when creating posts). All of this code is then put in a conditional statement, which tells WordPress to only show the thumbnail code if the post has one defined (otherwise we would get empty divs and broken images).

   <?php if (get_post_meta($post->ID, "thumb", true) != "") : ?>
    <div>
    <a href="<?php the_permalink() ?>" rel="bookmark">
    <img src="<?php echo get_post_meta($post->ID, "thumb", true); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
    </a>
    </div>
   <?php endif;?>
   

6. Save and upload the template again, then create a few test posts and give each a custom field with a name of thumb (which is what we used in the code). Define an image for the value such as http://www.site.com/wp-content/uploads/year/month/image.jpg. Publish your posts and then go to the new page you created using the Thumbnail template. You should see a list of posts, each with the thumbnail you defined.
7. Lastly, if you’re looking for a more automated way of doing this you can use WP Post Thumbnail, which is great for client’s or WordPress users that have limited computer knowledge. It will allow them to upload an image while creating a post, and then resize / crop it (meaning no photoshop or external editor is needed). If you do use this plugin the code will be the same, but the name of your customs fields may be different. The plugin uses a file named wppt.xml to configure the name of the post meta and thumbnail size, etc. This file needs to reside in your theme’s directory NOT the plugin’s directory.
8. How you style your thumbnail class is up to you, but I highly recommend having a fixed width/height with a hidden overflow (overflow: hidden;). This way when a client decides to use a 10 megapixel 3872 x 2592 image as a thumbnail (which does happen), it will get cut off rather than destroying the layout of the site.