Excerpts and thumbnails on the homepage with WordPress

Excerpts with thumbnails

Excerpts with thumbnails

I’m going to explain how to  insert excerpts with their thumbnails into the homepage of a site made with WordPress.

The code to add the excerpts

Its easy to add a post listing, using the Display Posts Shortcode  plugin. Just add the following code to the page you use as your homepage with the editor:

The images shown are the featured images, so you have to set them for each post, or no image will be shown in the list.

The featured images are by default shown as the first image of the posts by WordPress. If you don’t want to show the featured images in the posts you can install the Hide featured image plugin and set globally to hide the featured images.

The parameters

The parameters of Displays posts shortcode are explained here, however

  • posts_per_page lets you choose how many posts to show
  • image_size can be thumbnail, medium or large and is the size of the images
  • include_excerpts specifies that you want the excerpts to be displayed
  • wrapper=”div” specifies that you want the items wrapped into divs, so that you don’t get bullets as the default settings would give

How to have the image after the title

By default Display posts shortcode shows the title after the related thumbnail. If you want the title before the image add the code on this page to the functions.php with the theme editor

If you want to add some extra style for the excerpts on the homepage

If you want to add the titles as H2 headings, you have, as far as I know, to modify the php code of the plugin.

I’m referring to Display posts shortcode 2.9.0.
If you have FTP access open the file /wp-content/plugins/display-posts-shortcode/display-posts-shortcode.php and find the following line (it’s line 513):

Replace it with following code, where title and image are inverted.

I have added also an H2 for the title.

A check is done to see if the code is running for an homepage or not. So you can add Displays posts shortcode plugin in other pages where you will not have the H2.

Update

This page must be updated with the plugin author’s suggestion made here.