BInterest

One of the Best Features of the Wordpress as a blogging platform is the customization unlimited. Most of the User around the world are in need of simple and easy way to create post excerpt with thumbnails for Home, Archives, Category or tag pages, which provides the blog site a nice and elegant look making your reader look at more post plus summary for your posts.

Coming on to the Easy and Simple Tutorial for creating post excerpts with thumbnails for wordpress. First and Foremost thing who would be in need of is Thumbnail Images, Notepad or preferably PHP editor and most importantly careful reading and understanding.

Excerpts are optional hand-crafted summaries of your content.

Open your index.php of the current theme and find the line which contains excerpt code if post excerpt is already activated in your theme and else regular content code.

<?php the_excerpt(); ?> //For Excerpt already activated themes
<?php the_content(); ?> //For Excerpt Not already activated themes

If you have not activated Post excerpt on your theme, First thing to do is replace the Content code with post excerpt code.

<?php the_excerpt(); ?> //Replace this code
<?php the_content(); ?> //With Post Excerpt Line Code

which would show the first 55 character of the post on the Home page of your blog ending with [...]. Readers who would like to read more from the respective post, would have to click on the title and they would be navigated to the post page. View Post excerpt Codex

You can also write the customized post excerpt for the post, in the block provided below the post editor named as Excerpt and your First 55 Words with the summary who have written in the Exception Box, which can be greater then 55 words.

Now Adding the Thumbnail to the Post Excerpt. Add the Following Thumbnail Code above the Post Excerpt line Code to Add includes;

<?php $thumbnail = get_post_meta($post->ID, "thumbnail", true); if ($thumbnail != "") { ?>
<img src="<?php $values = get_post_custom_values("thumbnail"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="thumbnail" /></a>
<?php the_excerpt(); ?> //With Post Excerpt Line Code

The Above thumbnail codes first ask for the meta tags thumbnail and if it is True then display respective to the post else no display, only black block.

Save your index.php and go to Write post page, and below the post editor near excerpt box you would find one more box of custom Fields, Insert “thumbnail” in the Name Field and link of thumbnail for the respective post to display in the Value field. Name field have to be entered onces and after that you can select it from the drop down menu. Click Add Custom Field Button. All Done, Write the post and publish to see the post excreption along with thumbnail for your blog.

But, Before you publish the post you also need to edit the CSS / Style for the post excerption and thumbnail so that it is displayed in the proper and beautiful manner. It can be changed in accordances to the theme and color of the blog. Example CSS /Style for thumbnail includes :

//Sample Style for thumbnail
.thumbnail {
float: left;
width: 60px;
height: 60px;
position: relative;
margin-right: 5px; }

Float left indicates the direction of the thumbnail, width and height can be set to anything, position should be set to relative so as to not overflow the content. Note : Image used in the thumbnail should be of the size which is mentioned in the CSS/ Style.

Addition Hack to display thumbnail for post which have them, else not thumbnail., to get the same past the code like shown below :

<?php $thumbnail = get_post_meta($post->ID, "thumbnail", true); if ($thumbnail != "") { ?>
<img src="<?php $values = get_post_custom_values("thumbnail"); echo $values[0]; ?>" alt="<?php the_title(); ?>" class="thumbnail" /></a>
<?php the_excerpt(); ?>
<?php } else { ?>
<?php the_excerpt(); ?>
<?php } ?>

Enjoy Post Excerption with thumbnails for only post which have them., Like this article., share with others., If you want to implement the same for your Archive or Category page, you just have to copy the code to the Archive.php

You can follow me on Twitter at http://twitter.com/binterest.Do stay tuned to Binterest.com for more, Best Way 2 do it, Subscribe to Binterest's Feed Updates