Taking Advantage of Query Loops

Query loops can be used to showcase blog posts, pages, categories, tags and more! You can have automatically updated lists on your homepage and other web pages without requiring any coding skills. In this workshop, 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. Modifying the way blog posts are displayed using the query loop.
2. Using query loop patterns.
3. Effectively utilizing the ‘List View’ and sidebar settings.
4. Assigning taxonomies (categories, tags, authors) to create a range of dynamic content.

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 showcase blog posts, pages, categories, tags, and quite possibly so much more. You can have automatically updated lists on your homepage and other web pages without requiring any coding skills. It allows you to display specific things. Maybe you would like to change the way your blog posts are being displayed or you would like to display a list of reviews, portfolio content, new features that have been released, or even recipes. Let’s look at a few real-life examples to see what can be achieved.

In our first example, a query loop has been used to highlight the latest stories recognising women’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.

Here are the objectives of today’s workshop: Modifying the way blog posts are displayed using the query loop, using query loop patterns, effectively utilising the List View and sidebar settings, and lastly, assigning taxonomies; things like categories, tags, authors, etc. to create a range of dynamic content.

So our first stops are modifying blog posts, and exploring patterns. So let’s make our way to Appearance and click on Editor. This will take us into 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 scroll down to the Query Loop block. On our right, we will see how blog posts are being displayed at the moment; in list format. If we look at our block toolbar, we will notice we are seeing our blog posts in list view but we can change that to grid view in one click. And now we are viewing our blog posts in grid view.

At the moment, we can see the post title, the post featured image, the post date, as well as post categories and post tags. But of course, we can alter what we want to have displayed. So let’s add a Post Author block so that we can see who wrote each post. If we 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 remove the current Query Loop block we are using by clicking on the three vertical dots on the right-hand side, and then selecting Remove query loop. Now we can add a Query Loop block in the exact same spot and once you add your new Query Loop block, you can view all the different patterns available by clicking through the list view or the grid view. If you’re in the list view, you can use the arrows to browse through all the various patterns that are available and hopefully you will find the exact pattern you were looking for. Some patterns have post featured images and some don’t. It all depends on your requirements.

If you don’t want to browse through the patterns one by one, you can use the grid view to see multiple patterns at the same time. Just scroll down to view all the available options. I think you will agree, the grid view allows you to compare the different patterns much easier. I’m going to scroll down to the bottom and select the Offset pattern and once you click, it inserts the pattern automatically. But this might not be the pattern you’re looking for. So I’m going to click Undo and I’ll use the grid view again to find a new pattern. This time I’m going to select a pattern that’s labelled Grid of image posts, and again, once you click on the pattern, voila.

Next up we are going to have a look at taxonomies and how to use the sidebar settings. Firstly, I’m going to create a Lifestyle page that only relates to the topic. So I’m going to select the query loop then I will go to my sidebar settings, and deselect Inherit query from template as I want to customise the settings of the query loop. And when you scroll down, you will be able to filter your posts by using categories, tags, authors, and even keywords. I have created a category called Lifestyle and once selected, only posts with this category will be displayed. Secondly, I’ve created a Nutrition page and now I will use tags to only display posts with the Nutrition tag. And once selected, all the posts will be related to healthy eating. 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 author and select the person whose posts I would like to display.

Lastly, let’s have a closer look at our sidebar settings. As mentioned, I’ve deselected Inherit query from the template. This is an option that you can toggle on and off depending on whether you want to customise the query that the loop relies upon. 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 if you wish to. The next setting we are going to 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 by 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 and only means exactly what it says, you have the option to only show sticky posts if you wish to. And then of course we’ve already discussed using filters.

Enjoy exploring the power of the Query Loop block and visit Learn WordPress for more workshops and training material.