wordpress-hacksI have been working on making a new theme lately, and since it is the first WordPress theme I’ve made from scratch, design to development, I’ve been trying to incorporate a number of features that I wish this website’s theme had. I could easily hack this site’s theme up and add anything to it, but I’ve learned it would be far more easy to build a new theme from scratch, after hacking the free theme this site started out with up into pieces, and making the code a huge mess.

One thing thing I would like to implement here that I have included in the new theme I’m making is post thumbnails. If you haven’t noticed the index page of this site has a post thumbnail but it isn’t displayed using custom fields. I simply include the image html code in the Excerpt field along with the post description. The post excerpt is all that shows.

I talked about how to use excerpts in your theme here, and wanted to Using the excerpt to display just the post description, and custom fields to display the post thumbnail, you can have more control over the appearance, and it’s just a better way to do it.

Adding excerpts with thumbnails to your theme

In your WP admin on the post write page you will see the Custom Fields box. You may have to expand it if it is collapsed, but it looks like this.

For adding post thumbnails, you can just upload an image the way you normally would add images to your posts by clicking above the post panel then copy the image url and paste it in the Value textarea of the custom fields, and set the Name to Thumbnail.

You will need to edit the index.php template of your theme. If you want to show the post excerpt with the thumbnail image on your blog homepage you will need to add the the code to show excerpts and to get and display the custom fields. First find the code the_content(); in your index.php file, and replace it with this.

1
the_excerpt('Read the rest of this entry »');

This will show the post excerpt instead of the whole post.

Below that add this code.

1
echo get_post_meta($post->ID, "Thumbnail", true);

The get_post_meta() function gets the value of the custom field that has the name “Thumbnail”. For more information on the usage of this and other functions that have to do with custom fields, you can find it here on WordPress.org.

You can do this for many other things too besides images. Imagine the possibilities!!

Entire Code

This is the code I used in index template for the new theme I’m making, including the HTML.

1
2
3
4
5
6
<div class="excerpt">
    <?php the_excerpt('Read the rest of this entry &raquo;'); ?>
</div>
<a href="<?php the_permalink(); ?>">
  <img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
</a>

Here is the CSS I used for styling it.

1
2
3
4
5
.post .excerpt {
width: 325px;
float:left;
padding:0 20px 0 0;
}

With this you should be able to make a nice looking index page complete with excerpts and post thumbnails. If you have any questions let me know.

UPDATE

Here is my updated code which will show a default image if you do no have a post thumbnail defined in your post custom fields.

1
2
3
4
5
<?php $thumbnail = get_post_meta($post->ID, 'thumbnail', true); if ($thumbnail) { ?>
  <img src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
<?php } else { ?>
  <img src="<?php bloginfo('template_directory'); ?>/default.jpg" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
<?php } ?>

You can also learn how to set up category thumbnails and how to show them as your post thumbnails instead from a post I wrote on New2WP.com here as well.

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!