KreativePro Masterclass
Hello, {first_name}
Template Inheritance
Learn to Build Websites with Craft Cms
Oops! Something went wrong while submitting the form.
Browse Lessons

Access our premium community including bonus tutorials, project files & weekly resources.


Template Inheritance

On this Craft Cms lesson you'll learn about the DRY methodology and how we can apply it using template inheritance.


Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
Noel Hale
Founder of Slush Monkeys®
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Mae Green
Product Designer @ Dropbox

All right. So what we want to do is we go over to our Craft webroot folder. This is where all of our files are going to live. So we're just going to copy our webflow CSS folder, our documents, the fonts, the JavaScript. We're just going to copy that over into our webroot. Just like that. And then all the images that we have, we're going to drop that into a folder that we have already created, which is a local images folder.
Back in our cast.twig file, we're going to create a new file or a new document, and we're going to paste the information from our detailed cast template. I'm going to call this one _layout.twig. And I'll explain later why I'm adding that underscore in front of it. But for now, I'm just going to paste that code and up all the way to the top, we can see we can toggle off or toggle close some of these sections.
And what I want to do is grab the content that's inside Zeus, which is the primary wrapper, in there we have the hero and the grid. That's exactly what we want to do is grab these elements. And we're going to copy that, remove it from here. And we're going to replace with a block content  function.
So this function, what it does is just create a variable for the content in the middle, where we're going to pull it or call it. So over here in our cast document, I'm going to go ahead and simply extend that layout. So it's basically going to pull the information and wrap things around. And I'm also going to redo that same block variable called content and wrap things inside of it.
What's going to happen is now we're going to take advantage of template inheriting. So cast is now extending the layout and the layout is creating this variable for the content. So let's go ahead and check this out and see how it looks like. All right. So if we refresh the page.
Oh, we're going to see that there's an error.
This syntax error is just that I missed the S so I'm adding that extends now. And we refresh now. You'll see that we have both the data coming in from the block content that's printing out the data. And then we have all the HTML tags for the navigation, for the footer, etcetera. That's being pulled from the layout.
All right and over here in our styles, we want to jump into our links of CSS and we're going to add a variable. This is a global variable that it comes by default on Craft. It's called siteURL. We're going to print that out. It's basically just going to add the base URL that way it's going to find the CSS webflow, the normalizd and the stream-vr.webflow.css.
One thing that I am missing though, is that little logo on the footer. So if we open up the footer and then find the image source, we just need to add in that variable, the siteUrl, and it's going to find it under images folder, and we just click refresh, and there we go. It should be working perfectly.
All right. So now let's go ahead and add the correct formatting for this. Cause we were just doing a simple test with an H one. Okay. So if we go back to our cast.twig file, we want to make sure we copy over the real templating components or elements. So overhearing our detailed cast. We have the flex container having all the details, like the actor card and the biography and all that cool stuff.
So we're just going to copy this and we're going to head over to our cast. And we're just going to paste that in
and we can just quickly remove this because we don't need this anymore.
All right. And then we find the name, we can replace that with the print statement of entry.title and for the role, again, this is very simple handle. So it's entry.role. And we'll repeat that along the way with the other section. So role also needs to be replaced here.
Well let's quickly change this to the name. And then for the biography, we can toggle word wrap on. So by clicking view, then toggle word wrap, it will give us all the text condensed in multiple lines. Let's replace this with the biography and we should be good. Let's save it and refresh. Boom. So.
This is great. Now we have both the title, biography and names and roles inside our design.
The next thing I want to do is just add a filter here. So just upper on the role so that we can see that all caps. That's really cool because then we can actually manipulate the way we see things all through Craft.
All right. So what I want to do now is, I feel like that URL doesn't feel right. So I'm going to go back to my settings and sections, and I'm going to change the naming to just cast, to keep it cleaner. The handle also clean it up. So it's just cast and for the URL, we can just remove that to cast, save that.
So now when we refresh, of course, we're going to get a 404 error because that URL does not exist anymore. So just make sure that we have the correct redirection. And yep, there we go. All right. So we have the layout that is pulling the, both the navigation and the footer links and the content for that little block is pulling the actual dynamic entry.
To wrap this lesson up, I just want to talk about the different types of routes that we can do with Craft right now. This is a static route example you can see here that on the webroot, we have an image. And if we can actually access that image using a direct URLs.
Dynamic routes work a little bit different because these URLs are similar to how block post work.
In this case. I'm showing here. A /my-cat, that URL does not have a file on the Webroot or an image. So if it doesn't exist there, we need to create a routing or a dynamic route. This is where craft comes in. He will find that URL and he will associate it to an entry in our templates folder.
And that's what we just did. And so what I want to show you guys is, the reason why I added that little underscore is for accessibility. If I go into the browser and I type in, for example, just let's say one of these ones that don't have that underscore, let's say syntax, that twig, I can access that document and you're going to see that all the variables that we worked on that document.
As opposed if I added the underscore layout.twig, what it's going to do, it's going to redirect me  to a 404. And  that's exactly what I want, I want to make sure that these  templates are hidden from the public.
Let's go ahead and jump to the next lesson and make sure we have all the data ready to make our build.

Coming Soon

Designers ultimate weapon of choice
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

Welcome to the Tribe! 💜 Something cool is coming your way...