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.2 Creating “Base” and “Default” Templates

Standard practice in a Grav theme is to create a “base” template holding essential code, which will be extended by other templates in the theme to allow for code reuse. We’ll set up your base template in this lesson.

3.2 Creating “Base” and “Default” Templates

Hey, welcome back to Up and Running With Grav CMS. In this lesson, we're going to start coding up the templates for your theme, starting with the base template and the default template. The base, as the name suggests, is gonna act as the base for every page on your site. So it's gonna contain your HTML element, your head section, your body section, any code that is gonna be reused in each and every page. Then we're also gonna create the default template which, also as the name suggests, is also gonna be the template you'll use by default. And that typically in practice means the template that you use to apply to standard page types as opposed to listing pages or modular pages. Before we get started, the templating language that's used in Grav CMS templates is Twig. So if you don't already have a Twig syntax highlighter for your preferred code editor, it's a really good idea to go and grab one and install one now. It's gonna make your code a lot more readable as you're putting it together. I'm gonna be using Atom, and the package that I'm using for Twig highlighting in Atom is PHP-twig. So if you don't already have one, just take a moment to go and install a Twig highlighting package into your preferred code editor before you start coding up. Okay, so we're back inside our theme-from-scratch theme folder. And we're gonna start by creating a directory named templates to hold all of our theme's template files. And now we're gonna make a new file, and we're gonna call it default.html.twig. And then we're gonna open that up for editing. It doesn't actually take much to get some content showing up on the front end of your site by using this default template. So we just gonna jump into our pages folder for a second. And we're gonna open up the Markdown file for our homepage content. And this content that you see here is what we're gonna make up here on our front end. To make that happen, all we need to do in our default template is add the Twig expression page.content. So we've a pair of curly brackets, which in Twig is what you use when you want to output content. Then by adding page, we're saying that we wanna tap into the object that holds all of the data associated with the current page. In this case, it's the home page. And then we're drilling into that object, and we're fetching the content. So in the browser, we'll go to our admin panel. We'll click on the link to open up the front end. And there we go, there is all of our homepage content just like that. And this doesn't have any styling, and it doesn't have any of the proper code that's required on a normal website. So to take care of that, we're gonna create our base template. So now inside our templates folder, we gonna create another sub folder, and we're gonna name that partials. If you're not familiar with partials in a templating language, they're partial template files that are not supposed to be used by themselves. So what we're gonna do is have each one of our top level template files call in this base template file. So we'll make a new file, and we're gonna name it base.html.twig. And then we'll open that up for editing. Now the first thing we need is just your standard HTML that you need with any website. If you have Emmet installed in your code editor, you can just hit an exclamation mark and then hit tab, and that will fill in your basic HTML. If you're not using Emmet, then just feel free to copy and paste this code from the source code that you have as part of this course. Now, we're going to make a couple of amendments. The first thing we wanna do is replace this title with a dynamically generated title. We're gonna do that with this code. All right, so let's go through what we're doing with this code here. Now, I mentioned already that, when you use two curly brackets in Twig, you're saying that you wanna output some content. Now the other thing that you can do with Twig is put curly brackets, and then inside those, percentage marks. And when you do that, what you're saying is that you want Twig to process something for you. You want it to do something functional. In this case, what we're doing is an if check. So we're saying if header.title. So we're making sure that header.title has some content in it. Now you remember that we talked about the front matter that is in each of your Markdown files, or otherwise known as headers. If you want to access any information that's in that front matter, or in that header, you do so by targeting header like we have here. So header.title is going to try to fetch the title from that header section, or front matter section, of the page that's currently being viewed. So then if a header title is available, we output it here. And this pipe symbol here means that we're using a filter. We're putting content that is returned from header.title through a filter. And in this case, what we're doing is just making sure that it's gonna be in a format that's suitable for displaying as part of our title. And then after we close that if check with endif, we're following up by adding in the site.title. Now this word site here taps into the site config file that we saw earlier through the config folder and through the config section in the admin panel. And then that's also being filtered to make sure that it's in a format that works for displaying in a title. And now what we need to do is specify a position that the content of the currently loaded page should be displayed when it's calling in this base template. So you just saw with our default template, all we're handling in that template is the content. And we're going to want to slot that content into a position in this base template. And we do that by setting out a block. Blocks in Twig are like placeholders. They can be replaced by content from other template files, or they can contain default content that's displayed unless it's explicitly overwritten. So we're gonna add our pair of curly brackets with percentage marks inside to say that we are trying to do something functional rather than just outputting content. And then we gonna say block, and then we gonna give our block a name. We're gonna name it content. And then down on the next line, we're gonna end that block by just saying endblock. So now that template is good to go. All we need to do is connect our default template and our base template. And we do that inside the default template. So right at the top, we're gonna add our curly brackets and percentage marks, and we're gonna say extends. And this extends word is how we're gonna pull in the base template we just created. So now we just need to specify where that base template is. Now you can see in our little tree structure on the right column here that the base template is inside the partials folder. So we're gonna add some talking marks, and then we're going to put partials/base.html.twig. So now, when the default template is used, it's also gonna load in the base template. But in order to complete the connection between these two templates, we need to indicate which portion of our default template should be inserted into that block placeholder that we just created. And we do that with the exact same two lines of code that we used to setup the block in the base template. But we just our wrap our page.content expression here with that code. So above the page.content expression, we're going to add block content. And then after it, we add endblock. So now what's gonna happen is this page.content expression is gonna fetch the content from the currently active page. And then it's gonna insert it into that block content area that we set up as a placeholder inside the base template. So now if we go back onto our front end, visibly, not a lot is gonna change because we just haven't built much into our template yet. But you're gonna be able to tell if this is working by seeing if the dynamic title that we just created shows up in our browser tab here. So we'll refresh, and sure enough, there's our title. So we've got the page title on the left, and the site title on the right. All right, so that's our two most important templates done. If you wanted to, you could just use the default template for every page in your site if all you wanted to have was, say, for example, a five page brochure style website. But we're gonna be doing some extra things later, so we will be creating some extra templates. But before we get to that, we're gonna add in a little bit of styling. And we're gonna do that using Grav's in-built CSS management tools that allow you to load your CSS in in a very efficient way. And it also has in-built optimization tools. So we're gonna run through how to get CSS loaded into your site and optimized using Grav in the next lesson. I'll see you there.

Back to the top