Image Alignment

If you are including images in your post listings, you may need to add some additional styling. Display Posts does not load any styles on your site currently, so it is up to your theme (or you) to provide the styling.

Here are some style options you can use:

Default Styling

Here’s the default styling in TwentyNineteen, the default WordPress theme:

Shortcode

[display-posts include_excerpt="true" excerpt_length="20" image_size="thumbnail" wrapper="div"]

Result

Display time after post date- Display Posts includes a parameter for displaying the post date: Shortcode [display-posts include_date="true" posts_per_page="1"] Result Date Format You can customize…

Left aligned image

The following CSS will let you create a post listing with left-aligned images.

Note that we’ve updated the shortcode below to include a wrapper_class of “image-left”. This allows us to target only this shortcode with our CSS, rather than affecting every instance of the shortcode throughout the site.

Shortcode

[display-posts include_excerpt="true" excerpt_length="20" image_size="thumbnail" wrapper="div" wrapper_class="display-posts-listing image-left"]

Result

Display time after post date- Display Posts includes a parameter for displaying the post date: Shortcode [display-posts include_date="true" posts_per_page="1"] Result Date Format You can customize…

This code snippet goes in Appearance > Customize > Additional CSS or your theme’s stylesheet.

.display-posts-listing.image-left .listing-item {
	overflow: hidden; 
	margin-bottom: 32px;
	width: 100%;
}

.display-posts-listing.image-left .image {
	float: left;
	margin: 0 16px 0 0;
}

.display-posts-listing.image-left .title {
	display: block;
}

.display-posts-listing.image-left .excerpt-dash { 
	display: none; 
}

Top aligned image

In the following example, we’re going to feature a large image at the top, followed by the post title on its own line, followed by the excerpt.

We limited the CSS styles to post listings that have a wrapper class of “image-top” so it doesn’t affect other instances of the shortcode.

Shortcode

[display-posts include_excerpt="true" excerpt_length="20" image_size="large" wrapper="div" wrapper_class="display-posts-listing image-top"]

Result

Display time after post date- Display Posts includes a parameter for displaying the post date: Shortcode [display-posts include_date="true" posts_per_page="1"] Result Date Format You can customize…

This code snippet goes in Appearance > Customize > Additional CSS or your theme’s stylesheet.

.display-posts-listing.image-top .listing-item {
	margin-bottom: 32px;
}

.display-posts-listing.image-top .listing-item .title {
	display: block;
}

.display-posts-listing.image-top .listing-item .excerpt-dash {
	display: none;
}

Published by Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributor to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.