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 recognizing 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 appetizers. 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 utilizing 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. You will have two options; to choose a pattern for the query loop or to start blank. If you select Start blank, you will have a few variations to start with. Or you can decide to choose a pattern. You can view all the different patterns available by clicking through the list view or the grid view. If you are 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. And once you find the pattern you’re looking for, you can merely click on the pattern, and it will insert directly into your page. And now you can modify it as you please.

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 templates as I want to customize the settings of the query loop. And when you scroll down, you’ll 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 customize 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 two 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. And lastly, you also have the option to change the colour of the text and the background of your Query Loop block.

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

Workshop Details


Presenters

Wes Theron
@west7

I am an Instructional Designer for the WordPress open-source project sponsored by Automattic. I am a strong supporter of the open-source movement. I have a background in education and content development. I am a husband, father, dreamer and lifelong learner.