FREELessons: 15Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Add Category Display to Blog Entries

Hey, welcome back to build a blog with Craft CMS. So far we've almost finished our entry teaser. We'd displaying this entry teaser on our index page, and later on, we're also gonna display it on our category pages. But we still need a way to show which categories a particular post is filed under. So in this lesson, we're gonna be creating an entry category display, and we're gonna be adding it to the bottom of our posts underneath our Read More link. To do this, we're gonna need another partial template file. So we're gonna go into our templates folder and our partials folder and create a new template. We're gonna call this one _entry_categories. Then go ahead and open that up for editing. So let's turn on our syntax highlighting. Now the first thing that we wanna do is grab all of the categories that are set for this particular entry and put them into a variable. So we're gonna set a new variable named categories. And if we have a look back at our fields, we can see that the handle that we're using for our blog category field is this. So we copy it, and then we're gonna put entry dot and our handle. So now all of the categories for this entry are gonna be stored in this variable. From here, we can do a check to make sure that there are allocated categories, and we're gonna do that with an if statement. And we'll do it just like we did before by checking, if categories has length. And then we'll end our if statement. So now we're ready to start outputting our actual category HTML. So we start with just a little bit of mark up, we're gonna create a div with the class .entry_categories. And then at the top of this, we're gonna put a label for our category area. So create a new div with a class .cat_label. And inside that, we'll say Posted in Categories:. Now we wanna wrap all of our categories that we're gonna be outputting in a new div. We're gonna give this one the class cats. And now we're ready to start looping through the array of categories that's stored in our categories variable. Rather than using a for loop though, we're gonna use a really cool tag that comes with Craft CMS, and that is the nav tag. And this is really, really useful if you need to create multi-leveled navigation, so if you have parent items and child items. Now I'll show you how this works. First to start looping through, we're just gonna say, nav category in categories. So it looks almost like a for loop to start with, and they we'll just add endnav. Now we're gonna add in the code that you wanna output for each individual category that's applied to this entry. So inside our nav tag, we're gonna create a new div with the class .cat_item, and then inside that, we're gonna need a link. We want this to link through to the category URL. So we'll add category.url. And for the text, we wanna display the category title. So we'll add category.title. So now let's load this partial into our entry teaser, so we can have a look at what we've got so far. So I'm just gonna copy this include line here to speed things up a little bit. And then underneath our read_more link, we'll paste that in, and then we'll just change this, so that it's letting in our entry_categories template. All right, so let's take a look. All right, so that is a great start. We've got all of the categories for each one of our posts. And the only problem is there's no way to distinguish which of these categories is a parent level category, and which one is a subcategory. So we're gonna add in some code now, leveraging the nav template tag to change that. And basically all we need to do to distinguish between the parent and the subcategories is to add some different classes depending on what level the category is. We're gonna do that in two ways, the first thing we're gonna do is use the if children check that's part of this nav tag. So underneath this parent category item, we're gonna check if there are any children. So we're gonna add ifchildren, And then we'll add endifchildren. Now in here, we're gonna output those children, if there are any, by adding the tag children. Now what this tag here is going to do is output whatever has been defined as the template for your navigation items in between the opening and closing nav tags. So for us, this is our category item template. So for every child category, this is gonna be output here, but this check gives us the opportunity to wrap those children in another div. So here we're gonna include a new div with the class sub_cats. So now we've added a wrapper around our children that's gonna allow them to be styled differently. We also wanna add a class to the parent item if it has children, so that is this item here. Now the way we do that is by putting an if check right inside this class attribute here. So we're gonna add in if category.hasDescendants, and then we'll add endif. And then in between these tags, we're gonna output the the class that we wanna include on this parent item if it has descendants, and that is has_subcats. So now we've got two classes being added in. We've got has_subcats, and we've got this sub_cats wrapper. So now let's have a look at the change. All right, so now we've got our parent item with the arrow on it, and we've got all of the child items with different styling applied to them. All right, so now that we've got a categories, we've got our Read More link, our teaser, our headers set up, we've got our post days, and we've also got our featured image, our entry teasers are complete. Now there's still just one more thing that we need to add to our index template that's controlling this entire page. Right now we're pulling in five entries, but after that, you don't have the opportunity to see any more. We don't have any pagination links at the bottom, allowing you to page through to see the next five entries and the next five after that. So in the next lesson, we're gonna go through, and we're gonna set up pagination support in our blog. Gonna create a new partial to hold our pagination links, and then we're gonna include that back into the index template. So I'll see you in the next lesson.

Back to the top