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.5 Finish Building the Index Template

In this lesson you’ll add the last two sections to your theme’s index template. You’ll learn how to make a blog-style content layout with entry teasers and thumbnails, and you’ll round it off with a site footer that uses a menu in a different way.

2.5 Finish Building the Index Template

Hi and welcome back to Bolt CMS theme development. So far we've created these first three panels in our index template for our theme. And now we're gonna add a blog style content display. And then we're gonna finish off our home page layout with a footer. All right, we're gonna start with the blog style content area. So we're gonna add in a main element and it's gonna have the classes content box and u-standardwidth. What we're actually going to be doing is pulling in the latest three records out of the entries content type. So we're going to use the same technique that we did earlier up here, where we used setcontent, to create a variable. So down here, this time what we want to do is use setcontent entries, because we're displaying entries, and then have that equal the string entries/latest/3. And then we're also gonna add allowpaging. That way, if there are more than three entries, a person can page through and see all the rest of the entries on subsequent pages. Now we wanna loop through all the articles that are contained in this entry variable and we want to output each one of those articles in our template. So we're going to set up another for loop and this one is going to be for article in entries and then we end the loop with end for. And we'll be putting all of the code for each one of our articles inside this for loop. But before we add that in, we also want to add in a pagination area. So down below the for loop, we're going to add our double curly brackets. And this time we're going to add pager with brackets after it. And pager is Bolt's in-built function to create pagination at the bottom of any listing of content that has more than one page in it. All right, so a back up inside of for loop, we need an article element with the clauses ContentBox-article, and u-clearfix. Inside this article element, we're gonna set up two divs. One is gonna hold the image for the entry, and the other is gonna hold the teaser for the entry. So the first div will have the class ContentBox-thumb and then the second div will have the class ContentBox-teaser. All right, so let's set up the entries thumbnail first. So what we're going to be doing is pulling in the image from the articles, so the first thing we need to do is check that there is at least one. And we're going to do that by saying if article image does not equal an empty string and then we'll close that off with an and if. And then if there is an image we're gonna output it here. Now for the source for this image we're going to use Bolt's thumbnail function. And then rather then Bolt pulling in a large image or an image at an unspecified size, we're going to use the thumbnail function to set exactly what size we want the image to come in at. So double curly braces, and then at the function from now. And then we're going to pass three arguments through this function. First the image, then the width, and then the height so pass article.image then 637 and then 430. And then for the alt attribute, we're just gonna use the title for this article. So we'll add {{ article.title}}. All right, so next up is the teaser. Now rather than me just actually be stepping you through every single line of code here. What I'm gonna do first is show you how you can see what information is accessible to you to put into your template. So we know that we're working with this variable, article. And that's holding everything that we can output for this article. So what we're gonna do down here, is we're gonna print out everything that's contained inside that variable. Then we'll be able to have a look at it in the front end and see which pieces of information we want to put into a template. So another set of double curly braces and then we're going to use the function print and what we want to print is the article variable. All right so let's see how a thumbnail is looking and at the same time let's see what we get printed out here when we look at the contents of our article variable. All right, so cool there we got our thumbnail. And we've got that set to come up on alternating sides. And then down here, here is the pagination that's being output by that pager function. Now let's have a look at what's being printed out here. So this is an array of everything that's contained inside that article variable. Now let's expand values right here and see what's inside. Okay, so here is title. This is what we output as the alt tag for our image, we've got the slug. For this article, we've got the last date that it was changed, the date it was published. Here is the teaser and this is what we're going to output. In this section he will be replacing this printout with this teaser. And then down here, here is the image that we output on the side here. So you can have a look through all of this information. And anything that you want to output, all you need to do is get the correct label for it and then you'll be able to use it. So just remember that whenever you're not sure what you have to work with, just use this print function and that will help you orient yourself. All right so let's delete that for now. And now let's add in the title for our article, so add some heading tags and then inside that we wanna use double curry brackets and article.title. And then because we're on the homepage, we want that heading to link through to the full version of the post or that entry rather. So now let's wrap this in a link tag. I'm going to set the H for attribute to article.link. Now let's have the teaser appear below here. So add a paragraph tag and then we'll output article.teaser. And below that we're gonna have a read more link. So we'll add an a element and the href should once again be article.link. And we want the text to say read more but we want it to be translatable. So rather than just writing read more here, what we're gonna do is add some more curly brackets. And then we're gonna put two underscores, and a set of round brackets. And then we'll put our text in here. And by adding the button labeled this way, it allows Bolt's translation systems to pick up on that and include the Read More text in translation of your theme to any other language. All right, let's see how that's looking now. All right, starting to look pretty good. Now there are a couple of extra things that we want to do here. One, we wanna put some more information up here, we wanna put the categories that this entry exists inside of. And we also wanna put the creation date for this content up here too. And then we also want to have a bit more strict control over exactly how much content is coming out. Like, right now, we are pulling in the tease of this article. And that teaser, could be any amount of content that the person who is creating that teaser chooses. And as you can see here we've got some formatting, we've got bolding, we've got links and, what have you. But what we want to do with this, is set that to just be a text only excerpt of a controlled amount of content, to give us a more predictable layout to work around with that design. So let's do both of those things now. So let's start with swapping the teaser out for an excerpt. So just delete that and replace it with excerpt followed by some brackets and then in between the brackets we're going to set the exact number of characters that we want to have with the amount of text that's there. So we're going to put that in as 220. And now for meta info up above our post. And just make a space up here, and we're gonna create a paragraph to the class u-capitalize. And then inside that we also want some small tags. In here the first thing that we're going to output is the categories for this entry. And those categories are organized as a set of key value pairs. So the key is actually a string that contains the slug for the category. And the value is the name of the category. And we need both of those things. So the way that we're going to set up a for loop to iterate through each of our categories is by saying, for link, category in article.taxonomy.categories. And then just close that off with the normal endfor. So this link variable here is going to be set with the key of the pair. And that's gonna to be that slug string. And then category is gonna to grab the value and that will be the name of the category. So now we can set up an a element inside the loop. And we know that the category slug is contained in this variable, link. So we're just gonna use that down here in between curly brackets so that it gets output. And then we know this is gonna contain the name of our category. So again we'll put that down here in between curly brackets so it gets output. And then so we've got to separate it in between each category. And at the end here, we're just going to put a space and a forward slash. All right and then underneath our for loop, let's output the date that this piece of content was created. So more curly brackets and then we'll put content.datecreated. And then we're gonna control how the date is actually presented, the formatting that it comes up with. So we're gonna need a pipe symbol and that's going to filter the output of this content here. And then we're gonna use the function date. And then we're gonna pass the string, capital M, space, lowercase d, comma, upper case Y. So that's going to make our date come out as month, day, comma, year. All right, so let's see how that looks. All right, well done. So we've got our more controlled excerpt in place now. And that fits a lot better, with our layout. We've got our category here. And that category is linked through to the listings page for that category. And then we've got our date of creation here. All right so this whole section is now finished. So now there's only one more thing left to do and that is to add a footer along the bottom here to cap off our design. So, let's scroll down and then after our main element, we're going to add a footer element, with the class site footer. And then inside that we want to div with the class, u-standard with and u-clearfix. Now, we're gonna set up a copyright message on the left side of the footer. And we're going to set up another navigation menu on the right side of the footer. So for our copyright message, let's add a paragraph for the class SiteFooter-left. And then for our nav menu, let's add a nav element with the class SiteFooter-nav and nav. For our copyright message, once again we're going to add a string and we're going to add it with the underscores and brackets so that it's translatable. So I just paste in this text. So we're just adding a simple copyright message with a link off giving credit to the Bolt project. And then for our navigation menu, first let's add an unordered list. And then inside that we're gonna use the same function that we did creating our navigation in the top panel. So add our curly brackets. And then we'll add the function menu. All right so that's it for the footer. Let's see what we've got. All right, so here's our photo. We've got our copyright message on the left and our navigation menu on the right. However, you might notice something that is probably not going to work very well. Because earlier on we set up the sub menu partial to allow us to expand our drop-down menus. We've got the same thing happening down here, but that's a drop-down menu not a drop-up menu. So that's not going to work very well down in this footer area. So what we want to do is turn that into just a regular list of top level items. But still keep this menu working just how it is. Now you remember that earlier I showed you that there are some default theme files that exist inside your Bolt CMS installation. And if your theme doesn't have one of these files then it will fall back to the default. What we did with that top level menu is we created our own sub menu partial file. And then it took precedence over the default version that was inside the CMS. However, down the bottom, that same template file is being picked up for this menu too. So what we're going to do is rename the partial that's being used for this top menu and then we're going to edit our template to use the newly renamed partial file. And what will happen is this top menu will still have a little plus icon. But this menu down here will just be a flat set of top level items. All right, so let's get into our theme structure. So here is the sub menu partial that we're using right now. So let's rename that and we'll add _top. And now we want to set it so that our top menu uses this partial. So we'll go back into our index template and then all the way back up to the top. And now here we want to add in underscore top so that we pull in the template that we just renamed. All right let's see the result. Okay so now the plus sign has gone. And this is just now a normal set of top level menu items. But up here we've still got our dropdown list. Right so now your whole index layout is all set up. We've got all five panels. Everything is done and ready to go. But we've still got more templates that we need to set up to make a fully functional theme. And in some of those templates we're gonna want to reuse parts of what we've set up for our home page. So in the next lesson, before we move on to creating the rest of the templates that our theme is going to need, we're going to split up the index template that we've just finished out into partials. So I'll see you in the next lesson.

Back to the top