Taking Advantage of Query Loops

Query loops can showcase blog posts, pages, categories, tags and more! You can have automatically updated lists on your home page and other web pages without requiring any coding skills. In this tutorial, we will learn how to use query loops on a post or a page in order to show off dynamic content with a few clicks of a button.  

Learning outcomes

1. Identifying the anatomy of a Query Loop block.
2. Modifying the way blog posts are displayed using the Query Loop block.
3. Using query loop patterns.
4. Assigning taxonomies (categories, tags, authors) to create a range of dynamic content.
5. Effectively utilizing the list view and sidebar settings.

Comprehension questions

1. What type of lists would you like to display?
2. How can you display lists of posts with set specified parameters without code?

Transcript

Hi, and welcome to Learn WordPress. When you hear the term query loop is your first thought query what? If so, you’re not alone. This powerful block can be used to display posts based on specified parameters. Query means to ask. So the block will allow you to ask the database to show you all the posts about a specific topic. You can customise this as you would like, to see the most recent posts in a specific order, to change how many posts are shown on your site or to exclude a certain category of posts.
For example, you can ask to see all the posts written about gluten-free recipes, and all posts about reviews of computer games. The Query Loop block will be delighted to answer your question or query and show you a preview of all those posts.

Each Query Loop block is made up of 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 customise the appearance and layout, including adding or removing additional blocks as you’d like. 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 recognising woman’s creativity, leadership, courage and innovation. And 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 up, we have breakfast recipes and, if we scroll down, amazing appetisers. And 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. 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 homepage template that displays all our blog posts. Let’s open up our list view and make our way down to the Query Loop block. On our right, we will see all our blog posts are being displayed in grid view but we can change that to list view in one click.

When we open up our Query Loop block in the list view, we will notice that at the moment, we can see the post featured image, the post title, the post excerpt and the post date, but of course, we can alter what we want to have displayed. So let’s add a Post Author block to see who wrote each post. And if you change something in one post, it will appear everywhere else. And of course, don’t forget to click Save.

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 in carousel view or in grid view. At the moment I’m in carousel view and when you click on the arrows or movers, you can browse through the various patterns that come with your theme.
And when you select a pattern, you can of course customise it as you please.

I will go ahead and remove the Post Excerpt block and then change the size of the post title to large and insert a Post Featured Image block above the Post Title block
and then I will change the height of the Post Featured Image block to 282 pixels to ensure that all the images display the same. And lastly, I will change the position of the Post Date block by using the arrows and pushing it below the post-featured image.

The other option is to remove the query loop to add a new one and when you do that you have two options, to choose a pattern as we just saw or to start blank, and when you start blank, there are a few variations to choose from. And once you have made your selection, you can go ahead and customise it accordingly.

Next up, we are going to have a 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 then open up my sidebar settings. And the first thing we have to do is deselect Inherit query from template as I want to customise the settings of the query loop. And when you scroll down you now have the option to filter your posts by using taxonomies such as categories and tags, authors, and even keywords.

I’m going to select taxonomies as I’ve created a category called lifestyle, and only want to see posts with this category displayed. And when I add the lifestyle category, all posts that don’t have this category will be excluded. Secondly, I’ve created a nutrition page, and now we’ll use taxonomies to only display posts with the nutrition tag. So I will select the Query Loop block, click on filters and select taxonomies and then search for the nutrition tag. And once selected, all my posts will be related to healthy eating.

You also have the option to display posts from a specific author. So 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 would like to display. Now we will only see posts written by Roger Lister. You can of course also choose a keyword and only display posts which contain that word or words in the text.

Lastly, let’s have a closer look at our sidebar settings. As mentioned, I’ve deselected Inherit query from the template. If you toggle it on, certain customization options will be hidden, and if you toggle it off, more customization options will appear.

The next option is post type. At the moment we are displaying blog posts, but you can even display pages or custom post types. The next setting we will look at is columns, and here you can change how many columns you would like to have displayed. 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. Then of course we have already discussed using filters, and lastly, you also have the option to change the colour of the text, background and links of your Query Loop block.

All the best taking advantage of query loops and visit Learn WordPress for more tutorials and training material.