The WordPress editor is growing into a full-fledged site builder. Thanks to the full site editing and the new theme blocks like the Query Loop Block, you can display lists of dynamic content for any post type anywhere in WordPress with ease.
In this article, we’ll dive deeper into the WordPress Query Loop Block so you can better understand what it is and how to use it.
What is the WordPress Query Loop Block?
The Query Loop Block is one of the most advanced WordPress theme blocks available in the new Site Editor. It was added to WordPress Core in version 5.8 and is a a more complex version of the Latest Posts Block. It allows anyone to visually build a block that pulls and displays post content dynamically to a page or template. The Query Loop Block isn’t limited to displaying blog posts either. You can use it to pull content from any custom post type you may have. You can even use it with WooCommerce Blocks to display products.
What are “Queries” and “Loops”?
In WordPress terminology, a “Loop” is a way of displaying similar information on repeat. A loop of blog posts, therefore, is a series of blog posts with common attributes such as blog title, featured image, author name, publish date, and a short description. The loop pulls this data from posts (or any post type) and places them in a loop. The loop then displays posts to site visitors.
The query aspect of a “Query Loop” means that a user can query, or command, certain information to pull into the loop. So a Query Loop Block can pull and display all posts or posts of specific categories—to name just a couple of options. This allows someone to show posts in “Category A” and no posts from Category B or C.
Query Loop Blocks can display:
- Blog Posts
- Website Pages
- WooCommerce Products
- Other Custom Post Types
Any post types are fair game for display in a dynamic loop.
Query Loop Nested Blocks
There are two immediate “Nested Blocks” that belong to the Query Loop Block:
- Post Template Block – Holds further nested blocks that display post metadata (Title, Featured Image, Author, etc.)
- Pagination Block – Allows posts to overflow into pages for more to be displayed
We won’t cover these nested blocks in this article but you can click on any of their hyperlinks above to get all the information about how each works within a Query Loop Block.
How to Add the Query Loop Block to an Index WordPress Template
In this example, we are using the “Twenty Twenty-two” Default WordPress Theme. This was the first default theme to include editing through the Site Editor (previously called “Full Site Editor”).
We’ll be walking through how to add a WordPress Query Loop Block to a Template in the Site Editor. To get there, first, hover over “Appearances” and then click “Editor”.
Then, click on the icon in the top left to pull down the dropdown menu. In that menu, click “Templates”.
Now, from the list of presented templates, find the template you wish to edit. One of the most natural templates for this block is the “Index” template since it is the template that indexes or displays website posts.
You are now on Twenty Twenty-two’s Index Template. You’ll notice that it already comes with a Query Loop Block configured. But, if you are using a different Block Theme then it may not come with it.
To add a new Query Loop Block, click the “(+)” icon. Scroll down to the “Theme” blocks or type “Query Loop” into the search bar. Drag the Query Loop block into the Site Editor.
WordPress has predefined “Patterns” that can give you a headstart in designing your Query Loop. You can choose a specific pattern if you know that there’s one that fits your needs, or you can start blank. We’re going to click “Start blank”.
There are four default variations to apply to a Query Loop. For this example, click the “Title & Date” variation.
This will create the Query Loop with the “Title and Date” variation.
Notice nested blocks appear inside WordPress’ Query Loop Block. This is because those blocks provide necessary features for the Query Loop. Since we chose the “Title & Date” variation, those nested blocks need to be included to show “Title” and “Date” information. A different variation would have loaded a different arrangement of nested blocks.
Now that a Query Loop Block is on a template, we’ll explore the Toolbar and Settings for this advanced Theme Block.
Query Loop Block Toolbar and Settings
Each block within the Site Editor and Block Editor has its own Toolbar options and a Sidebar of More Settings.
Query Loop Block Toolbar
To find the Toolbar for the Query Loop Block it is easiest to go to the List View and select the block—making sure a nested block is not selected.
The first unique Toolbar option for the Query Loop Block is the “Display Settings”. Clicking on that will show three options:
- Items Per Page – Control # of posts displayed at a time in the loop
- Offset – Skips starting point of posts by a set amount
- Max Page to Show – Limits # of pages shown, even if the query has more results
Next on the Toolbar is the “Replace” button. This gives the option to strip the Query Loop Block’s pattern and replace it with a different pattern.
The last unique Toolbar option for the Query Loop Block is the toggle between List View and Grid View. List View displays the post loop “as a list” with posts stacked. Grid View displays the post loop as a grid with more of a table layout for the posts to fill.
Query Loop Block Settings Sidebar
The Query Loop Block has additional configurations in the “More Settings” sidebar. To reveal the sidebar, either click the “Show More Settings” option nested in the Toolbar or by clicking the “Gear” icon in the top right while the Query Loop Block is selected.
The first visible sidebar setting gives site owners the ability to create a New Post for the Query Loop from this editing page. After that, there is the Layout Toggle which affects how Nested Blocks use layout width compared to the Query Loop Block—more on that later. The Settings Toggle allows for selecting a custom or an inherited query for the block—more on that below as well.
Layout Options
The “Layout” settings for nested blocks allow a designer to toggle additional settings on (blue). These settings allow one to choose if those blocks use content and width percentages. It also reveals an option for left, center, or right content justification. With it untoggled (grey), nested items are set to full width by default.
Query Settings
When the query “Settings” is untoggled (grey), then you can select exactly what to query. The first option is “Posts” which can be pages, posts, or custom post types. Next, users can choose between ascending or descending order for either date published or alphabetically. Lastly, there is an option to include or exclude sticky posts in the query.
Toggling “Settings” (blue) sets the Query Loop Block to inherit the query from the template used template.
Query Filters
Next, with query “Filters” gives users the option to further customize the query by filtering posts by:
- Post Categories – Comma-separated list of categories
- Post Tag – Comma-separated list of tags
- Post Author – Dropdown list of authors
- Post Keyword – Enter a list of keywords to filter by
Color Options and Advanced Settings
Lastly, we have Color settings and Advanced settings. The color options allow designers to choose colors for:
- Text Color
- Background Color
- Link Color
Advanced settings include the ability to add a CSS class to the WordPress Query Loop Block and/or assign an HTML element to the block.
Each nested block within the Query Loop Block has its own Toolbar options and sidebar Settings. Visit the list of nestable blocks above to learn more about each and the settings that they have.
Tips and Best Practices for Using the Query Loop Block in WordPress
Query Loops are powerful blocks. Follow these tips and best practices to get the most out of them.
Set Global Styles for Query Loops and Nested Blocks
Global Styles can be set on a block-type-by-block-type basis. This lets designers create global default styles that apply to all instances of a block throughout the website. This is a huge time saver.
Currently, on the 2022 Theme, the Query Loop Block allows you to add Global Styles for text color, background, and link colors. To get to the global styles editor, click on the “Global Styles” icon (half-filled in circle), select “Blocks”, and find the Query Loop Block.
You can also assign separate global styles to each of the nested theme blocks (like Post Template, Post Title, etc.) within a Query Loop as well.
Use Multiple Query Loop Blocks on a Single Page to Create a Featured Blog Section
In creating a Blog Page template, you may want to create a featured post that stands out because it is the most recent post published on your site. Below is a simple version of the concept.
There will need to be two Query Loop Blocks on our “Index” template. The top Query Loop Block will have a “List View” display and will only show one single post. Make sure that it has no Pagination Block nested in this first Query Loop.
With the second/bottom Query Loop Block, set it to “Grid View”. It should display multiple posts in columns and set the “Offset” to 1. An offset of 1 will skip the first post of the query. This is desired since the query loop above contains the featured post.
Use Consistent Design for Query Loops Displaying the Same Post Types
Query Loops used for “blog articles” should look similar. If you use Query Loop Blocks for other post types, consider a slightly different style for those so your site visitors can differentiate what are “Blog Posts” and what are other types of content. This will make for a clear website UX.
Using Divi’s Blog Module: A Query Loop Block Alternative with More Design Options
If you use Divi, the Blog Module functions much like the native WordPress Query Loop Block. And adding Divi’s Blog Module to a page or template is simple, giving you all the options you need to customize the parameters, layout, and design of the dynamic post content.
The content displayed within the Blog Module is completely flexible as well, allowing you to select a certain post type, post type categories, and the number of posts to include. Individual Module Elements can be added or removed such as featured images, titles, meta-text, body text, read more links, pagination, and so on.
Each of these Module Elements can be completely styled using Divi’s extensive design options. Learn more about using Divi’s Blog Module on Templates.
Frequently Asked Query Loop Questions
Answering some of the most asked questions about WordPress’ Query Loop Block.
What’s the Difference Between the Query Loop Block and the Latest Posts Block?
The Query Loop Block is similar to the Latest Posts Block in that it has the capability of displaying a list of the latest posts on your blog dynamically. However, the Query Loop Block is much more advanced, allowing you to build your “list” of posts, pages, or other post types from scratch by integrating other nested blocks. For example, if you have a custom post type for recipes, you can use the Query Loop Block to create an entire page of recipes customized to your liking.
Does the Query Loop Block Require Coding Knowledge?
No, the WordPress Query Loop block does not require coding knowledge because the functionality is already built-in. This block enables you to display a loop of posts on your WordPress site using customizable block settings on the front end.
Where Can I Use the Query Loop Block?
The WordPress Query Loop Block loops through published posts and pages to display them. It will automatically update as new pages/posts meet the query parameters. This makes this block useful in many places such as post or archive templates, or on static pages where you want to display things like recent posts dynamically.
Have you used the Query Loop Block on your WordPress site? What discoveries have you made? Let us know in the comments below.
Featured Image by Dmitry Kostrov / shutterstock.com
FAQs
How do I add a query loop in WordPress? ›
Choose a List of Posts to Display. If you use the query loop block without selecting the posts you want to display, then it will display all of them. However, you can select to start with a list of posts or select a specific post(s) to display in the Carousel view. Select the Carousel view in the query loop block.
What's a query loop on WordPress? ›The Query Loop Block is an advanced block that allows you to display posts based on specified parameters; like a PHP loop without the code. In WordPress, The Loop means to display specific data in a repeated manner. Each post generally shows a title, author, date, post content, and comments.
What's a query loop? ›The Gutenberg Query Loop block is a layout block that displays a dynamic list of posts and pages from your site on another site for easier navigation. It allows users to query a set of posts and view each one.
How do you write a loop in a query? ›- The initial step is executed first, and only once. This step allows you to declare and initialize any loop control variables.
- Next, the condition, i.e., initial_value .. ...
- After the body of the for loop executes, the value of the counter variable is increased or decreased.
- The condition is now evaluated again.
The Loop block is a container that can hold a sequence of programming blocks. It will make the sequence of blocks inside it repeat. You can choose to repeat the blocks forever, a certain number of times, or until a sensor test or other condition is True. Only the blocks inside the loop will repeat.
What is a query loop block? ›The Query Loop block is a powerful tool that allows users to cycle through a determined list of posts and display a certain set of blocks that will inherit the context of each of the posts in the list.
Can we run SQL query in loop? ›SQL WHILE loop provides us with the advantage to execute the SQL statement(s) repeatedly until the specified condition result turn out to be false. In the following sections of this article, we will use more flowcharts in order to explain the notions and examples.
How do I loop a date in WordPress? ›WordPress gives you four functions to output the date and/or time. These are: the_date() : By default, it will echo the date of the post in the format F j, Y , so if the post was published on 20 November 2018, it would echo November 20, 2018.
What is the relationship between WP_Query and the WordPress loop? ›WP_Query provides numerous functions for common tasks within The Loop. To begin with, have_posts() , which calls $wp_query->have_posts() , is called to see if there are any posts to show. If there are, a while loop is begun, using have_posts() as the condition.
What is a loop in Elementor? ›Elementor 3.8 Pro introduces the first phase of the Loop Builder. The Loop Builder enables you to create and design the main item for repeating content (i.e. loops) such as listings, as well as customize its layout on the page.
How does @query work? ›
Queries help you find and work with your data
A query can give you an answer to a simple question, perform calculations, combine data from different tables, add, change, or delete data from a database.
Using Dynamic Query Execution. Many databases allow SQL queries to be executed dynamically, by passing a string containing an SQL query into a database function which executes the query.
What is the purpose of running a query? ›A query is a set of instructions that you can use for working with data. You run a query to perform these instructions. In addition to returning results — which can be sorted, grouped, or filtered — a query can also create, copy, delete, or change data.
What are the three 3 types of loop? ›Loops are control structures used to repeat a given section of code a certain number of times or until a particular condition is met. Visual Basic has three main types of loops: for.. next loops, do loops and while loops.
What are the 3 types of loops? ›Looping Constructs in Java are statements that allow a set of instructions to be performed repeatedly as long as a specified condition remains true. Java has three types of loops i.e. the for loop, the while loop, and the do-while loop.
What are the three 3 types of loop control statements? ›- break statement.
- continue statement.
- pass statement.
A loop is a programming structure that repeats a sequence of instructions until a specific condition is met. Loops allow you to repeat a process over and over without having to write the same (potentially long) instructions each time you want your program to perform a task.
What are the 3 functions in for loop? ›Initialization statement, which describes the starting point of the loop, where the loop variable is initialized with a starting value. The test expression, which is the condition until when the loop is repeated. The update statement, which is usually the number by which the loop variable is incremented.
What is loop and its uses? ›In computer programming, a loop is a sequence of instruction s that is continually repeated until a certain condition is reached. Typically, a certain process is done, such as getting an item of data and changing it, and then some condition is checked such as whether a counter has reached a prescribed number.
Can we use for loop in SQL query? ›FOR statements are a special type of looping statement, because they are used to iterate over rows in a defined read-only result set. When a FOR statement is executed a cursor is implicitly declared such that for each iteration of the FOR-loop the next row is the result set if fetched.
What is a loop block in Scratch? ›
In programming, using a command to repeat a set of instructions is called a 'loop'; all programming languages include ways to do this. Scratch includes three repeat blocks which allow you to create loops, depending on how you want the loop to run.
How to loop through a block in Oracle Forms? ›get_item_property('item',nextitem ) gives you the next item, so you can loop through the items in a block. get_block_property('block',nextblock) gives you the next block, so you can loop through the blocks.
Can we loop in SQL query? ›SQL Server implements the WHILE loop allowing us to repeat a certain code while the loop condition holds. If, for any reason, we need other loops, we can simulate them using a WHILE loop. We'll show this later in the article. Loops are rarely used, and queries do most of the job.
What are 3 types of loops in SQL? ›- Basic Loop / Exit Loop.
- While Loop.
- For Loop.
- Cursor For Loop.
LOOP implements a simple loop construct, enabling repeated execution of the statement list, which consists of one or more statements, each terminated by a semicolon ( ; ) statement delimiter. The statements within the loop are repeated until the loop is terminated. Usually, this is accomplished with a LEAVE statement.
How do you run a SQL query in a WHILE loop? ›SQL While loop syntax
The while loop in SQL begins with the WHILE keyword followed by the condition which returns a Boolean value i.e. True or False. The body of the while loop keeps executing unless the condition returns false. The body of a while loop in SQL starts with a BEGIN block and ends with an END block.