Latest blog posts on the home page
The client writes a post under “Posts”, and it appears on the home page by itself, with its image, date and excerpt. Nothing is copied by hand: the section shows the three latest posts.
What you get
<section class="news">
<h2 fld-text="News title">From the blog</h2>
<div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">
<article class="news-card">
<a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a>
<p class="news-card__date" wp="post-date">October 1</p>
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
<div class="news-card__text" wp="post-excerpt">Pumpkin latte is back, and so is the apple pie.</div>
</article>
</div>
<div class="news__empty" wp="no-results">No posts yet</div>
<a class="button" href="/blog">All posts</a>
</section>- New autumn menu
- We roast on Mondays now
- Open late on Fridays
- Summer cold brew
Posts are ordinary WordPress posts; only the section heading is a field.
Step by step
The query goes on the block of cards
wp-query says what to show: here, three blog posts. The first card inside is the pattern for every post.
<div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">
Image, date, title
wp="post-image"is the post’s featured image,wp="post-date"its date,wp="post-title-link"the title linking to the post. The link around the image iswp="post-link".<a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a> <p class="news-card__date" wp="post-date">October 1</p> <h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
The excerpt
Put
wp="post-excerpt"on a<div>: WordPress wraps the excerpt in a paragraph itself.<div class="news-card__text" wp="post-excerpt">Pumpkin latte is back, and so is the apple pie.</div>
When there are no posts
A
wp="no-results"block right after the list is shown only while there are no posts yet.<div class="news__empty" wp="no-results">No posts yet</div>
What matters
- The other cards of the design can be deleted or kept: on the site real posts replace them.
- If a post has no featured image, the theme shows a placeholder; you can change it or turn it off in the theme settings.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">
<article class="news-card">
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
</article>
<div class="news__empty" wp="no-results">No posts yet</div>
</div>The “no posts” block inside the list: the build replaces your text with the stock phrase “No results found.”, and notes this in the log.
<div class="news__grid" wp-query="'post_type'=>'post','posts_per_page'=>3">
<article class="news-card">
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
</article>
</div>
<div class="news__empty" wp="no-results">No posts yet</div>The block goes right after the list, outside it.