Create a fancy thumbnails list in WordPress

Note: This article has been marked for a quality review and will soon be updated.

I, like many others, love WordPress, and every time I come to creating a new theme I always look for new ways to utilize it’s true power. I like extending the functionality of websites with WordPress and I like using images to better the user’s experience, so I decided I would explore the possibilities. While working on a site recently I decided I liked the idea of having a row of thumbnails across the top of the hear to showcase some of the food written about in the blog. It made sense to me that a food blog would benefit from showing it’s users little snapshots of the food that they were creating. After a bit of thought I realised it was easy, using the simple nature of WordPress I managed to cobble together some code, and the end result looked like this:

As you can see above there is a row of images which have been grabbed from the posts themselves and displayed in a nice little row. So just how did I do it? Well I used the old custom field functionality of WordPress to make the image accessible to any part of my site. So instead of placing the image in the post itself I just stored it alongside it. The best thing is, it’s really simple to do. So lets go ahead and do it!

First off you’re going to need to create a custom field, doing so is really rather easy – all you need to do is go to either add, or edit a post and scroll down to “Custom Fields”, as you can see below.

Go ahead and click on “Enter New” and name it “thumbnail”. Then in the value field you will need to enter the URL of an image. So go ahead and upload an image and get the image URL for the field. Once you update the post the image will now be associated with your post. But to use the image we’re going to need to use some code. To create the desired effect we are going to create a custom loop for the homepage. So copy and paste the code below into page where you want the images to be displayed.

<div id="thumbnails-top">
 <?php
 global $post;
 $myposts = query_posts('showposts=8');
 foreach($myposts as $post) :
 setup_postdata($post);
 ?>
 <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php echo bloginfo('template_directory') ?>/js/timthumb.php?src=<?php echo get_post_meta($post->ID, 'thumbnail', true) ?>&h=75&w=85&zc=1" alt="Post Thumbnail" /></a>
 <?php endforeach; ?>
</div><br /><br />

Now for the above code to work you are going to need a folder entitled “js”, with the image resizing script Thim Thumb as mentioned in this article, inside of it. So what does the code do? Well it grabs the 8 most recent posts and creates some links for them. We use the script to re-size the images so that they won’t take ages to load and we then link to the posts they are assigned to. So up to now you should have a list of these images displayed – but on;y if the post includes the correct data! But we’re not done yet.

We do have a list, but I can’t say it’ll look nice, so lets use some CSS to style this bad boy.

#thumbnails-top { display: block; margin: auto; width:800px; }
.post-thumbnail-top { border:#898a6b solid 3px; margin-left:5px; }

And that should make it look a bit better. Using this method we are able to give the user a choice as to how they navigate your website. They will now be able to make decisions based on the graphical content of the thumbnail and therefore, hopefully, be better informed.