FREELessons: 15Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Create a Blog Category Template

Hi, welcome back to Build a Blog with Craft CMS. In this lesson, we're gonna set up a template to control the display of category pages. These will be the pages that list all the entries for any specific category. And the process is gonna be somewhat similar to what we just went through to create the single entry template. So we're gonna go into our Settings again, and get a refresher on which folder our template should be created in and what the name should be. This is a category template so we're gonna go to Settings > Categories. And here we're gonna remind ourself what settings we entered when we created our blog category group. So we're gonna go in here, and then we scroll down. And we have this Category Template setting here. And right now we've said that we're also gonna put this template inside the blog folder just like we did with the last template we created, and that we're gonna name the template Index. Now as I mentioned at the end of the last lesson, we want our category pages to display our entries, basically the same way that our home page does. So rather than creating a fresh new template, we're going to grab the index.html template we're using for our home page. We're gonna copy it, and we're gonna paste it straight into our blog folder. Now, we'll open that one up for editing. Turn on our syntax highlighting. And now this is almost everything that we need. There's only a couple of things that we need to change. One, we need to change the query that we're using here to retrieve the entries that we wanna display. And two, we need to add some type of label at the top of the page to let the user know that they're on a category page and which category they're looking at. So first up, we're gonna make the edit that we need to in order for our query to get the correct entries. Almost everything can stay exactly as it is, but instead of just getting entries from the blog section, we're gonna change that so that it says relatedTo. And then in between the brackets we're just gonna enter category. And Craft will automatically recognize that as referring to the category that's currently being viewed. So that's all we need to do to modify the query so that it will correctly populate our category page. The next thing we're gonna do is just add some text along the top of this page to indicate that this is a list of entries belonging to a particular category. So we're gonna add a deal with a div with a class blog entry that will just format this in the same way as all the other white boxes that we're using in our layout. Then in here, we're gonna use h2 element with the class entry_ list_ title. And then inside that we're gonna say Entries posted under:, And then we're just gonna output the category. And once again, Craft will automatically recognize that and it will output the current category name. So that's it, that's ready to go. Let's head back to our front end and see what we have. All right, so here's our heading at the top, and it's correctly reflecting that this is the Shoes category. You can see in the URL up here, that this is the Shoes category, so that's coming through as expected. And then, our display is just the same as it is on the home page. We've got our teaser with that date and read more link. We have all of our category links. And now, any one that you click on is going to take you through to a properly working category page. All right, so that is now everything that we need to do related directly to the blog posts themselves. We've got our homepage all set up. Everything that we need is in place, whether it's for our teases or for our full view of a single entry. So now we're gonna move on to adding another entry type that's very common in popular blogging platforms, and that is static pages. Almost every blogging platform will allow you to create posts on an ongoing basis, but will also allow you to create pages so that you can have things like an About Us page, for example. So in the next lesson we're gonna set up a page entry type, and we're also gonna create a template to display it. I'll see you there.

Back to the top