 Wonderful. Well, as I said, good day everyone and welcome to today's session. The topic is using the query loop block and category templates. And I thought I'll first do a bit of an introduction and then we can go to my test websites and we can see things in action. So let's first look at the learning outcomes for today. Number one, we will be defining query loops and then we will learn how to modify the query loop block as well as use patterns. And then we will also assign taxonomies such as categories, tags, authors and even keywords. And then we will also define category templates and then also add and modify a category template. So let's start with the query loop block. So what is the query loop block? It's a powerful block that can be used to display posts based on specified parameters. So they can of course just be normal block posts but the query loop block can also be used to display reviews or recipes or even reviews as an example. So I actually decided to take a screenshot of a news website, this is from The Guardian. And here we can actually see three different query loop blocks that have been used to display articles or posts. So at the top, you'll see the first query loop block and this is of course the featured article. And then bottom left, we have a query loop block with four articles and then bottom right, we have another query loop block that basically just displays one article. And of course they will have specified parameters displaying the articles that they want to in that query loop block. Another example I have here is from a food website or a recipe website. And here we will see two different query loop blocks have been used. The first one only displays food related to New England food and the second one or the recipes year will be related to puff pastry or pastry treats. That brings us to the next topic for today and that's category templates. So what are these? So a category template is a framework or a page layout for displaying a list of posts in a specific category. So let me explain further. When viewers click on a link to one of the categories on your site that are taken to a page listing the posts in that particular category. So for example, let's say you have a category named sports. If somebody clicks on sports, they will be taken to a page with all the articles related to that category or like a category of archive. And the category template allows you to decide how you want that archive page to look. You can change the heading, you can change or the header, you can change the footer, you can even change how you want those posts to be displayed. And that is of course something we will look at a bit later, but here are also two examples to kind of see what I mean. So on this site, I clicked on Japanese recipes and it took me to this archive page. And here you will notice all these recipes are related to Japanese cuisine and you will see it's got a unique header or banner here at the top. And of course here I clicked on the curry recipe or curry category and here we will see all the recipes that's related to curry and also then a unique banner or header. All right, so without further ado, let's jump to my test website and start looking at the query loop block. All right, so let's first go to this test website and let's add a query loop block. Now, as I said, query loop block can be used on a blog page. It can be used on a page where you want to review books or movies or whatever it may be. So let's just kind of see how it works. So I'm gonna use the sash command forward slash and then query loop. And when you select this block, you have an option between choosing patterns or starting blank. So let's say for example, you wanna start blank and you can start by, let's say, you only want to see the title and excerpt or let's undo and say you wanna start with an image, a date and a title. Or of course, you can start with a pattern. And I wanna of course start with a pattern because all the work has basically been done for me. When I select a pattern, I can just start modifying it to meet my needs. So for this example, let's select this pattern called grid of posts. All right, now before I continue, I wanna talk about posts because of course the query loop block displays posts. We don't add any content to the query loop block. The query loop block is just a way for us to display these posts. All right, so we'll get back to our query loop block now but just as a reminder, if I go to my dashboard and I go to posts, we will notice here are all my blog posts that I've written and I've published. And you will notice on the left, we have the title and then the author, the person who wrote the article or the blog post. And then we've got categories and we've got tags. So let's just open health 101. So here you will notice the title and I've added the content and here bottom right, I've added the featured image. So the image that you see when you add the query loop block and you choose the post featured image, this is the image that gets pulled in. All right, so if I return, we know that below posts will see categories and tags. And I thought it was important to talk about categories and tags as well. So categories and tags are two primary ways to group content on a WordPress site. So in simple terms, categories are general labels while tags are more specific, describing your post in more detail. So categories, again, are meant for broad grouping of your posts and categories are meant to describe specific details of your post. So I always think of this example. Let's say for example, you write a blog post about Michael Phelps who won a gold medal at the Rio Olympics. So I might decide the category, the category for that blog post will be sports, right? But then the tags can be swimming, Michael Phelps, gold, Rio. So we've got the broad category, sports, and then we've got the tag that basically gives you a better description of the article. And of course, your tags and categories are important, especially when you start using taxonomies to display specific content. But we'll see that in a minute. All right, so if I go back to posts, you will notice if I click on quick edit, again, you'll see that this article has the art category and the Renaissance tag. If I look at this one, you will see, whoops, I just wanted to do a quick edit. If I do quick edit, you'll see this has been assigned to the lifestyle category and it's got a nutrition tag. Okay, so those are the tags and categories. And as I said, we create our content when we create a post. But now, of course, we use the category blog then to display those posts. All right, so I've selected a pattern. And the next thing I wanted to discuss was the anatomy of the query loop block. Now, they are different blocks you can add to your query loop block. So if I open up the post template block here in my list view, you will notice at the top, we've got the featured image, then we have the title block, then we have an excerpt, and then we have the date. Now, of course, we can remove some of these blocks or we can add more. So let's say, for example, we wanna remove the excerpt. So let's remove the post excerpt. And the great thing is you'll see that when you change something on one of the posts in the query loop block, it will change everywhere else. So another thing we might say, okay, we want the title to be at the top of the post featured image. Now, I can just do that. I can drag and drop. And then you'll notice everywhere else it has been applied. And I can say, let's say, add after. So maybe below the title, we wanna add the name of the author who wrote this, and et cetera. Right, so to kind of reiterate what I said, the query loop block is used to display posts, but not even just posts, it can even be used to display pages. As we've seen, it's built up of various blocks. And of course, we can't edit content. In year, we add our content to a post. What we see here is just what is being pulled in from the post. Okay, but let's say for example, I don't want to use this pattern anymore. You can quickly change that. So let's replace it with a different pattern. We can, for example, select a different pattern. And then we can decide, oh, I want to display four items per page here in my block toolbar. Okay, so that is a bit of an introduction to the query loop block. Let's now look at an example. Okay, so I'm going to go to a different test website, and let's look at this test website on the front end. Okay, so it's a photography website, and you'll notice I've got a home tab, and then I've got a galleries tab, because as a photographer, I take action sports photographs, and I take photos for commercials. And let's say I want to display all the images that I've taken at sports events. So let's click on action sports and scroll down. And here you will notice, I've used the query loop block to display these posts. And of course, if I click on one of these now, let's click on Red Bull Scadoff. And here you can of course see all the images from that event. All right, but we're not focusing on that now. We are focusing on displaying those blog posts. Okay, so let's just jump to the dashboard again, and I will remind you, here are all the posts that I've created. And you will notice that some of them have the commercials category, and some of them have the action sports category. And that's important to remember as we start editing that page. All right, so let's go to pages and that is the action sports page. All right, and here we can see things on the backend. And let me show you how I created this. So I'm actually gonna remove this query loop block and start from scratch. Okay, so forward slash query loop and I'm gonna choose a pattern and then I'm gonna modify the pattern. All right, so I am going to select this grid pattern and I'm going to say wide width. I'm gonna open the list view and make sure I select my query loop. Then I'm gonna select the post template as I actually don't want three columns, I want two columns. So now I can change that here in the setting sidebar, I can say I want two columns, great. The next thing I'm going to do is I'm gonna remove the post except block. I don't want an excerpt. And then below that add after, I'm going to add the post featured image block. And remember, this is pulled in from the post, which I've already added, great. So there it is, ready. But now I need to show you something really important. Will these be displayed on the front end? So let's see, I'm gonna preview in a new tab and now you'll see there's nothing there and there's a reason for it. So I just want to close that. If I return, I'll open up my list view again and show I select the query loop block and I'll open my setting sidebar. Now at the moment, this query loop block is inheriting the query from the template. But we want to edit the query loop block. And when you want to edit this query loop block, you need to deselect that. So I'm going to deselect that. And when I deselect this, you will notice you've got some more features that you can use as well. But yeah, when I deselect this as well, we will actually see that these posts will be displayed on the front end. So let's deselect and yeah, you will notice you've got some more options and now I'm gonna update. Right? And I'm just gonna refresh here as well. And then I'm going to preview in a new tab. Let's see if it will display now. There we go. But you will notice that some of these images don't look the way you wanted to. Well, we can change that. So that's the first thing. So let's select this post-featured image. And again, as a reminder, if I change something in one, in one post, it will be updated everywhere else. So I'm gonna select this post-featured image block and I'm gonna open my styles in my sitting sidebar. I'll scroll down to aspect ratio and I'm gonna change the aspect ratio of the post-featured image block. And I'm gonna say I want all images to be three by two. Awesome. And of course, this image will be cropped to fit that ratio or that aspect ratio that I see. But now all the images will look the same. Okay, so let's update that. But now there's one more problem. This page displays action sports photographs or posts from action sports events or sports events. And at the moment, we will see we've got Sunstar and we've got Travelco. And let me show this to you. So I'm going to say add after, then you can actually see it. I'm gonna say add after and let's add the category block. So categories. Ah, and now we can see, okay, but this has got the commercials category. This has got the action sports category. And now we can use taxonomies to only display a specific category. And in this case, the action sports category. Okay, so make sure you select your query loop block again, go to your sidebar settings. And because we deselected query from template, we can actually see these features and there's a filters features right here at the bottom. And let's click on the plus icon and it says filters options. And then you will see taxonomies, authors and keyword. Now taxonomies will be used to display a certain category or a certain tag. And the authors filter, you can say, I only want to see posts written by a specific author or maybe two authors. And the last one is a keyword. So if you type in a keyword, only posts with that keyword will display. Okay, so let's click on taxonomies because we said we want to use the category filter. There you'll see categories and you'll see tags. And we only want to see, oops, I was logged out. Let me just log in here quickly and refresh. Okay, sorry about that. So we were with filters, taxonomies and for the categories we said, okay, action sports. And now we can select action sports. And now you can note that all the posts with a different, with a different category will not display. So let's select action sports. And now you will notice all the posts with the commercials tag will not show. So now we can update and let's refresh this page. And if I go to this page, let's refresh that and let's see what happens. Okay, let's just do it again from here, preview in new tab. And there you go. We will only see posts with that specific tag. So we set parameters for this query loop block. Great stuff. So now I want to look at one more example before we start talking about category templates. Okay, so let me jump to my other test website again. All right. And let me just go to posts again as a reminder. So yeah, I've got all my posts. I've got the author, categories and tags. Okay, so let's go to pages. I'm going to go to lifestyle. Now, just as a reminder as well, the query loop block can be used on pages, posts and templates. So it can be used in multiple places. Okay, so in this example, this is my lifestyle page. So let's say for example, I don't have other dummy content here now, but let's say for example, I've got a lot of other information and images, et cetera about lifestyle, but now I also decide I want to add a query loop block displaying some posts related to living a healthy lifestyle. Now, at the moment you'll notice I've got all my posts here. So let's just select the query loop block and open that up. So if we look at the anatomy of this query loop block, we'll see the title, the featured image, the author, the date, but now what I've done here as well is I've added a row block and within the row block, I added a categories block and a tags block. Okay, so that is what we see there so that we can clearly differentiate between the different posts. But of course, I don't want to see the posts about art. So there's a bunch of posts here about art. I don't want to see that. So again, we can use the category taxonomy. So let's go ahead and do that. Now at the moment, this is still selected. So we have to deselect inherit query from template, right? And then we have these features. And then I'm going to say filter taxonomy and I'm going to say I only want the lifestyle category added. So it will exclude all other categories. Great. So now only our lifestyle posts will be displayed. But now I'm going to go a step further and say I only want to see lifestyle posts written by Roger Lister. So you'll see there's my name and then Roger Lister, the person I made up for this example. So now I'm going to click on filters again and I'm going to go to authors and select author. And then below authors, I'm going to type in the name of the persons whose posts I want to see. And in this case, Roger Lister. So let's select Roger Lister. And now we will only see posts written by Roger Lister and it will only see posts with the lifestyle category. All right, so something else I wanted to highlight as well is just some of the features in the setting sidebar. And so when we deselected this, you'll notice at the moment, the post type that we are displaying is a post, but you can display pages using the query loop block. And unfortunately, we're not going to get into custom post types today because it's out of the scope for this online workshop. But yeah, that's a topic for another day. You'll notice you can order your posts from oldest to newest and alphabetically. And then there's an option include, exclude or only show sticky posts. Now below that, it kind of explains it to us. So blog posts can be stickied, a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published. So let's look at that from the back end. So if I go back to my dashboard and I go to posts and let's open the healthy or health 101, you will notice here in your setting sidebar below the URL, it says stick to the top of the blog. So if I select that, this post will become sticky and it will be placed at the top of the page. So of course, so when we see that in the query loop block, we can include these or exclude them or only show sticky posts. So yeah, I just thought I'll show that for clarification. And now something new that lands with WordPress 6.4 is enhanced pagination. So at the moment, when you go to the next page of a query loop block, the whole page reloads, but if you select enhanced pagination, there won't be a full reload of the page. And then we've already discussed the filters and just at the bottom, you'll see there's advanced HTML elements as well as additional CSS classes. Okay, but yeah, these are the most important ones that I wanted to highlight today. And before we move on to our last topic, I just wanted to show you how to use the offset function or feature with the query loop block. So I am going to, okay, it's C, yeah. I'm going to say replace because I want to choose a new pattern, okay. And then you'll see this one called irregular grid of posts. And the interesting thing about this is you'll see three columns and there's actually three different query loop blocks. So let's look at that to see how it works or how it would work. So I'm going to select this. Just want to delete these for now. Okay, so let's look at this example. You'll see it looks like a little staircase. So we've got three columns and we've got three query loop blocks. Okay, now at the moment, you'll see each query loop block only displays one item. So let's say we want to see four and in this one, we also want to see four. And we actually wanted to leave the last column because I only want two columns. So let's delete this one. Okay, so now the interesting thing is you will see that some of these posts are duplicated, right? Because there's two different query loop blocks. So how do we fix that? Okay, just to remove some of the, yeah, I just wanted to remove the post excerpt block. So you can actually see the images line up better. So let's remove the post excerpt block. But of course, if I remove it on the left, I have to remove it on the right as well. Okay, so that was the post excerpt block. And I'll show you now how these two query loop blocks can work together. Okay, so let's delete. Right, so now we see that little staircase. But how do we get rid of things being duplicated? Okay, so this is where the offset comes to play. So let's first open our left column and then select the left query loop. Now, of course, at the moment, if I open up settings, we will notice that we actually deselected inherit from query loop already. So if I actually select this, you'll notice you can't make any changes. Yeah, and of course you don't have these features. So just look at how the block toolbar also changes. So if I deselect, you actually have the display settings. And if you select the query from template, you don't have access to it. So, okay, so the first thing is let's say we want to see, yeah, let's say four items per page. So one, two, three, four. We will leave the offset at zero. Now we select the query loop block on the right. Now we also open up the display settings. Let's also say we wanna see four items on the right side. But to use the offset, the way this works is you wanna skip, we wanna skip posts that we already see on the left. So you will see at the moment it says offset one, that is why this one is skipped. So it starts with the strawberries again. So if I make that zero, you'll see it looks exactly the same. But I'm gonna say skip one, skip two, skip three, skip four. So now, if I use the offset on the right, I say I only want this query loop block to start at five. So we already looked at one, two, three, four. And now on the right, we can start with five, six, seven, eight. And now it gives you that nice off, yeah, what do you call it? It looks like a mosaic, it looks like a, what is this called again? Let me just open it up. I just wanna remind myself of what it's called. Oh yeah, so here's the example. It's called irregular grid of posts. But yeah, I just thought it's important to see how you can use the offset feature when you have two or more query loop blocks that need to work together. So if I added a third column, of course I would have said, I would have started the third column with the offset at eight. And then it would have skipped the first eight and it would have started at nine for the third column. All right, so that is an overview of the query loop block, how you can modify the query loop block, how you can use patterns, how you can use the setting sidebar filters, et cetera. Now that brings me to the last portion of today's session and that is the category template. Okay, so let's start by looking at this from the front end and then you'll see what I mean. Okay, so I'm gonna just go to the front end of this website. So this is the front end of my website and you'll notice my blog page is kind of my homepage and here you will see all my posts being displayed and you will see that there's a category linked at the bottom. And let's say I click on the art category, where will it take us? It will take us to the category archives page meaning we will see all the posts with the art category. So let's do that, art. And here at the top you'll see category art and what you see now is the default way my category archives are being displayed. So now you can scroll down and you will only see art posts. But I think you'll agree, this doesn't look that great and the category template will allow you to change this. So let's go to the site edit to see how we can add a category template and then modify the way this looks. Okay, so let's go to our dashboard, go to appearance and then go to editor and then we're gonna make our way to templates. Now as a reminder, a template is used to create a page layout or structure for your page and we don't add content to templates, we only modify the layout of the page. For example, you can add headers and footers and even sidebars on a template. Now if you click on the plus icon or the plus here next to templates, you can add new templates and one of the templates you can add is called category archives. So let's click on that. Now there are two options. You can select all categories and then you can set up a template for all your categories. So all your categories will use that template or you can create a template for each specific category and that's what we're gonna do today. So if I select category for a specific item, I can click on there and you'll notice I've got three or technically four categories and now I'm gonna say I want to create a template for my art archive. So let's select art and here you will notice you can choose a pattern for your template or you can skip. If you click skip, you'll start with a blank page with nothing on and then you have to add the post content block, et cetera, et cetera. So to make it easier, we're just gonna choose a pattern because as you know, we can modify patterns. So let's select the pattern and now I can change the way my art category or category archives page for art is displayed. So let's go ahead and make some changes. So I'm gonna remove the header and I'm gonna say add before and I'm actually gonna add a new header and this time I'm gonna use a cover block. So let's add a cover block and I'll choose an image from my media library. So here you'll notice I've already added one and then in the sidebar settings, I'll make sure I select my cover block and we can go to styles and in this case, I wanna remove any opacity because I don't want to write anything on my cover block. I just want to use the image and let's just close our setting sidebar and our list view and let's say, okay, we want this to be a bit larger. Okay, cool. So now we've created a special header for this category and then the next thing, of course we can choose a different pattern for my query loop. Okay, so let's click on replace because I don't want my post to be displayed this way and let's say replace and for this example, I'm going to choose grid, where's that now? Grid of image posts because I think that kind of works well with the art, the arts category. So let's select art and of course you will notice only posts with the art category is displayed here. Wonderful. Click save. Now let's see how this looks on the front end. So let's just make our way to the front end of this website again. Remember, here's my homepage with my blog posts. Let's click on one of the categories. So let's first click on the lifestyle category to show you what it looked like before because I haven't changed the category template for lifestyle, right? So here we go. The category, lifestyle and then all the posts with that category. Okay, let's go back and now let's click on the arts category and see what happens. Ah, now we have a unique layout for our categories archive related to art. And now of course we can go and create something similar for the lifestyle category and for the sports category. So then we just go back to appearance, editor. We can click on templates. We will click on the plus and say we wanna add a category archive template. We'll choose for a specific category. Now you will notice that art is not available anymore because we already created one and now we can follow the same process select lifestyle, choose a pattern and then we can add a new header. We can choose a different pattern and et cetera for this archives page. So that's everything that I wanted to show you today. Basically how the query loop block works and also how it kind of links to the category template. So I am going to stop the recording now but then I'll hear if there's any other questions or comments. So for those of you watching this recording, thank you for joining us today and we'll see each other next time.