![]()
Maybe for some reasons or another, you do not like to use plugins to display images in your post excerpts. Using plugins do have limitations. For one, you cannot control the images to be displayed and the post the images to be displayed in. Doing it manually lets you have full control on how, where and what images you want to display in your post excerpts.
However, to display thumbnails manually, there will be an added step when you are posting your articles and there will be a line of extra codes to be inserted in your Index php file. First, open your Index php, look for these code:
<?php while (have_posts()) : the_post(); ?>
In between there will be other lines before you see this closing of the loop
<?php endwhile; ?>
Anywhere in between these 2 lines, insert this line:
<img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" />
Now you have a call to bring up the Thumbnail. Next, before publishing your post, get ready your Thumbnail Image of your preferred size. Preferably, it should not be too big. 150 pixels by 150 pixels is perfect in my opinion but of course it is up to you. Upload your image. Do not ‘Insert’. Copy the Image Url instead.
After writing your post, scroll down to the “Custom Filed” option. Under, “Add New Custom Filed” click on ‘Enter New’. Type in ‘Thumbnail’ Remember this is case sensitive. You have used a capital “T” in your codes, so the “T” must also be in capital letter here. Inside the ‘Value’ paste the image URL that you have copied just now. Click “Add Custom Field”
One you have done this, you would have created a new “Custom Field” called “Thumbnail” and the next time you want to insert any Thumbnails into any post, you can re-use that “Custom Field” again and again with different images. Publish your post and the Thumbnail Image should appear in your Front Page, but wait, it is not what you have seen in other blogs. They have their text wrapping their images while yours is floating freely on the top of your text excerpt. To overcome this, you have to style your Thumbnail
Open your stylesheet, create a new div class. Let’s simply call it Thumbnail and you have chosen to use 150 pixel images. In your Stylesheet the styling codes will look like this:
.Thumbnail { display: block; width: 150; height: 150px; float: left; margin: 0 5px 0 0; }
Your image will be floating to the left with text wrapping round it. If you want it to float right, just change the word and make the margin to 0 0 0 5px.
Go back to your Index php and wrap the line of codes that you have inserted in the first step within this new ‘class’ like this:
<div class="Thumbnail"><img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" /></div>
Now your Thumbnail images will look much better within your homepage post excerpts




Hi Sunshine,
Please refer to an old post of mine where I discussed this issue.
http://blogigs.com/a-dateless-wordpress-theme-for-niche-blogging/
hey there,
im using this on pages and i implemented it as you instructed but my images aren’t thumbnails they’re always full sized..
another thing is, on sites that have no custom fields with images in them, theres a broken pic icon showing.. any way to work arround that?
tia bsteck
First, I am confused when you say you are using it in pages. Do you mean you have a homepage that display all your pages as excerpts? Else why do you need thumbnails for pages?
Frankly, I have never taught of nor have I learned how to display pages as excerpts in the homepage. That would be quite cool of we are using our blog as a CMS where we have individual pages displaying different information.
Under normal circumstances, we only display excerpts to our posts in our front page and the thumbnails will be displayed with the excerpts to make it more attractive.
If you do that, then the thumbnails have to be re-sized manually and uploaded individually as a different image.
Anyway, this tip is already out-dated with the release of WP 2.9. You can now post thumbnails automatically of your Theme is fully 2.9 compatible.
Your second question, I am also confused but I assume you mean on post pages and not sites. If you do not want any images, do not fill in the custom field when you post. If the custom filed is empty, then there should not be any images appearing.
This is a useful post, thank you Costa!
Manually, just replace the image link with your post link.
There are some plugins to do that automatically but you have to look it up yourself. I never bothered because I don’t see the need for it.
Some Themes like the Thesis, does this by default.