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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Flesh Out the Base Template

In this lesson we’ll be building up the “base” template, adding in extra markup and including a header section with a site title and page menu as well as a basic footer.

Related Links

3.4 Flesh Out the Base Template

Hey, welcome back to Up and Running with Grav CMS. In this lesson we're gonna finish flushing out our base template. So there's still a little bit more markup that we need to add, and we're also going to include a header section that's gonna have our site title and a navigation menu, and we're gonna add in a very basic footer at the bottom as well. Okay, so let's begin at the top, we're gonna add in our header. I'm gonna be using the Emmet plugin for Atom, which allows you to just include some shorthand and then hit tab, and expand your code. So if you wanna do exactly what you're seeing on the screen here, grab yourself a copy of Emmet, which I know is available for Atom and also for Sublime Text. It's probably available for other editors too, but those are the two that I know of. All right, so first we're gonna need a header element, and we're gonna give it the classes doc_header and clearfix. Now these classes are just for styling, they're just tapping into the style sheet that you've already loaded in. Inside that we'll need another div with the class standard_width, so that has set up the wrapper for our header. Now we're gonna add our page title and our nav menu. So we'll add in a div with the class page_title, inside that we're gonna need a link and we want this page title in the header, so it will always take you back to the home page. Now what we're gonna do is attempt to use a variable name base underscore URL to send people back home. But if that variable is not defined, then we just want to have the href attribute be a forward slash. So the way we're gonna do that is with a ternary operator. So first we're gonna check if base_url is equal to an empty string, if it is equal to an empty string then we're gonna have this href attribute be a forward slash. If base_url does not equal an empty string then we're gonna have that base_url output as our href attribute. So that little bit of code there is just gonna make sure that this is always gonna link to the homepage no matter what. Now for the display text of this link, we wanna output the title of the site that comes from our config settings. So we're gonna do our double curly brackets and then we're gonna enter config.site.title. So that's gonna go into that config area that we looked at earlier, into the site subsection of the config area, and it's gonna find the title value from that site config file. So that takes care of displaying our site title and having it linked to our home page. Next up we're going to include a navigation menu. The first thing we're gonna add in is just this little snippet of code, you don't have to worry too much about what this code does, you can just copy and paste it from your source files. This is just gonna add a little switch for a responsive menu to allow you to open and close the menu when you're at a smaller width. This is just a little bit of CSS trickery so that you don't need to worry about including JavaScript for a responsive menu. And now for the menu itself first we'll set up a container, so we're gonna add a div for the class page_menu then inside that we gonna need an unordered list. And now to output a menu what we're gonna need to do is get a list of all the top level pages, and then iterate through that list to output each one of those page titles and the links to those pages. So we're gonna do that by using a twig for loop, so we'll put curly brackets and percentage marks and then we're gonna say for page in pages.children.visible. So pages.children.visible is gonna get that collection of all of those top-level pages. And then we're just nominating the variable page to hold all of the information about each one of those pages as we iterate through this collection using this for loop. And then we just need to end the for loop here with endfor. So now for each one of our pages, we need a list item. Inside the list item we need a link, and we want the href attribute for that link to take us through to the page in question. We get the URL for that page by outputting the page object, which is what we fetched with our for loop, and then drilling into that object and getting the URL, so that's page.url to do that. So we're outputting the link for our menu and now we just need the text as well, and we're gonna get that by outputting page.menu. In this case, we're fetching the menu rather than the title of the page or the name of the page. So this allows you to specify a different value to show up on your menus if you choose to use it. Now if you don't specify a specific page menu value then this will just fall back and use the page title instead. Okay, so let's go back to our front end and check out what we've got. So there's our header section, we've got our site title with the correct link on it and over on the right we've got our nav menu. Okay, so with our header done then we want to take care of the main content area. We don't need to change any of the twig code here, all we need to do is add in a little markup. So we need a main element with the class main_wrap, inside that we need a div with the class standard_width. And then we're just gonna shift our content block inside that wrapper, now that's just gonna take care of a little styling and layout. And then finally, we just wanna add a footer at the bottom of our site. So we're gonna need a div for the class footer_wrap, inside that we'll add a footer element with the class standard_width. And then we're just gonna include a bit of basic text, so just a paragraph that says built with Grav CMS. All right, and let's check out what we've got. Okay, on the front end you can see that our main section now is no longer flush with the very edges of the view port, I've added in some layout control there. And then down at the bottom there's a footer with a little sentence saying built with Grav CMS. So that wraps up the essentials of our default and base templates. That default template is gonna take care of any of our standard type pages. Later we're gonna make a couple of very minor tweaks to the base template, but the actual markup of that template itself is finished. So now we're ready to move on to working with the other two types of pages, listing pages and modular pages. The first of those that we're gonna work with is listing pages, and what we're gonna do is set up a very basic blog as part of our site. So we're not gonna have some of the bells and whistles that you'll find on most blogs, this is just gonna be getting you up and running with the essentials so you have a foundation you can build extra features on top of down the track. The first thing that we're gonna do is set up the content structure that's going to power our blog, and then we're gonna setup the listing template. So this is gonna be the template for the parent page, under which will be housed all of the child pages that will constitute each individual blog post. So we're gonna bring all that together in the next lesson, I'll see you there.

Back to the top