Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+
7th Jun 2010 | Posted by Eko S. | 46 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 :
- Display posts excerpts only in WordPress
- Quick Tip : How to use the new post thumbnail feature in WordPress 2.9?
- the_post_thumbnail Tag from Codex.WordPress
- The ultimate guide for the_post_thumbnail in WordPress 2.9
I hope this tip will be useful, and let me know if you have any question..Thanks
About The Author
Shared
nice post,.. this is so cool
Very nice article thank you very much.
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
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
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.
I really like how that looks. I would like to find a shortcode I can use to add category post excerpts to certain pages.
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!
I figured out my first two previous questions but now my excerpt does not wrap around the thumbnail.
I have a few more questions---how do I remove the [...] at the end since I also have the "read more here"
where do I put the code for the style??
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!
thanks for the help on solving the exerpt thumbnails question without a plugin!!
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
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.
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.
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!
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.
Thanks a lot, i was getting really mad with broken images in some theme for wordpress. Bests!
For some reason, text doesn't wrap around the thumbnail. Instead, text goes below the thumbnail. Any fix?
have modify the css file?
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!
Hi Anthony, Please send your wordpress theme files to us via our official email: dynamicwp[at]gmail.com. Regards,
Done... I look forward to hearing back from you! Thanks again for your assistance. -Anthony
Ah well, my php didn't stick... Thanks again, anyhoo!
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
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.....
Keren euy... Orang Indonesia siga kieu... Iraha urang siga ente euy... Semangat.....
makasih mas. tp ga ngerti bahasa sunda :hamer
Thanks so much :) Been trying to get this feature working for ages!!!
I didn't get the tab for thumbnails in the post>edit. Does that only work on certain themes?
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,
Genial dispatch and this fill someone in on helped me alot in my college assignement. Thanks you seeking your information.
Good blog with some useful information. I will be back.
Nice post and this mail helped me alot in my college assignement. Thank you as your information.
The easiest way of showing post thumbnails is @ http://www.nichewp.com/how-to-show-thumbnails-from-post-without-plugin.html
Trackbacks
[...] This post was mentioned on Twitter by adam, DynamicWP. DynamicWP said: New Post : Quick Tip – Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+ http://bit.ly/bpeCpK #wordpress [...]
[...] is the original post: Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+ | DynamicWP Tags: [...]
[...] Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+. Excerpt is a wordpress feature which will facilitate you to display a summary of the article on [...]
[...] the previous tutorial, we have explained how to add wordpress thumbnail features on your theme. As we all know, since [...]
[...] Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+ [...]
[...] without using a WordPress Plugin. Remember to activateWordPress post thumbnails using our main WordPress post thumbnail tutorial before adding it to your recent posts widget. Hope it [...]
[...] Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+ [...]
[...] Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on WordPress 2.9+ [...]
[...] this tutorial we’ll use the WordPress post thumbnail function, please check our previous tutorial for how to activate this [...]
[...] Quick Tip : Make A Post Automatic Excerpt With Image Thumbnail on …Jun 7, 2010 … Excerpt is a wordpress feature which will facilitate you to display a summary of the article on index pages automatically without requiring you to … [...]
[...] you to disable any such plugin in order to display full posts in the RSS Feeds. In addition, you can manually edit the index.php to show thumbnails and excerpts on home page instead of full [...]