The Query Loop is a neat WordPress block that enables you to display a list of related blog posts, products, and pages. As a beginner, you might be wondering how to take advantage of this feature.
Fortunately, the Query Loop block is relatively easy to use. You can choose your favorite pre-built layout or create something from scratch. Plus, you can configure the display of your nested blocks and fully customize the design.
In this post, we’ll take a closer look at the Query Loop block in WordPress. Then, we’ll show you how to use the block and talk about specific use cases.
What is the WordPress Query Loop block?
The Query Loop block is a tool that enables WordPress users to display a dynamic list of posts based on specific attributes. For example, it can be set to cycle through all posts of a certain category, displaying the post title and image of each one.
This block can be quite technical to configure. As a result, beginners tend to avoid using it and instead opt for the Post List block, which is a simpler version of the Query Loop.
While the Query Loop block is more complex, it also allows for greater flexibility. For instance, you can create a page full of your best recipes or showcase a portfolio of projects.
When to use the Query Loop block in WordPress
The Query Loop block provides multiple opportunities for promoting your content. Here are some of the results you can achieve with it:
- Create a related posts section for your blog, featuring the post title, excerpt, and image.
- Show content from custom post types like testimonials or portfolio items.
- Display posts of the same tag or category.
- Show related WooCommerce products.
- Display a grid of products, grouped by price.
- List companies by location within a business directory.
- List book reviews according to a specific star rating.
These are just some examples. There are plenty of ways you can configure the Query Loop block.
How to use the Query Loop block in WordPress
To get started with the Query Loop block, you’ll need to navigate to the post or page where you want to use it. Then, click on the + to add a new block and search for Query Loop.
You can also insert the block using the block pattern selector. Switch to Patterns and select Query from the dropdown menu. Then, choose your preferred layout.
There are plenty of Query Loop layouts to choose from. For instance, you can present your posts in a grid, with an image to the left, or stick with the default format.
Alternatively, click on Start Blank to create your Query Loop from scratch and gain full control over the design of your content.
You’ll have to choose a variation to start with. You might want to show the image, date, and title of your post, or just present the post title and excerpt.
Whether you’ve created your block from scratch or used a template, you’ll see a preview of your block in the editor.
Your Query Loop block consists of several different sub-blocks, like post titles, featured images, and more. If you click on the Display Settings icon in the toolbar, you can configure the number of items per page.
You can also use the block settings in the panel on the right to further customize the query loop. You might decide to change the order of your items, create new posts for your feed, apply filters, change colors, and more.
What sub-blocks are found within the Query Loop block?
Within the Query Loop block, you’ll find several sub-blocks grouped together. Although they contain the word “post” in their names, they can also apply to other content like pages, portfolio items, or products.
Let’s take a look at each sub-block.
1. Post Title
The Post Title block displays the title of each post. You can transform the title into a link and adjust the font and color within the Block settings.
2. Post Date
With this block, you can show the published date of your content. You can change the default format, show the last modified date, and link to a post within the settings.
3. Post Content
The Post Content block presents the entire content from your post or page within the Query Loop block. This could make your block very long, which can be off-putting for visitors.
4. Post Excerpt
Post Excerpt displays a summary of each piece of content. Visitors will be able to view your excerpt and find a “Read More” link. You can add this link on a new line or at the end of the excerpt. Plus, you can modify the anchor text, change the link color, and select a new font size.
5. Post Featured Image
If you choose to include this block in your Query Loop, you’ll display the featured image for your posts or products. Additionally, you can enable a link with your image to direct visitors toward the piece of content when clicked.
6. Post Categories
By adding a Post Categories block inside your Query Loop, you can display the categories associated with that piece of content. This is a great way to display blog posts that cover a similar topic, or products within the same category. You can also change the color and fonts within the settings.
7. Post Tags
The Post Tags block enables you to display the tags added to your post. It’s another useful way to showcase similar content.
8. Pagination (previous post and next post)
Pagination is one of the most valuable blocks to add to your Query Loop since it displays links to your previous or next posts. Pagination consists of three separate blocks:
- Previous
- Page Numbers
- Next
To use it, you’ll first need to select the Post Template block, using the List View. Then, you can click on + to add the Pagination block.
9. Post Author
As the name suggests, Post Author showcases the author details, like the author name, avatar, and bio. If you choose to include this block, you’ll need to select the user with the dropdown menu in the Block settings. Here, you can also configure avatar visibility, change the avatar size, show/hide your author bio, and change the color and dimensions.
10. Post Author Biography
If you don’t want to include your author name and avatar in your Query Loop, but you want the author bio to be visible, then this block is for you. All your visitors will be able to see is the bio. Plus, you can customize its appearance, adjusting the dimension, font, and color.
Examples of Query Loop block use cases
Now that you understand the Query Loop block a little better, let’s take a look at three ways you can use it.
1. Create a “recent posts” section
This section can make your recently published content more visible.
To get started, you’ll need to use two Query Loop blocks. Add your first one, then choose a pattern or start from scratch. For visual posts like recipes, Image, Date, & Title can be a good choice.
If you’ve already configured your Query Loop, your posts will show up here. If not, click on Create a new post for this feed to write and publish the posts you want to include.
Since this is where your most recent post will go, you’ll only want to display one piece of content. Navigate to the Display Settings. Beside ITEMS PER PAGE,input “1”.
Now, you should only be able to see your most recent post listed in the block.
You can then add a second Query Loop block to display other recent posts. Choose your preferred layout. Then, navigate to the toolbar and switch from List View to Grid View. This way, the reader can see more of your recipes at once.
Now, click on the Display Settings and change the OFFSET value to “1”. This will eliminate your most recent post from your second Query Loop block.
Additionally, you can customize the layout of your block. For instance, you might want to reduce the font size of your headings to improve the text’s readability. You can do this from the toolbar.
You might also want to reduce the size of the date. You can make these changes within the Block settings. Find Typography and select a more appropriate font size.
You can also set new dimensions for your featured images, and alter the alignment of your recipe titles. When you’re ready, click on Save draft or Publish.
2. Add the Query Loop block to an index template
If you’re using a block theme, you can add the Query Loop block to a template. This can come in handy when setting global styles for query loops and their sub-blocks.
In your WordPress dashboard, go to Appearance → Editor.
Click on the pull-down menu that’s currently set to Home or Page (depending on your theme), and select Browse all templates.
From the list of templates, select the one you’d like to edit. The Index template tends to be a good option, since it’s the one that indexes and displays website posts.
If you choose Index, you’ll find that the template already comes with a Query Loop block, but you can delete it and add your own. You can then adjust the layout, switching between List View and Grid View.
You can also customize your “Read More” text by clicking on the sub-block and typing in your preferred call-to-action.
You’ll also find all the Block settings available if you go to the toolbar and click on Show more settings. Here, you can change the text size and color, and set new dimensions for your images.
3. Set global styles for your Query Loop blocks
If you plan on using Query Loop blocks frequently on your site, it can be time-consuming to create and configure your loop over and over again. That’s why it’s a good idea to set global styles for your query loops and nested blocks.
To access the global styles editor, click on the Styles icon in the top-right corner of your screen:
Then, select Blocks at the bottom of the sidebar:
Scroll through the list of available blocks and find Query Loop. Then, click on Colors:
Here, you can manage the color schemes of different elements and blocks on your site. If you want to add more custom colors to your default palette, click on Palette and find CUSTOM.
Now, click on the + to add new colors to your palette.
Next, go back to your Query Block loop colors. You’ll see a list of elements like background, links, and headings.
You can also set default styles for these components. To do this, select the element you want to edit.
For instance, you can change the background color of your Query Loop blocks.
If you decide against any of the changes you apply, simply click on Clear.
You can also set global styles for the background and text color of your headings. Additionally, you can assign hover colors for your links. When you’re done, click on Save to apply new default styles to your blocks.
Extend the Query Loop block
Although you now know how to create and customize a Query Loop block in WordPress, you may be looking to extend the block even further. Using the Block Variations API, you can specify certain default settings, disable customization options, and more.
For instance, you might never use the Sticky attribute in your Query Loop. The Author field might also not be relevant to your posts. Therefore, you can disable these controls so that they’re not visible.
In this instance, the variation code would look like this:
{
/** ...variation properties */
allowedControls: [ 'inherit', 'order', 'taxQuery', 'search' ],
}This way, your users can access the inherent, order, taxonomies, and search features, but the author and sticky fields won’t be displayed.
Alternatively, you might prefer to hide the search option for users, in which case your property would look like this:
{
/** ...variation properties */
allowedControls: [ 'inherit', ‘postType’, 'order', ‘sticky’, 'taxQuery', ‘author’, ],
}If, for whatever reason, you want to hide all the available controls for your Query Loop block, you can set an empty array beside the allowedControls.
As you can see, this method requires some technical knowledge. If you have no coding skills, you may want to stick with the customization options available in the Block Editor.
Frequently asked questions
While we’ve tried to cover all aspects of the Query Loop block, you may still have some questions about this feature. Let’s look at the most common ones.
What is a WordPress query?
Query translates to “ask” or “command.” So within the Query Loop block, the “Query” portion enables users to ask for certain information to pull into the loop. This is how the Query Loop displays all posts or pages for a specific tag, category, and more.
What is a WordPress loop?
A WordPress loop is a way of displaying similar information in a cyclic format. For instance, you can create a loop of blog posts that will display related articles on your page, showing the post title, excerpt, featured image, and more.
The data is pulled from your published content and placed in the loop, which sits on your pages for visitors. As such, it helps you direct users toward other relevant pieces of content and keep visitors engaged with your site.
What can you do with the Query Loop block?
There are plenty of things you can achieve with the Query Loop block. For example, you could show a list of related or featured products.
Additionally, you could direct users toward other recipes on your site that share the same tags or categories. For a portfolio website, you can even showcase your latest or best work within a Query Loop block.
How can you extend the Query Loop block?
You can achieve detailed control over the way your Query Loop is displayed by adding custom settings to the block. With the Block Variations API, you can create new features, disable certain elements, and apply your own presets.
Create a Query Loop block in WordPress
The Query Loop block is a useful WordPress block that enables you to display featured posts, related pages, or products of a certain category. You can also use it to show content from custom post types, like testimonials and portfolio projects.
The Query Loop block is very customizable. You can configure the sub-blocks within it, like the post title, author name, and featured images. Plus, you can extend the block and add custom settings with the Block Variations API.
Another way to help visitors find the right content on your site is to use Jetpack Search. Ideal for large websites, you can provide instant search results and utilize powerful filters to boost your user experience. Get started with Jetpack Search today!
Jetpack 