Query loop: How to create a page with a list of posts?

In WordPress, you can create a page with entries. A great example is a “blog” page with all the posts sorted by date. How to create such a website? It’s easy, use the query loop.

There is a Query Loop block in the Gutenberg editor that allows you to display the entries or pages where you are inserting that block. By using specific functions in this block, you can customize the page in terms of design, layout and structure.

How to use the query loop?

Click the insertion element (+) and select the Query Loop block from the blocks menu. It consists of two components:

  • Query loop
  • Post template
Query Loop

Query loop

Defines which entries, how many there will be, and in what order they will be displayed, e.g. the last 6 blog entries.

Settings on the top bar:

  • Items per page – how many entries per page are to be displayed
  • Offset – from which entry we should start the display
  • Max page to show – how many pages to display
Query loop display parameters in the top bar
Query loop display parameters in the top bar
  • List/Grid view – list view is the display of entries one after the other. The grid view displays entries as rows and columns. Set the number of columns in the grid in the sidebar.
Query loop display parameters in the top bar
query loop
List view
Query loop
Grid view

Settings on the sidebar:

  • Post Type (Post, Page, Product, Support Article, Document)
  • Columns
  • Order by (Order of displaying entries)
  • Sticky posts (Blog posts can be “stickied”, a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published)
  • Filters (displaying entries only from a selected category, tag, given author or containing specific keywords)

Post Template

Post Template defines which elements of the entry will be displayed and how they will be arranged, e.g. Post Featured Image, Post Date, Post Title, Post Excerpt). You can freely change their order.

Post Template
Post Template

Query Pagination

If you want to display more entries, consider adding another Query Pagination block. Thanks to this, the entries will be divided into subpages.

Query pagination
Query pagination

This is what the pagination looks like on the website:

Add the first comment and start a discussion

Leave a Reply

Your email address will not be published.

This site uses cookies to optimize the use of it and for statistical purposes in accordance with Privacy Policy. The conditions for storing cookie files can be specified in Browser Settings. Further using the site and not blocking cookies means that you accept the use of these files.

Service namePurposeSettings
Service nameCookies required for the operation of the website.
Google AnalyticsAnalytical purposes.
DisqusCookies required for the operation of the comments system.

Need help?

Thank you!

success

We will answer in next 24 hours

Need a help? support-icon