As you surely already know WordPress usually resume of all published posts on website homepage, or last few posts, or only chosen ones, all depending on the wishes of the author. Of course for all of us website authors is very important to attract attention, so the users would want to read the rest of post, and thus be retained as long as possible on our website. We know that everyone, without exception, prefer colorful, small squares, with some (non) meaningfully scene, better known to us as an images, thus we will try here to get their attention with it. So it would be nice to somehow incorporate the image in each post on the index page of our blog. This is the theme of this post, and one of the solutions is below …

This is pretty easy to do. You will only need a basic knowledge of WordPress and php, and of course, be careful not to change anything what should not be changed.
Suppose we want to have the same thumbnail displayed on the homepage, where all of our posts are displayed, and also on the details of a particular post. For this we need to change two php files.

The procedure is as follows:
• find the wordpress theme’s folder which one you want to change.
• index.php and single.php are theme’s files we want to change. Be sure to have backup of this files before you edit anything. Open those files in your favourite html editor.
• open index.php and find a place where you want image to be appeared. I found best place for that wright above the “entry” div. At that place paste next code. Change the image size as you wish.

index.php

<?php $postimageurl = get_post_meta($post->ID, 'post-img', true);
if ($postimageurl) {
?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="562" height="180"/></a>
<?php } else { ?>
<a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/images/post/post-default.jpg" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="562" height="180" /></a>
<?php } ?>

• open single.php file now, find the same place as in index.php and paste a little bit different code

single.php

<?php $postimageurl = get_post_meta($post->ID, 'post-img', true);
if ($postimageurl) {
?>
<img src="<?php echo $postimageurl; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="562" height="180"/>
<?php } else { ?>
<img src="<?php bloginfo('template_url'); ?>/images/post/post-default.jpg" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="562" height="180" />
<?php } ?>

• Now we should create a custom field for each post that we want to have a thumbnail. Custom field should be called post-img, in value field enter the URL of a thumbnail you want to show

Code explanation: The code first looking for image released under the required custom field in the post. If there is no image for this post it will publish default image. This way none of your post’s will remain without appropriate thumbnails.

This post is also available in: Croatian

(No Ratings Yet)

Loading...

This entry was posted on Saturday, April 2nd, 2011 at 20:35 and is filed under html & css, Uncategorized, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response , or trackback from your own site.