Add custom thumbnails in wordpress post

WordPress is a great platform to blog. Most of the bloggers prefer to use magazine themes as they provide you with a lot of space to view things. But one of the main reasons I don’t use a magazine theme is that the looks of all the magazine themes is the same.

One feature that I really missed in non-magazine themes is the featured images function which I was not able to find in any other non-magazine theme. So I decided to do something my self. At the end of the day I was able to come up with an approximate of the thumbnail system in some of the premium magazine themes . When you add a featured thumbnail of any size most magazine themes automatically resize the thumbnails to the desired size and add them to the post.

In this tutorial I will tell you how to enable this feature and the make some changes to your theme so that you will be able to see the featured thumbnail next to post.

So first let us enable the feature, which is the easy part of the job. For that go to Appearance -> Editor -> Theme Function(On the right hand side) then add the following code at the top.

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}

Update the file. Now you would be able to see an option like this while writing/ editing a post.

This will allow you to add thumbnail to your post. But the size of the thumbnail also matters. While the big magazine themes have pre-installed plugins to do the job but I think light as installing too many plugins on your blog may lead to some problems on your blog that are very difficult to diagnose as I am facing problems with light box.

So you can use an online tool Pic Resize. This tool allows you to edit your images in great detail but we need to only to resize our images, so click on Quick Resize enter 64 as the width and leave the height option as blank. This is the optimum size  of a thumbnail that should be used. Now add this image as the featured image of your post.

I think Most themes would display the thumbnail by default but some might not. For those who are not getting the thumbnails beside the post you would need to edit your theme. I am giving a general over view which would work for most of the theme.

For this we would need to make a division to correctly format the location of the image and then call the function

<?php the_post_thumbnail(); ?>

So first go to Appearance -> Editor -> Stylesheet . At the end of the page add this

#thumb {
	float:left;
	width:64px;
	background:#fff;
	color:#000;
}

This would probably set the division we need to put the thumbnail in. Update the file and select Main Index Template.

This is probably where you would find the code that displays the headings of the post. Our aim is to place the thumbnail on the left side of the post heading. If your want to place it on the right of the post heading just replace “float:left” with “float:right” in the above code.

The code is between the tags <h1>……….</h1> if you are using a good theme but can also be between <h2>………</h2>. So just before the heading code add

<div id=”thumb”><?php the_post_thumbnail(); ?></div>

Update the file . Now you would be able to see the thumbnail next to the post heading.

Google+

Ashmeet Singh