Adding Thumbnails to your Wordpress posts
Magazine style looking blogs have been all the rage lately, and one of the best ways to enchance the look of your blog and give it this look is by adding thumbnails to your posts. As you can see, I’ve added the functionality to this blog, and now I’ll show how you can make a few small changes to the wordpress loop to achieve the same effect.
Step 1: editing the CSS file
The CSS for this is really simple. all we have to do is add a ‘thumb’ class, which should look like the following:
.thumb{float:left; margin-right:7px; margin-bottom:7px; height: 150px; width: 150px;}
Step 2: Setting up ‘The Loop’
Go to the index.php file of your theme, and look for where the function “the_content()” or possibly “the_excerpt()” is called. Add this code before it:
<?php $values = get_post_custom_values("thumb");
if($values[0] != “”){ echo “<img src=\”$values[0]\” class=\”thumb\”></a>”; }
else{ echo “</a>”; } ?>
what this code does is only print out a thumbnail if one exists. Otherwise, the post gets formatted like usual, instead of having a blank spot where the thumbnail should be.
Note: depending on your theme, you may have to add this code to archive.php and single.php as well.
Step 3: adding thumbnails to posts
When writing a post, you will see the option ‘Custom Fields’. add a custom field where the key is ‘thumb’ and the value is the URL of the thumbnail image.
And that’s it! now you will have a much more vibrant looking front page.
special thanks to icanhascheezburger.com for today’s thumbnail image.
[...] Another slow month. Did write one useful post about Adding Thumbnails to your Wordpress Blog [...]