Add Thumbnails Using Custom Fields

I’ve blogged about WordPress magazine style themes a few times recently. I previously stated that one of the things I like about this type of layout is the ability to display articles in various blocks throughout the page as opposed to the standard blog format. Another feature I enjoy is the use of thumbnail images on the front page. In this article I’ll show you how you can do the same with your blog using Custom Fields.

First determine which page template your blog uses to display your front page. Some themes use index.php while others use home.php. Once you figure that out open that file in a plain text editor such as Notepad and look for the Loop. Inside the Loop look for something similar to the following …

<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>

Directly beneath that add this …

<img style="float:left;margin: 5px 10px 10px 0;border:1px solid #000;height:90px" src="/wp-content/uploads<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="thumbnail" height="90" />

What we have done is tell WordPress to insert the image from the /wp-content/uploads directory along with the rest of the path and filename info coming from the custom field named Image. When you write a new post, upload an image through the write post window making note of the file path. Next, scroll down to the box called Custom Fields and from the drop down menu select Image. If it doesn’t exist create it by clicking Enter New. In the value field add the rest of the image’s filepath which is /2009/01/yourimage.jpg. We need only enter that last part of the file path since we already defined the first part in your page template remember? ie: src=”/wp-content/uploads<?php $values …

Your blog should now display those uber-cool thumbnail images. You can see it in action on this very blog by viewing the front page.

Further reading:
http://codex.wordpress.org/The_Loop
http://codex.wordpress.org/Using_Custom_Fields