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.4 Add to the Index Template

In this lesson you’ll continue adding to your theme’s index template, creating an “About” panel as well as a blog-style display of the latest records from three different “contenttypes”. As part of this, you’ll learn how to pull content from a specific page into a template, and how to fetch a collection of record titles from multiple “contenttypes”.

2.4 Add to the Index Template

Hey this is Cas, welcome back to Bolt CMS theme development. In the last lesson, we went through creating the top panel section of your index template. And in this lesson, we're gonna add on two extra panels below that. We're gonna have an About panel and then under that, we're gonna have a Listings panel that's gonna show the latest records in three different content types. So to create the About panel, first we're gonna add in an aside element with the class aboutPanel. Then we're gonna add in a div inside that with the classes aboutPanel-inter and u-standardWidth. Now just like we did when we're setting up the home page content in this top panel here, we're gonna set a variable. Here, we used set home = record. We're gonna do something a little bit similar, but also a little different. We're still gonna be creating a variable where we created home in the last section. We're gonna be creating About here, but when we set it up, we're gonna pull in the content from the page with the slug about. And then we'll be able to output the content from that About page in our about panel. So to do that, we'll say setcontent about = and then we'll set the string page/about. So now everything that's in the record with the slug page/about is gonna be saved into this about variable. Now we want to output the title of the about page and the body of the about page. So first, we'll check to make sure that the title is defined. And we're gonna speed that up by copying this text from up here and adding it in down here. So now because we're using the about variable, instead of the home variable, we can just select all of these instances of the home variable and replace them with the about variable. And then below the heading tag, we're also gonna output the body. So add curly brackets, and then about.body. And then we also just need a fallback in case an about page hasn't been set up on the site, so that a user knows what they should do to get something showing up here. So we'll add an else line in and we have a little warning message that lets people know what they can do if they're not seeing the content they expect here. All right, so let's save that and we'll check out what we've got. All right, so there is our About page. So you just need to be aware when you're going through this process yourself, you'll have to jump into the admin panel for your Bolt CMS site and change one of the pages that's already there so that its slug is set to about. Okay, so now, let's add in the next panel. This is going to be a listings panel. It'll have three boxes, each with listings of the five latest records and the three content types that we currently have in our CMS. So we're gonna need another aside with the class listings panel. And then inside that, we need a div with the classes listingsPanel-inner and u-standardWidth and then u-clearFix. Now what we're gonna do is get an array of all of the content types that we have and we're gonna pull that in from the config file. And then we're gonna create a full loop that's gonna go through each of those content types allowing us to display the listings of each content type's latest record. So we'll say for ct as ct will be the variable that will be using to output our content, ct being short for content types. And they we'll say in app.comfig.get (content types) So then that's grabbing that a right out of our config file. And then we're also gonna add if not ct.viewless see, and then a pipe symbol, and then default brackets false. Now the reason that we're checking here to make sure that none of these content types are viewless is that in Bolt CMS, if a content type is designated viewless, it's not supposed to be looked at directly via a template. So we're just making sure here so that we're not through our template creating a view into a content type that's not supposed to be directly viewed. And then the pipe symbol and default false here just sets the value of what we're checking on to false. So if for whatever reason, we can't find out whether or not the content type we're looking at is viewless, this we'll just set it to false, which will say no, this content type is not viewless, go ahead. And then we'll close up our for loop with endfor. Now let's move things along a little faster. I'm gonna paste in the code that's gonna run inside this for loop. And this code is gonna be output for each of the three content types that we currently have. Right now line 94 here we're using the same process that we just did in the about section to set the content that's gonna be stored inside this record's variable. And we're getting that content from combining the slug of the current content type that's being looped with this string here, latest/5. So what that will do is go and fetch the most recent five records in the content type they're currently looping through. Then we've created a section. And this section is gonna hold each of our listings of our five latest records. Next up, we have the heading. That's gonna top that box. And this code here, this is gonna fetch the default title for any recent records listing. So if the content type that you are looking at is pages, this heading is gonna say recent pages. Then after that, we've created an unordered list and then we're starting off another for loop. So we already have our records variable up here that we defined and now we're gonna start looping through the contents of that variable. That variable is gonna hold five individual records or up to five individual records, and for each record that's in records, we're gonna output a list item. And that list item is going to show the record's title. And it's gonna wrap it in a link, where the URL is the record's link. And then, if there are no records in that content type at all, we have our fall back here That will display the default message whenever there are no recent entries. And then below that we've created a button. And this part of the button code is going to display the default text to link you through to the overview for the content type. And then the URL that's being linked through to is created by a combination of the home address. You remember this path's route from when we linked our site title and tagline. And then the slug of the current content type. And I've actually just realize that these asides that we've just added in aren't nesting correctly. These two closing divs here are the closing divs of the top panel. We don't want our asides to be nested inside the top panel. So let's just cut those divs out and we will then correct the indentation of these two and put these closing divs up here where they're suppose to be. All right now. Let's check out what we've got. All right so here are our three listings. We've got our recent pages, the latest five entries there. Each one of them is linked off to the individual record and then we have a link through to the pages overview. And then the same thing again for the recent entries and for the recent showcases. So that's now three out of our five panels done that we're gonna be building into our index template. In the next lesson, we're gonna move on to adding in the content space. And this area is gonna have a blog style display of the latest three records in the entries content type. And then after that we're gonna cap off our index template design with a footer at the bottom. I'll see you in the next lesson.

Back to the top