In WordPress 5.8, they released a new feature called the Query Loop Block. If you haven’t checked it out, it’s definitely worth looking at! You can read through this blog post, or watch the video at the bottom!
So the Query Loop Block basically is going to write a little PHP loop for you, without you having to write any code. Now this is similar to the Latest Post Block, but it’s much more powerful and it can do a lot more, so let’s dive in and take a look. For the screenshots, we have a demo WordPress site with some information thrown in for us to use.
On the home page we have the blog articles, so our posts are here on the home page. I do want to point out that this very top one is a sticky post, and I’ll explain why that’s important later. Then we have two pages set up, one is about one of our authors “Robbie,” and the other is about “Bugs,” our other author.
So we’ve got two authors for these blog posts. What we want to do is on these pages is to show all the blogs that the author has written. We can do that with the Query Loop Block!
In the back end of WordPress, I want to point out one more time that there are posts already, and they are written by either Bugs Bunny or Robbie Adair.
You’ll see in the backend, that there is a sticky post written by “Robbie Adair” as well.
Then when we look under Pages, we have two pages. So we’ve got our two pages “About Bugs” and “About Robbie.”
We’re going to start with the “About Robbie” page. When we open up the page, I want to go down to the bottom of this content and add a new block. So I’m going to add that I want a new block and I’m going to start typing “query” in the block search, for query loop and it will locate the Query Loop Block for me.
You’ll see there are some patterns down below but I’m just going to place the Query Loop block at the bottom of my article.
Now we can select the block, and we want it to be in a carousel view, meaning they are going to be singular articles, and we want to have it in a grid where they’re columned. We could even start blank, if you know the design you want.
We’re going to start with the carousel one, so we can just dive in. I’m going to choose the block and you’ll see that what I have right now is a title, an image, the excerpt or the first paragraph, a read more link, the date, and a little separator line.
First of all, I have more blogs than this, so you’ll see that you can change the number of items you’re showing and offset them, as well as, you can set a max number. I’m going to go ahead and up this up to six for right now, so you can actually see that it’s pulling all of those blogs that we have.
This includes the sticky post, you’ll see it in the list. So what we’re going to do is select our query loop block again. Now, I would like this block to stand out so that it looks a little different from my page, so you’ll see that when I select the block on my settings I can change the color. I’m going to change the background color to be white, kind of stands out a little better on this page, so I know there’s something different.
Also, you’ll see down on the settings panel for the block that you can actually pick “post” or “pages” for a type, so you can control what you are going to pull into this query loop block. So, this ability to also pull Pages, sets the Query Loop Block above the Latest Posts Block.
Also down in the “block” settings we can set by category, author, or keyword. In our instance, we’re wanting to show all of the the blogs by “Robbie” so we’re going to select “Robbie” as our author. Automatically, it’s only showing the blog posts that Robbie wrote, including the sticky post.
Note: We can say we don’t want that sticky post and set to exclude it.
You can also say “only” so if you wanted to put the sticky posts in places you could. We will exclude it here, and you’ll now see what I have is just the blogs post by Robbie on this page. Let’s go ahead and update this page and look at it from the front end. Then, we’re going to go back to the backend and look at the “Bugs” page. We’re going to do one more thing on there.
Now we’re going to edit the “About Bugs” page and add the query loop block.
We’re going to add the Query Loop block again, only this time we’re going to select that we want to start blank. When you start blank, you’ll see you get some basic information here. We want the “title and date” option.
You can see I just have the title and date of these blog posts that exist. Now we need to go over to the block settings and select Bugs Bunny as the author and all of a sudden we have less, because Bugs only has two that he has written.
The last thing that I want to show you is when you’re doing them by yourself from scratch like this, you can still add in elements. So you can say “well it looked better with an image,” guess what? If we look at our outline navigator, it will give you a better idea that the query loop block is housing two blocks already, Post Title and Post Date.
So we can actually go and add another block in here. Maybe we want the featured post image to go in there, you just drag and drop it where you want in the editor.
You’ll see because this is a loop it did it to all of the posts in there. And I could move these around if I wanted that image below the title, you can just simply move it.
Let’s update the page the way it is and go back and refresh our About Bugs page on the frontend. You’ll see this one looks like our one we did from blank.
That’s a quick look at the Query Loop Block, it’s a really cool new addition to WordPress and I hope you try it out and see what all you can do with it! I think you’ll be quite pleased at the versatility that it offers.