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.1 Creating Essential Theme Files

In every Grav theme, there are a few essential files necessary for reliable functionality. We’ll go through creating them in this lesson.

Related Links

3.1 Creating Essential Theme Files

Hey, welcome back to Up and Running with Grav CMS. So far, we have installed Grav CMS, and we've gone over how the Admin panel works and how pages are organized in a Grav CMS site. Now we're gonna start building out your theme. And we're gonna begin with the three files that every theme must have. None of these are actually template files, so even when you do put these three files in, your theme isn't actually going to show anything on the front-end of your site. But the difference between these three files and the other files that are gonna make up your theme is that these three files must be put in with the exact names that I'm gonna show you. And with the content that I'm gonna show you. Everything else in your theme is flexible, in terms of what you decide to name things and how you decide to organize things. But these three files have to be done in a way that you're gonna see in this lesson. So we've got our Grav site folder on the left here, and we've got our code editor on the right. So we're gonna go into our user folder, then into our themes folder. And we're gonna start by making a new folder to hold the theme that we're gonna create. We're making a theme from scratch, so we're just gonna call this one theme-from-scratch. The first of the three files that we're gonna need is called blueprints.yaml, Y-A-M-L. Every theme need this file, and it must be given this name. And it should be in the root folder of your theme. And this file can actually hold quite a bit of different information, and I'll give you a link to the docs where you can see what type of information you can include here. But the one thing that you absolutely must include is the name of your theme. So when a person is browsing in the Themes section of the Admin panel, this file is gonna determine what they see listed against your theme. So we're gonna add name:, and then we'll add theme-from-scratch. And we're also gonna add a description. And we're gonna set that as, Getting Up and Running with Grav. We're also gonna set version, and we'll set that to 0.1.0. Now, without any of these three pieces of information, you listing via the Admin plugin is gonna have labels that don't have any information next to them. So for example, if you don't add the version number, then the back-end is going to say Version, but then there'll be nothing but a blank space next to it. Now, even though we've just used blueprints.yaml to determine what information is gonna show up in this Themes section, we're not yet seeing it showing up in our listings. And that's because of the second file that we need to create. This file needs to match the name of your theme. So we'll put theme-from-scratch.yaml. And in order to get this theme to show up in that Themes section, in here we need to add enabled: true. Now when we go back and refresh, there's our theme. And you can see the name and the version number that we added. So we're just gonna activate that, even though we don't have any templates in there to actually handle display of content. We'll just set it on now anyway. And then the third file is also gonna be named according to the name of your theme. theme-from-scratch, and this time it's .php. Now, this file is designed to handle your interactions between your theme and any plug-ins that you have installed. We're not actually going to be working with this file during this course. It's a little bit beyond what we're gonna be focusing on, but the documentation for Grav does say that you need to have this file in order for the theme to function as expected. So even if you don't use it, it's still best to err on the side of caution and just include that file anyway. Because the system, assumedly from the documentation, is going to expect the file. And you can include this code in it by default. If you don't want to type that out, you can copy and paste that from the source files that you'll receive as part of your access to this course. Now, this just sets up any interaction that you might want to do between your themes and your plug-ins later on. But for the purposes of what we're doing, you can just save that, and that's good to go as it is. Okay, so that covers the essential files that you must have in every single theme. Next up, we're gonna start creating some templates, which you need to actually have your content display on the front-end. But the difference between these files and the ones that you just created is, you have some freedom with how you name those files. And what you include in those files. Now, that said, there's still some conventions that are being established by the Grav developers for what most themes are going to name their templates. And how those templates are gonna interact with one another. And even though you do have the freedom to do whatever you want with templates. You can name them whatever you want, you could set them up however you want. We're still gonna follow along with those conventions, just because that's generally a good way to get started in any new system. So one of those conventions is the creation of a base template that holds your essential code. Things like your html element, your head section, your body section, that gets reused throughout the site. And a default template, which will typically be the template you use to display standard page types. So we're gonna code up those templates in the next lesson, I'll see you there.

Back to the top