How to show post thumbnails without plugin

Showing thumbnails on the homepage can helps you to increase more page views on your wordpress blogs. There are lots of wordpress plugins that helps you to show thumbnails on the homepage. Some are WP post thumbnails, simple post thumbnails etc. But still you can show thumbs on the homepage without using any plugin.

show-post-thumbnails-wordpress

If you dont want to use wordpress plugin then here I will teach you how easily you can show thumbnails on the home without using any plugin. Just follow the below steps:

1. Add the following function to your theme functions.php file:
function get_post_thumbnail() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment&post_mime_type=image');
if($files) :
$keys = array_reverse(array_keys($files));
$j=0;
$num = $keys[$j];
$image=wp_get_attachment_image($num, 'large', false);
$imagepieces = explode('"', $image);
$imagepath = $imagepieces[1];
$thumb=wp_get_attachment_thumb_url($num);
print $thumb;
else:
print "<?php bloginfo('stylesheet_url'); ?>/images/post-thumb.png";
endif;
}

2. Now Add the following php in your index.php file above the <?php the_excerpt(); ?>:

<a href="<?php the_permalink(); ?>" >
<img src="<?php get_post_thumbnail(); ?>" class="front-list_thumbnail" alt="<?php the_title(); ?>" /></a>

3. Last step, add the following css in your theme stylesheet (style.css):

#latest-post img.front-list_thumbnail, #recent-posts img.front-list_thumbnail, #front-list img.front-list_thumbnail {
float:left;
margin-right: 10px;
padding: 1px;
background:#fff;
border:1px solid #ccc;
}

Now, you can see that you have enabled post thumbnails on your blog homepage. If you got any error while doing this trick then dont forgot to comment below for immediate help.

{15 comments... read them below or add one}
  1. Mahesh Makvana says:

    Hello, I have done the steps given above. But, the thumbnails appear on the upside of the excerpt. I want the thumbnails to appear at the left-side of the excerpt. Please help me with this.

  2. Jason Williams says:

    Hello,

    Is it possible to do this same thing but instead of doing it with posts, it happens with pages?
    Thanks for your help in advance!

    I am using the WordPress Theme Eximius 2.2.

    -Jason

  3. Mahesh Makvana says:

    Hello,

    I want to ask a question, If I have multiple images in my post, this feature automatically chooses the first picture as thumbnail. How to choose the other image as Thumbnail? Like, “Use as Features Image” option, so I can choose which picture should be shown as thumbnail.

    Help will be really appreciated !

  4. Dave says:

    Hi,

    Thanks for the info.

    I’m using the default theme twentyten and the index.php file only has:


    where would it be possible to insert the code you mention here?

    Thanks

  5. Cydgeno says:

    hi man

    I was looking for that since one full week and was not able to find any plug in to do that, other than manually so thank a lot.

    I feed my form automatically through a formidable form. I have 2 upload image field.

    I only have one question, the thumbnail shown is the second picture and not the first one uploaded . any idea why ??

    do I have to put an ID of filed name somewhere ?

    thank a lot anyway.

    you really are the best

    • Rajesh Patel says:

      @ Cydgeno, this trick only show the first image you have uploaded in a post. Adding any ID wont work, if you want to show second image then you have to remove first, thats simple trick and you should also know that this trick is really useful and very low on your server.

  6. cydgeno says:

    hi

    thank you for your answer but it seems that I did not explain correctly myself :

    so my form has different fields, there is 2 fields that allow people to upload images.

    right

    so I have the field image1 and the field image2.

    your code pickup the second image, I don’t want that. I want the code to pickup only the first image.

    lets say that the first image uploaded is a picture of a house, and the second picture is the living room.

    I want to display only the house picture in the listing on the home page. But for a reason I don’t understand your code always pickup the second image ???

    for instance the living room

    each image has a ID and field , it is not possible to tell the code to pickup the first image only

    and ignore the others images

    look at my test blog: http://www.panama-assets.com/blog/

    when there is only one picture it is ok but when there is 2 pictures,it shows the second one?

    thanks

    cyd

    • Rajesh Patel says:

      @ cydgeno, my code only pickup the first image, it doesnt require you to put any extra ID. I have seen your Blog, and I think its clear.

      Let me make you understand you clearly: see my post http://www.nichewp.com/latest-iphone-5-pictures.html . In this article I have uploaded 5 images, in this first image is shown as thumb on the homepage, not the second image.

      If it help you, then let me know.

  7. Jonathan Laine says:

    Aloha-
    I am trying to have my post excerpts listed on a specific page with the thumbnail to the left of the excerpt, similar to as you have shown in your tutorial. I would like to have the post title either above or with the excerpted text as well. I am using 2010 Weaver and when I look at my index.php file there is no : in it. I am using wordpress 3.1.3 and 2010 Weaver V1.5.4. The use featured image in excerpts is close to what I want, except I need the cleaner look of having the thumbnail left aligned to the exerpt. Please look at http://authentickauai.com/?cat=7 to see the demo page I am working on as well as http://authentickauai.com/?page_id=24 to see the basic look that I am trying to achieve. Any help would be appreciated.
    Mahalo!

  8. Rajesh Patel says:

    @ Jonathan Laine, In your theme there is a file loop.php. Open it and search for < ?php weaver_the_excerpt_featured(); ?> below that add the code from this post. Try it and let me know.

    I’m not sure that this will work or not, I’m just trying to help you out. :) All the best.

    • Jonathan Laine says:

      That did not work. Check out this page http://authentickauai.com/?cat=7 and click on the dead image link. The image is perhaps too large, and when the link is clicked it appears in the header image location. I appreciate the help.

  9. Lui says:

    Excellent, I tested this trick in a new site and it works perfect. It only has to modify the css in order to match whith the theme. I used
    .story content img.front-list_thumbnail
    {
    float:left;
    margin-right: 10px;
    padding: 1px;
    background:#fff;
    border:1px solid #ccc;
    }

    Thanks for your ingenious code, I was wondering if this can apply as related posts with thumbnails in single.php.

Leave a Comment