Excerpts

How to Show Photos with Excerpts in WordPress

Posted on by Prakash Tiwari

If you run a WordPress website, you may want to display photos with excerpts on your homepage, blog, or category pages. Showing images alongside short text excerpts makes your site look more engaging, professional, and easy to read.

WordPress lists posts with full content or summaries. But sometimes, you want a thumbnail image next to each excerpt to grab attention. In this guide, you will learn different ways to display photos with excerpts in WordPress.

Method 1: Use a WordPress Theme That Supports Excerpts with Images

Many modern WordPress themes automatically display featured images with excerpts. You don’t need extra plugins or code if your theme supports this.

How to Check If Your Theme Supports It

  1. Go to WordPress Dashboard
  2. Click Appearance > Customize
  3. Look for Blog Settings, Post Layout, or Content Display Options
  4. Enable the “Show Featured Image” option

If your theme supports it, you’re all set! But if your theme doesn’t show images with excerpts, try the following method.

Method 2: Set Featured Images for Posts

If your theme doesn’t automatically show images, you may need to set featured images manually for each post.

Steps to Add a Featured Image to a Post

  1. Go to WordPress Dashboard
  2. Click Posts > All Posts
  3. Select a post and click Edit
  4. Find the Featured Image section (usually on the right sidebar)
  5. Click Set Featured Image
  6. Upload or select an image
  7. Click Update

WordPress will show the featured image and the excerpt when displaying posts.

Method 3: Enable Excerpts in WordPress

WordPress may display the full post content instead of an excerpt by default. To fix this, you need to enable excerpts.

Steps to Enable Excerpts in WordPress

  1. Go to WordPress Dashboard
  2. Click Appearance > Customize
  3. Find Blog Layout, Post Settings, or Content Display
  4. Choose “Show Excerpts” Instead of Full Content
  5. Click Save Changes

This setting ensures that your blog and category pages show short excerpts with images instead of entire posts.

Method 4: Use the “Read More” Tag to Control Excerpts

You can use the Read More tag to control excerpts manually.

How to Add a Read More Tag

  1. Edit a Post in WordPress
  2. Place your cursor where you want the excerpt to end
  3. Click the Insert Read More Tag button (…)
  4. Click Update

WordPress will show only the text before the Read More tag and the featured image.

Method 5: Use a Plugin to Show Photos with Excerpts

You can use a plugin if your theme doesn’t support featured images with excerpts.

Best Plugins for Showing Photos with Excerpts

  1. Advanced Excerpt – This lets you customize excerpt length and add images.
  2. Post Grid – Displays posts in a grid with images and excerpts.
  3. WP Show Posts – Helps create lists of posts with thumbnails.
  4. Content Views – Adds grid or list layouts for posts with images.

How to Use Advanced Excerpt Plugin

  1. Install the Plugin
    • Go to Plugins > Add New
    • Search for Advanced Excerpt
    • Click Install Now and Activate
  2. Configure Excerpt Settings
    • Go to Settings > Excerpt
    • Set the Excerpt Length (e.g., 30 words)
    • Enable “Show Featured Image with Excerpt”
  3. Save Changes

Now, your blog or category pages will show images next to excerpts.

Method 6: Add Code to Show Images with Excerpts

If you are comfortable editing theme files, add custom code to display images with excerpts.

Steps to Add Code to Show Featured Images with Excerpts

  1. Go to Appearance > Theme File Editor
  2. Open index.php, archive.php, or content.php
  1. Find this line of code:

    <?php the_excerpt(); ?>
  2. Replace it with:

    <?php if (has_post_thumbnail()) { ?>

    <div class=”post-thumbnail”>

        <?php the_post_thumbnail(‘thumbnail’); ?>

    </div>

<?php } ?>

<div class=”post-excerpt”>

    <?php the_excerpt(); ?>

</div>

  1. Click Update File

This code ensures that featured images appear next to excerpts.

Method 7: Customize Excerpts with CSS

If your theme shows images that don’t look right, you can style them with CSS.

Steps to Style Excerpts and Images with CSS

  1. Go to Appearance > Customize
  2. Click Additional CSS
  1. Add this CSS code:

    .post-thumbnail img {

    width: 100px;

    height: auto;

    margin-right: 10px;

    float: left;

}

.post-excerpt {

    display: inline-block;

    width: calc(100% – 120px);

}

  1. Click Publish

This CSS ensures images appear next to excerpts instead of above them.

Conclusion

Showing photos with excerpts makes your WordPress website visually appealing and easy to read. Choose the method that works best for your site. Now, start displaying beautiful excerpts with images and make your WordPress website stand out!