Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+

7th Jun 2010 | Posted by Eko S. | 49 Comments

Excerpt is a wordpress feature which will facilitate you to display a summary of the article on index pages automatically without requiring you to add a function readmore (more tag). However, this feature has a weakness, namely a picture in your article will not appear on index pages automatically.
Lucky, start from WordPress 2.9, theme authors can easily enable Post Thumbnail. The image need not be insert into the post. With the new feature the_post_image() you can use the new feature and thus control where to display.

In this tip, we will use the Kubrick – a default theme in WordPress 2.9

Make Automatic Post Excerpt

Open the index.php file from Kubrick (default) folder
Look for

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

				<div class="entry">
					<?php the_content('Read the rest of this entry »'); ?>
				</div>

And change with

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

				<div class="entry">
					<?php the_excerpt(); ?>
				</div>

Save it!
Let’s see our homepage (before and after use the excerpt)

As you see in the picture above our post image are not displayed, now we will enable the post thumbnail feature.

Set The Post Thumbnail

Step 1
Open the function.php file from Kubrick (default) folder
Insert the following code

// Enable support for post-thumbnails

add_theme_support('post-thumbnails');

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

Save it!
Your theme has supported for post thumbnail feature now, you can check this feature in post editor (Posts > Edit) below the categories.

Step 2
You must insert the image tag into your loop, open the index.php file
Look again this code

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

		<div class="entry">
			<?php the_excerpt(); ?>
		</div>

Directly add this code

<?php the_post_thumbnail(); ?>

Like this

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

		<div class="entry">
                         <?php the_post_thumbnail(); ?>					
                         <?php the_excerpt(); ?>
		</div>

Step 3
Style your thumbnail like this

<?php the_post_thumbnail(array(150,150), array ('class' => 'alignleft')); ?>

Save it!

Final Concept

After setting an image for post thumbnail in Posts > Edit and update your post, refresh your homepage…

Resource :

I hope this tip will be useful, and let me know if you have any question..Thanks

38 Comments to “Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+”

Add Comments (+)

Wordpress Themes says:

June 21, 2010 at 22:24

Nice post and this mail helped me alot in my college assignement. Thank you as your information.

Reply
- Carcinomatype.com says:
  
  March 27, 2011 at 16:36
  
  The easiest way of showing post thumbnails is @ http://www.nichewp.com/how-to-show-thumbnails-from-post-without-plugin.html
  
  Reply
Susan Osby says:

June 25, 2010 at 21:58

Good blog with some useful information. I will be back.

Reply
WP Themes says:

June 30, 2010 at 06:32

Genial dispatch and this fill someone in on helped me alot in my college assignement. Thanks you seeking your information.

Reply
Chris says:

August 8, 2010 at 19:38

I didn’t get the tab for thumbnails in the post>edit. Does that only work on certain themes?

Reply
- Eko S. says:
  
  August 8, 2010 at 22:44
  
  Hi there, this tip only working on WordPress 2.9 and newer. And if you have used the newer wordpress like 3.01, it should be able work.
  Or please send your themes to our email. We’ll check it out
  
  Regards,
  
  Reply
Kiwi Ingenuity says:

November 10, 2010 at 18:59

Thanks so much Been trying to get this feature working for ages!!!

Reply
ginanjar says:

December 30, 2010 at 01:47

Keren euy…
Orang Indonesia siga kieu…
Iraha urang siga ente euy…

Semangat…..

Reply
- dwidrg says:
  
  December 30, 2010 at 11:11
  
  makasih mas. tp ga ngerti bahasa sunda :hamer
  
  Reply
elizabeth says:

January 5, 2011 at 09:04

Hi there, it is quite difficult for a newbie to work with css and I tried for 2 hours, without results. Unfortunately it did not work for me. I liked the theme as it is really clean, but i will have to change it as inserting the images is a nightmare…. sorry might be a good idea to get the thumbnail plugin installed already in the theme…..

Reply
Anthony Navarro says:

February 1, 2011 at 23:41

Thanks so much for this article. I’m developing a new training site, and I wanted excerpts to have posts similar to those at WSJ Magazine – http://magazine.wsj.com/

I put the code in with the title php as such:

<h3 id="post-”><a href="”>
‘alignright’)); ?>

Thanks again!
-Anthony

Reply
Anthony Navarro says:

February 1, 2011 at 23:43

Ah well, my php didn’t stick… Thanks again, anyhoo!

Reply
Anthony Navarro says:

February 2, 2011 at 00:03

Okay, Eko – I have a question – I am inserting the thumb successfully, but I want it to be flush with the title and wrap the first few lines of the excerpt as it does on the WSJ Page:

http://magazine.wsj.com/

If I insert the photo right-aligned to the post title, the title wraps properly but there is white space between the title and the post because the post begins AFTER the bottom of the photo – the post text will not come up and hug the bottom of the post title.

I removed the photo entirely, and the post text comes up so something is not wrapping right… Any suggestions?

Thanks!

Reply
- Eko S. says:
  
  February 2, 2011 at 23:59
  
  Hi Anthony,
  
  Please send your wordpress theme files to us via our official email: dynamicwp[at]gmail.com.
  
  Regards,
  
  Reply
  - Anthony Navarro says:
    
    February 8, 2011 at 23:05
    
    Done… I look forward to hearing back from you! Thanks again for your assistance.
    
    -Anthony
Hale says:

February 5, 2011 at 00:53

For some reason, text doesn’t wrap around the thumbnail. Instead, text goes below the thumbnail. Any fix?

Reply
- reza says:
  
  February 8, 2011 at 23:00
  
  have modify the css file?
  
  Reply
DesignKraków says:

February 8, 2011 at 16:00

Thanks a lot, i was getting really mad with broken images in some theme for wordpress.

Bests!

Reply
hoto says:

March 12, 2011 at 22:44

really thanks. I try search via google how to create image thumbnail but no post really good. After i see this post, i think it is good.

Reply
dubcomm says:

March 17, 2011 at 18:36

THANK YOU. I’ve been looking for a straightforward way of doing this, to upgrade my non 2.9+ theme… This was exactly what I was looking for.

Cheers!

Reply
Dave says:

April 13, 2011 at 03:58

hi – this works great but when using the_excerpt(), now my RSS feed only shows the excerpt too. How do I get my RSS feed to show the entire full post. You seem to have this working correctly on your site. MySettings -> Reading options has full post enabled for the feed.

Reply
- Dave says:
  
  April 13, 2011 at 06:14
  
  sorted it! I was checking the feed in firefox which appears to truncate the feed by default. Where as IE8 which has a proper feed reader built in displays the full feed as to does Feedburner.
  
  Reply
bayu ratri says:

April 16, 2011 at 00:47

mas, maap pake bhs indonesia
aq pengen insert image otomatis di homepage (index.php) ama post (single.php)
blogku yang cuma ada 2 kategori, hotel n vacation. jadi cuma butuh 2 gambar aja.
gimana caranya agar ada 2 gambar yang berbeda berdasarkan categoro, yaitu gambar dengan tema hotel (misal hotel.jpg) dan tema vacation (vacation.jpg).

bisa ga misalnya di buat dengan logika gini
- jika masuk kategori hotel, maka hotel.jpg
- jika masuk kategori vacation, maka vacation.jpg

mohon bantuannya

Thanks mas

Reply
mvd says:

July 14, 2011 at 02:19

thanks for the help on solving the exerpt thumbnails question without a plugin!!

Reply
Jonathan Laine says:

July 19, 2011 at 14:29

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!

Reply
d says:

August 30, 2011 at 07:38

where do I put the code for the style??

Reply
d says:

August 30, 2011 at 08:13

I have a few more questions—how do I remove the [...] at the end since I also have the “read more here”

Reply
d says:

August 30, 2011 at 14:45

I figured out my first two previous questions but now my excerpt does not wrap around the thumbnail.

Reply
betty @ cursus photoshop says:

September 21, 2011 at 07:54

It works! Looked for it for a long time, can’t believe wordpress didn’t already included an option like this. Great for preventing indexing duplicate content too… Thanks a lot!

Reply
LA Bowen Insurance says:

November 1, 2011 at 12:41

I really like how that looks. I would like to find a shortcode I can use to add category post excerpts to certain pages.

Reply
Rahul Gupta says:

December 9, 2011 at 22:16

Very Simple and Basic Trick used to convert any theme into excerpts and thumbnail wise. Thanks for sharing !! But one thing to keep in mind that don’t play with the theme if you don’t know anything about the wordpress theme editor, as it will cause your theme code to dump your site and looks like an error code. Moreover, all themes have different code writing according to the developer’s experience especially in premium wordpress themes. So, first change the theme then edit it and apply it to a demo site. Once its confirmed, that theme is working properly then use it on your main blog.

Reply
Stuart Edwards says:

December 19, 2011 at 10:46

Thanks for this! I was looking around for ages for something like this. I tried a plugin or two that didn’t work.

One question I hope you can help me with:
Can a link be added to images? My PHP isn’t that great and I wouldn’t know where to start!

Thanks again.
Stuart

Reply
james says:

January 1, 2012 at 22:08

Hello every one,first of all happy new year i want to ask about one problem i am facing in clear line theme.

above each post i am getting a grey image,which when clicked take me to the exact post,i have tried my best to remove it but unable to do it,i hope you wordpress geeks will help me out…

my temporary site link is:- http://www.speedchains.com –here on main page there are 3 dummy posts..and u can see there is a grey bar on each post which when clicked take us to exact post…and i want to replace it with the image of my own choice but i am not getting thumbnail option under my posts..Your help will be very much appreciated..Thanks

Reply
Burçlar says:

January 2, 2012 at 14:18

Very nice article thank you very much.

Reply
AutoNewsandINFO says:

February 17, 2012 at 21:47

nice post,.. this is so cool

Reply
GP Code library says:

April 12, 2013 at 09:54

GP Code library
Create thumbnail image by php
When we upload large size images on server. Uploaded large images take more time to load on webpage, so we need to show small size images on our webpage. Image thumbnail is a solution to generate uploaded image’s thumbnail to show required size images on our website.
http://codelibrary.googleplus.co.in/create-thumbnail-image-by-php/

Reply
ALI says:

April 24, 2013 at 03:55

HOW I CAN USE EXCERPT IN MY WEBSITE ( WITH SELECTIVE WORLD , NOT RANDOM )
PLEASE VISIT MY SITE AT http://jokestoon.com/ AND HELP ME

Reply
snooker online says:

May 27, 2013 at 21:27

This was quite useful. Thanks a lot for the detailed info. I spent a lot of time trying to deal with the excerpt and thumbnails!!!

Reply