Adding Thumbnails to your posts in Wordpress

In this tutorial I will show you how to add thumbnails to your posts in the very popular Wordpress. I never really knew how to do this till about a week ago when I released Simify, but now I do I am happy to show you how I did it.

-

Step 1

Open the index.php file of your theme, I am going to use the default Kubrick theme in this tutorial.

-

Step 2

We are now going to add the code for the thumbnail to be shown, please not that no thumbnail will be shown at this point, so don’t worry if you don’t see anything.

Between the

<div class="entry">

and the

<?php the_content('Read the rest of this entry &raquo;'); ?>

lines add the following code:

<?php $thumbnail = get_post_meta($post->ID, "thumbnail", true);

if ($thumb = "") { } else {?>

<div class="thumbnail">

<img  width="80px" src="<?php $values = get_post_custom_values("thumbnail"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />

</div>
<?php } ?>
-

Step 3

Now open the style.css file so that we can change the CSS properties for the thumbnail image. Add the following CSS code:

.thumbnail {

  float:right;

  padding-left:8px;

  padding-bottom:8px;

}
-

Step 4

Now go into your admin area and whenever you add a new post go down to the custom fields section near the bottom of the page and add a key called thumbnail (after the first time a drop down box should appear for your to choose it rather than typing it in everytime). To add the image use the post upload option and instead of adding the image to the post, get the image URL from the URL box and paste this into the value for the key thumbnail.

-

Result

Now if you go to the index page of your blog you will be able to see that it has added a thumbnail in the top right of the post. There is a lot more that you can do by styling the CSS, or adding extra PHP code, for example you could resample the image so that it looks better than just resizing it, but I just wanted to give you the basics of doing this. Good luck!