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.3 Start Building the Index Template

With your index template’s essential code in place, now it’s time to start building out its display. In this lesson you’ll create the first of five sections that will appear in the template. In the process you’ll learn how to work with Bolt’s menu system and how to configure “homepage” content, and you’ll get into more detail on working with Twig.

Related Links

2.3 Start Building the Index Template

Hey this is Kezz, welcome back to Bolt CMS theme development. In the last lesson we got the basics of your theme set up. And in this lesson, we're going to start filling out the content of your index template. Now what we're going to be building is a modified version of this Unicorn PSD template. And this is a free template, so you can grab that. If you wanna have a look at the original design and I'll give you a link to that in the notes below this video. And we're going to be putting it together, so that it looks like this. And this is actually made up of five different panels all stacked on top of each other. And in this video we're going to be creating this top panel section here. So you remember that I've mentioned that we're not going to be digging into any of the CSS or JavaScript that's in this theme for the purposes of this course. We're just going to keep focused on setting up the mock up and the required tweak templating language stuff for your theme as well as working with the config files. So as we go through, I'm just going to let you know, which CSS class names to apply to your mark up. So, to get started. We're just going to lay out a couple of rapid divs to surround our top panel. And this is where the emmet plugin that we installed earlier comes in handy. So inside our body section, just type out .TopPanel, and then press tab. And then inside that div, we also want .TopPanel-inner and .u-StandardWidth. So that code is actually going to set up a bit of a background area in our top panel which will take a look at in the browser in just a second. But it is also using a background image so we're just going to add that into our theme. So inside our theme folder, create a new folder named images. And then paste in the background image that comes with the source file in the completed version of the theme that you will have received. Right now let's have a look at what we've got so far. All right, so there is a background image for our top panel and now we're gonna lay in a top strip along here. That's going to hold our nav menu up on the right side. And it's gonna hold our site title and our tagline up on the left. All right, so first let's add in the site title and tagline that are going to appear up in the top left corner. So you're gonna drop in a header element. And we're gonna give that header element the class TopPanel-header. And then you can just hit Tab after typing that in and that will expand into the full header element. And inside here, we want some h1 tags to hold our site name. And now to display our site name in between our h1 tags, we're going to use the same code that we did up here in our head section. So you can just copy and paste that straight down here. Next, we want to show our site tagline. But we only want to try to get that side tagline if we can confirm that it's actually being sent in the config file. So we're going to copy some code from our head section once again. Just grab a copy of the if check that we ran up here. And place it down here under the heading one tags. Now, we don't need to check for this record title, so we can just delete that. All we're doing is checking if there is a tag line set in our config file. And then we wanna close off that if check. And now inside the if check, we're gonna add some paragraph tags. And then within those paragraph tags we wanna show our tagline. So we'll go with copying and pasting from the head section again, saves typing. And we'll just get rid of this space. And now that should be our site title and a tagline. All good to go. So let's save that and have a look at what we have so far. All right, so there we go. There's our site title, and there's our tagline. Next up we wanna put a navigation menu over here on the right. To do that let's make some space underneath our header here and we're gonna create a nav element with two classes. We're gonna give it the class Nav and also the class TopPanel -Nav. Then inside that nav element. We want to create an unordered list and then within that, we're going to use an inbuilt bolt CMS function to load up a menu, so we're wanting to output content. That means that we need to use that double curly braces. And then inside those curly braces just type Menu with opening and closing brackets after it. Now we just need to let the system know which of the menus we want to use. And we want to use the main menu. So in between the brackets, pass the string main. Now let's go back to our site and take a quick look at what we've got so far. All right, so we've got the basics in place here. These are our top level menu items. But we want to make a bit more than that happen. We want to be able to see the second level items as well. And we wanna to give a bit more styling to this menu. And as well as that we also wanna make it responsive. Now the CSS and the JavaScript is already present inside your theme to allow that to happen. But we're gonna need to do a couple of things. The first thing that we're gonna need to do is create a template that's going to control All of our menu items. Right now these are just being output with the default mark up for menu items but we want to customize that mark up so that we can control exactly what comes out. So let's head back into our code. And what we're actually going to do is pass a second parameter in our menu function. And the second parameter is going to tell bolt the name of a template that we're going to use. To specify exactly what HTML should be output with that menu. So, add a comma after this first argument. And then in the second argument pass the string, _sub_menu.twig. Now obviously we haven't made this partial template file yet. So let's go ahead and do that now. So in the top level of our folder, create a new file. And call it _sub_menu, and now we're going to open that up for editing. Now, there's quite a bit of code to go into this partial template file so we're not going to type through every single line. Instead, grab your source files and copy the contents of the completed sub menu partial template and paste them in. Now, what this template actually is, is a stripped down version of the default submenu template that you'll find inside your bolt TMS installation. So let me show you where that is. Now, if you head up to the top level of your CMS and head into the app then you'll find this folder theme defaults and in here is the default partial sub menu. So if there's ever something that's showing up by default in your theme, here is where you can have a look at what that default card is exactly and where it's coming from. So this template has a lot of extra markup and things that we don't need. So this one is basically just a stripped down version of it. Now I'll quickly summarize everything that you're seeing in here. You'll note that first we have the spaceless tags. And endspaceless down at the bottom. And what that does is just gets rid of any empty white space that might inadvertently show up in your menu items. Then here, we're creating a little block of reusable code. And this code is going to control each individual menu item. So that's why you see here, we're using a list item. So this section here, is default link in a top level menu item. And then here you can see that we're checking to see if the item sub-menu is defined. If it is then we're adding a span tag at the end of it with a little plus symbol. And that plus symbol is going to give us something to click on so we can open up that sub menu and have a look at it. And then if there is a sub menu. Then we're using this code here to display it. And then down here you'll see the code saying import display menu item and this display menu item matches the name of this block of code that's created up here. So then for every item that's in a menu this code pulls in that reusable chunk of code that's gonna output every list item. So save that, and then we'll make a couple of extra additions to our index template in order for the JavaScript that comes with your source files to identify this menu and make it work responsively, we need to give this un-ordered list an id and the id should be be opennav. And then we also want to add in an icon, that you can use to either show or hide the menu when the sites being viewed at a narrow width and add that icon. You can just make a line above this nav element and paste in this code. And then just a couple more things before we go back and have another look at how our templates coming along. We want to wrap both of these items with another div to make sure that they're gonna behave properly because we have this section here floating to the left and this section here floating to the right. So we wanna make sure that we're clearing properly after each of those floats. And also that we can control the spacing around these items properly. So we're gonna add another div with the classes TopPanel-topstrip and you clearfix. And then finally we want to make sure that if anybody clicks on the site title or tag line, it will take them back home from wherever they are in the site. So we're going to wrap our site title and tag line with a link and the way to output the home URL of the site is by using a double curry braces and then you wanna use paths.root. All right let's save and see what we've got. Okay looking good, so we've got some good spacing around our top strip here and our menu is working as we need it too. So we have a plus sign coming up telling us that there's a sub menu here. We click that and we can see our sub menu. We click it again and we can close it down and then if we shrink down our window. Then we get our smaller sized menu. And we can close that off again. And then if we hover over our title and tagline here. You can see that the attached URL is our home URL. Right so that's our top strip section of our top panel finished. Now, we're going to have some home page content come up here. All right, so straight underneath our top strip div here. We're going to add a few extra divs. So I want the first one to have the class TopPanel-leadwrap. Then inside that we want another one with the classes TopPanel lead and u-vertical. And then inside that. We want to create an article element with the class top panel lead content. Now you remember that earlier we went through what a record is in bolt CMS. It's an individual piece of content that's been added in the back end. And you'll also recall that the index template that we're working on is for the home page. So now what we want to do is get the content for the home page. We want to get the record out of the back end that has been associated with our home page. Now the way that you set a home page in Bolt CMS is through the config file. So let's grab that config file. And take a look at the home page settings. So we're just trying to find and look for home page. All right so here you can see that we've got, page/1 as the value for this setting. So that means that bolt is going to look in the, page content type and look for a page with the slug one. And you can change this setting to the slug of any record that you have set up in your bolt site. But for our purposes we'll just leave it at the default. All right. So now in our index template. First let's check and make sure a record is defined. So what that's gonna do is check in that config file and make sure that a slug has been set and that it's a valid slug. If so, it's going to grab the contents of the associated record and it's going to make that available to you. So that you can output it via template. So we'll say if record is defined, and then we're going to say else. And we're going to include a warning. So that if there is no record defined, the person who is using this theme knows that they need to go into their config file and set a home page there. And then we'll close that off by saying end if. Now we're going to save everything that's contained in this record into a new variable named home, this is going to make it a little bit more intuitive to work with. So we're going to say set home equals record. And now we can dig into this variable name home and get all the bits and pieces that are inside the page that's acting as our home page. So let's start by outputting the title. So we'll create some h1 tags. And then we wanna output content, so we use the double curly brackets. And to get the home title, we're just gonna put home.title, but we want to be careful and we want to make sure there's actually a title for us to display here. So we're going to wrap this with an if check. So first we're seeing if a home title is defined. And then we're making sure that what we're getting back isn't just an empty string, just with nothing there. And then we'll close that off with an endif. Under this, we're going to add a decorative div. So just create a div for the class top panel underline. And then below that, we want to display the teaser field from this page. To make that appear, we use our curly brackets. And we write, home.teaser. And just like with our title, we want to make sure that we're actually getting a teaser to display. So we'll wrap that with an if check. That's doing the same thing again, making sure that the teaser is defined and also that it's not empty. And then finally, we're going to add a button at the bottom of the whole section that links through to the full home page. So this is just like the last two pieces that we added in. We're outputting home.link, and then the rest of that line is just the required markup to turn that into a button. And we're, again, using an if check to make sure that home.link is defined, and that it's not empty. So we'll just align that properly, and we should be all good to go. Let's see how our top panel is looking now, all right. That's looking really cool. So that's now our top panel. All finished. We've got our home page title here. We've got a home page teaser here and then we've going to link through to the rest of that home page content. So now we're all ready to move on in the next video to creating the next panels after this. I'll see you there.

Back to the top