Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:13Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 Create a Listing Template

So far you’ve completed the theme’s index template, but that only handles your site’s home page. You’ll now need to create templates for the other areas of your site, beginning with “listings”, which display multiple records from various “contenttypes”.

2.7 Create a Listing Template

Hi and welcome back to Development. So far we've finished making our home page template which you're looking at here and we've also separated it out into reusable partials. In this lesson we're going to create a template for listings on the site. A listing in bold is any display of multiple records. So for example If I was to click this button here and go to the Entries overview, it would show me all of the entries that are in the site. And the template that would be used to show me those entries would be the template listing.twig. The same thing goes, if I was to click on this link here and go and look at the Love category. That display would be controlled by the listing template. So, let's go ahead and make that template now. So in our theme, we're going to create another new twig file. And we're going to call it listing.tweak and then, open that up for editing. Now, we can start by calling in the partials that we created in the last lesson. So I'll just copy and paste, make things a bit quicker and easier. We want our head up, we want our listings panel. And we want our footer. So now, right away, that should give us a display when we click on one of the links that we just pointed at. There we go, so we've got all of those basic partials are in the header, the footer and this listings panel here. Now of course, we need to put in some extra content. Now in our home page, we have this large top panel and that's where we have our site title and tagline. That's where we have our navigation, so we need something similar, but not as high as this. Not such a big area. All we really need is, just this top section here. So to handle that, we're going to create another partial and we're going to call it sub page top panel. So make one more twig file and then call it, _subpage_toppanel. All right, now what we want is almost the same as our existing top panel, so we'll just grab that top panel card. And then, we're just going to tweak it a little bit. So, I copied that and placed it. All right, now we don't need that home page content that's surrounded by this div here, so let's get rid of all of that code. Just check if we've got the right divs. All right, so that's all gone and there are some styles already in the style sheet to handle this small left top panel. So to make those work, all you'll need to do is just put your cursor in front of each of these instances of the words top panel. And just add SB, for subpage. All right. so that's all good to go. Save that and then, underneath the header, you want to include a new partial. So say include _subpage_toppanel. All right, let's take a look. Right, all good. So now, we've got our top panel, so now, for this page to be done, all we need to do is add in the actual content itself. And we're going to put that in straight inside the listing template, so the content is going to go below the sub panel. And above the listings panels, so make a space in there. Now, we're going to need a new main element with the classes ContentBox and u-standardwidth. Now, because we've named this template listing.twig, Bolt is automatically going to grab this template. Whenever it's displaying a listing and as part of that process, it's also going to populate the variable named records. with all of the records that are going to be displayed on this listing. So that means, that we don't have to do anything in particular to fetch the content that we need here. We can just start iterating through that variable named records and our content will be accessible. So we'll set up a for loop. We'll add for article in records and then end that off with an endfor. And now this part of the listing display, we want it to look just like the entries that we showed on the front page do. So, we'll jump into our index file again and what we're looking for is, part of the home page template. That's inside the four article in entries loop, so we want this whole article element. Grab all of that code, right down to the closing article tag, just before the end four. And then, we'll copy that snd we'll put that inside the new loop that we just created. We just fix up the indentation, keep it all neat and then, while we're at it, we also will copy this pager function. And that's going to do the exact same thing that it did on the front page. Give us pagination when there are more When there are more records then it can be fit into one page, so save that and have a look at our results. All right, so it's looking pretty good so far. There are all our entries. And now what we still need though is some type of heading here to tell us what we're looking at. So for example, right now, we're inside the love category but if we just landed on this page from a search engine. We would have no idea what it was, so we're going to add a heading up here and that heading is gonna run a couple of check.s. To find out what kind of content our viewer is looking at and then, it will display its heading depending on what it finds. So, we get back into our code and now we want our heading to come up above our for loop and inside our main element. Now there are two types of listing that we want to test for. We might be looking at a listing of all of the records in a particular content type. Or we might be looking at all of the records in a particular taxonomy. So, that will set up one block of code to see if it's a content type that somebody's looking at. Another to see if it's a taxonomy that somebody's looking at. So to check if it's a content type, we'll just add if content type is defined and then close that with end if. And then, we'll do the same thing again for a taxonomy by saying if taxonomy type is defined. And then, we'll close that off with an end if as well. All right, so let's set up our hitting if its content time. So in here, we want to add some h one tags and we're going to have the say overview four. And then, have the output the content time and we want to make sure that our overview four string is translatable. So add kelly brackets and then, add two underscore and round brackets. And then, inside that, we'll put a string overview for and then on the next line we're going to output our content type. So, we just add curly brackets and inside them put content type. Let's say hat's all we need if it's a content type listing that we're looking at into our taxonomy type. We're going to to need h1 tags again and then, we want to use the same overview for string. Now we need to output the name of the taxonomy, and we're going to do it in a way that's not going to make obvious sense at first. But don't worry, we'll get the code in and then I'll explain what it's doing, so we need to add an if else check. First we're going to add if taxonomy.options[slug] is defined and then, we'll put in else and then endif. If this is defined we're going to output it, so we'll just wrap that in curly brackets. And then, if it's not we just want to output slug in curly brackets. Al lright, now let me explain why we're doing that and if it doesn't make sense. We're going to have to check out the taxonomy Config file for the CMS, so you jump back into our installation a couple of levels. Now inside App Config, you find this taxonomy.yml file, so let's take a look at that file. Right now, here are our categories and then, we can see that we just have an array of titles and this. And there's that love category that we're just looking at before but then, if you have a look up here. In this different taxonomy, Chapters, you can see that we have key value pairs. Now, you won't know ahead of time whether a taxonomy has these key value pairs for the names of each of its taxonomies or whether it has an array. So with the check that we just put in, if taxonomy.options[slug] is defined. That's first going to try to find these key value pairs, and if there is a string like this with a specified title, then it's going to output that. And if it doesn't find that, then instead, it's going to treat it as an array, and just output the simple titles here. Now, one of the other options that can be added into this config file, is a sort order. And you can see an example of that here, has_sortorder, is set to true. So the last thing that we're going to add in here, is checking if there is a sortorder for the taxonomy that we're viewing. And what we're actually looking for is, to see if the taxonomy does not have a sortorder. Because if it doesn't, we're going to look up the default sorting method that set in the general config file. So, under this heading tag, we're going to add if not taxonomy.has_sortorder and we'll close that with an endif. And now, inside that, we're going to set the sort order by saying set records equals records. So that lets us, just make sure we don't mess up what we already have present in that records variable. And now, we're going to filter that records variable by adding order and then brackets. And then, in between the brackets, we're going to say app.config.get. And you remember, that looks up settings out of the main config file. And then in between those brackets, we're going to say general/listing_sort. So now, unless there is a specific sort order set in the taxonomy config file. Whatever taxonomy we're looking at through this listing template is, going to be sorted in the default way. Okay, so that's our listing template finished. Let's see what we've got. All good, so now we've got overview for love. So, that's found that love is the name of this taxonomy. Now, let's go back from the home page and let's look at a content type display. All right, so we have overview for entries. So, that listings template is working just how we want it to. So the next template that we're going to set up is, the record.twig template. And as you can probably guess from the name, that controls how an individual record is displayed. So when we hit this Read More link here, for example, we'll be going into this individual record. And then, the template that we're about to setup will control how it looks. So we'll be doing that next, I'll see you in the next lesson.

Back to the top