Taking advantage of query loops

Transcript

Introduction

In this lesson we will learn more about query loops and using the Query Loop block. Let’s first talk about the Query Loop block. This powerful block can be used to display posts based on specified parameters. This is also the block used on your blog page to display all your posts and will allow you to ask the database to show you all the posts about a specific topic. For example, you can ask to see all the posts written about gluten-free recipes. Or you might want to see posts about reviews of computer games.

Structure of a Query Loop block

Each Query Loop block comprises various blocks like the Post Featured block, the Categories block, the Post Title block, the Post Author block, the Post Excerpt block, etc. While you won’t be able to edit the content of these nested blocks, you can customize the appearance and layout, including adding or removing additional blocks as you’d like.

Examples

Let’s look at a few example websites to see how they have used query loops. In our first example, a query loop has been used to highlight the latest stories, recognizing women’s creativity, leadership, courage, and innovation. Below that, a query loop has been used to display blog posts. In the second example, query loops have been used to display different types of recipes. First, we have breakfast recipes and amazing appetizers if we scroll down. In our last example, a query loop has been used to create a news page. Let’s first look at how to modify a Query Loop block and use patterns.

Editing

So let’s make our way to Appearance and click on Editor. This will take us to our Site Editor, and currently, we are on our blog home template, which displays all our blog posts. Let’s open the list to see how our Query Loop block is structured. At the top, we will see the Featured Image block. Then we have the Post Title block followed by the Post Meta blocks. They include the Post Date block, the Post Author block, and the Categories block. Lastly, there is the Post Excerpt block. But of course, we can alter what we want to have displayed. So, for example, let’s delete the Post Excerpt block. Select the Post Title block and drag and drop it above the Featured Image block. The great thing about updating the Query Loop block is that if you change something in one post, it will appear everywhere else.

Start blank versus patterns

But what if we want to use a completely different pattern and layout? Well, we can click on Replace in our block toolbar and browse through the various patterns that come with your theme. And when you select a pattern, you can, of course, customize it as you please. You will have two options when you add a new Query Loop block. You can choose a pattern, or you can start blank. When you click Start blank, you can select one of the variations. In this case, I will select Title, Date, and Excerpt. Then we can modify it further. Let’s go ahead and add a Featured Image block below the title. Thereafter, we can open up Styles and change the aspect ratio to, for example, 4×3 to ensure that all the post-featured images display the same.

Filters

Next up, we will look at taxonomies or filters and how to use the sidebar settings. I’ve created a lifestyle page and only want to see posts related to this topic. So, I will select the Query Loop block and open my sidebar settings. The first thing we have to do is deselect the Inherit query from the template, as I want to customize the settings of the query loop. When you scroll down, you can filter your posts using taxonomies, such as categories and tags, authors, and even keywords. I will select taxonomies as I’ve created a lifestyle category and only want to see posts with this category displayed. All posts that don’t fall under this category will be excluded when I add the lifestyle category.

You also have the option to display posts from a specific author. Once I select the Query Loop block again, I will go to my sidebar settings, click on Filters, select Authors, and select the person whose posts I want to display. Now, we will only see posts written by Roger Lister. You can, of course, also choose a keyword and only display posts that contain that word or words in the text.

Sidebar settings

Lastly, let’s have a closer look at our sidebar settings. As mentioned, I’ve deselected ‘Inherit query from the template’ to customize the query. If you toggle it on, certain customization options will be hidden. If you toggle it off, more customization options will appear. When you add a new Query Loop block to a post or template, it is also important to turn this off, as your Query Loop block might not appear on the front end. The next option is post type. At the moment we are displaying blog posts. But you can also display pages or even custom post types. Below that, you have the option to order your posts from newest to oldest, oldest to newest, or alphabetically. Next, let’s talk about sticky posts. A sticky post is a post that sticks to the top of your blog page, and the option in your sidebar settings will allow you to include sticky posts, exclude them, or only show sticky posts. Below sticky posts, we will see the option to turn off ‘Force page reload.’ This will allow someone to browse through posts without a page reloading and could contribute to a better user experience. Finally, we have already discussed using filters.

Conclusion

All the best as you take advantage of this powerful block to display posts.

Practical

Use WordPress Playground to test your knowledge.

1. Create two posts, add some dummy content, and post featured images. If you don’t have any images on your computer, you can use https://unsplash.com/. One photo should relate to Fitness (opens in a new tab), and the other to Nutrition (opens in a new tab).
2. Create two categories, namely Fitness and Nutrition. Add the Fitness category to one of the posts and the Nutrition category to the other.
3. Create a new page, add the Query Loop block, and select a pattern. Name the page Nutrition.
4. De-select ‘Inherit query from the template.’
5. Navigate to Filters > Taxonomies > Categories and select Nutrition to display only posts tagged with Nutrition.