Dev Corner

Software Developer’s Notepad

You have nice WordPress blog set up and running. You want to make your site more attractive and professional by adding images to post excerpts displayed on your WordPress blog’s home page. This tutorial shows you how you can easily add post thumbnails to your homepage.

Preparation
You can apply this solution to any WordPress theme. You will need your favorite WordPress theme and a text editor. We will use custom post fields to specify post thumbnails. Custom fields allow you to define a key and assign it a value.
Step-by-step Solution

  1. Let’s first create a post.
  2. From Post Editor panel click the “Add an image” button and upload an image. The good size for a thumbnail depends on your theme. On some themes it could be 150×150 pixels. On other themes 220×220 pixels is better. Copy the image URL to the Clipboard.
  3. Scroll down and locate the Custom Fields panel. Click the “Enter new” link. In the Name filed enter ‘icon’. In the Value field paste the image URL. Click the “Add Custom Field” button.
  4. Publish the post. If you now navigate to your home page, you will not see any change. The custom field is defined, but WordPress doesn’t know how to use it.
  5. Open the index.php file from your theme’s directory for editing. Locate the WordPress loop and add the following code:
    <?php
       $icon = get_post_meta(get_the_ID(), 'icon', true);
       if (!empty($icon)) :
    ?>
        <a href="<?php the_permalink(); ?>"><img
           src="<?php echo htmlspecialchars($icon); ?>"
           alt="<?php the_title(); ?>" /></a>
    <?php
        endif;
    ?>

Add A Comment

You must be logged in to post a comment.