Adding Post Thumbnails in WordPress 2.5

March 26, 2008

WordPress Post Thumbnail

WordPress magazine style themes have been all the rage lately, and everyone seems to want some aspect of their WordPress blog to have a magazine-y look and feel.

So if you have been around blogosphere recently, you must have seen those cool image thumbnails with short excerpts displayed on many blog home pages.

Today I went around searching for the easiest post thumbnail method, and was surprised to see how unnecessarily complicated some of the code junkies make something as simple as adding image thumbnails to posts.

So I hunt around a bit more and came up with an easy as pie way to add pretty little thumbnails to a WordPress 2.5 powered blog.

What you need to know: You need to know how to copy and paste.

What you don’t need to know: You don’t need to know how to open Photoshop.

So let’s get started.

Step 1: Adjust thumbnail size

WordPress 2.5 has a very handy new feature. It lets you specify custom thumbnail size for your uploaded images.

To adjust the thumbnail size to your liking, go to Settings > Miscellaneous and change the thumbnail width and height under Image sizes section. Let’s set the width and height to 80×80 for this example.

Also, make sure the Crop to size option is selected, and confirm the changes.

(With Crop to size checked, you don’t have to worry about what size your original image is. It will be adjusted to fit your specified size)

Step 2: Add a CSS class for thumbnail alignment

We want our thumbnail to be aligned to the left while the text flows around it. To do so, add the following code to your style.css file:

  1. .thumb {
  2. float: left;
  3. margin-right: 7px;
  4. margin-bottom: 7px;
  5. }

(Feel free to change or add to the code)

Step 3: Instruct index.php to display post thumbnails

Next, we need to modify some code in index.php to correctly display the post thumbnails.

In your index.php, locate the part that is responsible for displaying your post content. It must be the following line or something similar to this depending on which theme you are using:

  1. <?php the_content(); ?>

Replace it with the following snippet:

  1. <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
  2. <img src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="thumb" />
  3. </a>
  4. <?php the_excerpt(); ?>

(This code snippet retrieves the custom field value that we’ll add in the next step)

Step 4: Add thumbnail image

Now that everything else is done, it’s time to add the image.

  1. Click on the Add an image button and upload the image.
  2. When done, right click the image thumbnail and select Copy Image Location (in Firefox) and close the upload box.
  3. Move down the page and expand the Custom Fields section. Enter “thumb” in the Key field, and paste the thumbnail URL in the Value field, and click Add Custom Field.

Done! Write the post as usual, and don’t forget to enter a few lines in the excerpt field to be shown next the thumbnail.

Bonus step

Do you want to display regular content in case there’s no thumbnail image? No worries. David has come up with a code snippet that does just that for you.

  1. <?php
  2. $thumb = get_post_meta($post->ID, "thumb", true);
  3. if ($thumb != "")
  4. { ?>
  5. <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
  6. <img src="<?php $values = get_post_custom_values("thumb"); echo
  7. $values[0]; ?>" alt="<?php the_title(); ?>" class="thumb" />
  8. </a>
  9. <?php the_excerpt(); ?>
  10. <?php } else { ?>
  11. <?php the_content(); ?>
  12. <?php } ?>

Read on David’s post for more detail.

If I missed an important detail, or if you know of a better, easier way to add thumbnails to posts, let me know about it in the comments.

Tags: , , , , , ,

36 comments so far and counting

  1. Freak-Log™ #9 — Freak Group
  2. Wordpress TIP: Post Thumnails on HOME - WickedFire - Affiliate Marketing Forum - Internet Marketing Webmaster SEO Forum
  3. Which Social Networks Provide the Best Design-Related Content? | Vandelay Website Design

Come on, say something!