How to add divider in bettwen posts?

I think the code below will work. The shortcode is used to display just one post followed by a horizontal rule. This is then repeated using offset=“1” to display the second post etc. Just keep repeating until you have the total number of posts you want on your page. By wrapping the shortcode in a div the horizontal rule should start on a new line, not half way down the image!

<div>
[display-posts image_size=”medium” posts_per_page=”1” wrapper=”div” offset=“0”]
</div>

<hr />

<div>
[display-posts image_size=”medium” posts_per_page=”1” wrapper=”div” offset=“1”]
</div>

<hr />

<div>
[display-posts image_size=”medium” posts_per_page=”1” wrapper=”div” offset=“2”]
</div>

<hr />

Etc…

I think CSS is probably the best approach.

[display-posts posts_per_page="5"] will show 5 posts. The following CSS will add a grey divider line between them.

.display-posts-listing .listing-item {
	overflow: hidden;
	width: 100%;
	padding-bottom: 20px;
	border-bottom: 1px solid grey;
	margin-bottom: 20px;
}

.display-posts-listing .listing-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
	margin-bottom: 0;
}

• This reply was modified 7 years ago by Bill Erickson.

Bill – Thank you so much! It’s that what I was looking for!