This episode is for members only

Sign up to access "Build Your Own PHP Framework" right now.

Get started
Already a member? Sign in to continue
Playing
23. Creating a base layout

Episodes

0%
Your progress
  • Total: 4h 45m
  • Played: 0m
  • Remaining: 4h 45m
Join or sign in to track your progress

Transcript

00:00
If you're new to Twig, let's look at how we can create a base layout so all of our pages
00:04
follow the same structure and we can reuse something like a navigation. So we'll look at includes as well. OK, so at the moment we've just got a bunch of plain HTML on the page which doesn't have any real structure to it. Let's go over to our views directory and create another directory called layouts and then we'll define either one or multiple layouts for our application.
00:26
So I'm just going to create a standard app.twig layout which will be enough for the majority of what we're doing but then you could create different layouts perhaps for a user dashboard or any other sections. So in here I'm going to go ahead and define out a basic HTML structure. We'll get to the title a little bit later but for now let's just call this no framework and basically
00:47
what we want to do is inside of the body inject a block of content so we can reuse this entire template. Now to do that we define this out with block and we give it a name so let's just call this content and as with most other things in Twig we want to end that block just here. So now how do we use this template and inject the content from home directly into here? Well let's open up our
01:12
home.twig file and at the top of here let's extend that layout we've just created. So we're going to say extends and we're going to give the full path to that layout so layout slash app dot twig and we're nearly done. Now we want to define all of this as the content so in here we use block again and define out this content and sure enough down at the bottom we end that block. So what's going
01:41
to happen now is all of this content in here is going to be injected into this content just here within our base layout. Let's go over and give this a refresh and you can see that the title's changed and we now have a proper structure to our app. You can see that via the html that's returned. What we can also do is take this one step further so we could create out some sort of main wrapper
02:06
inside of here for our content but we could also create a global nav at the top and we could include a partial. So for this under layouts we could create out either a new directory or just a new file called navigation. In fact let's create out a directory for this so we'll call this partials and inside of here let's create a new file called navigation dot twig and this will be the global
02:30
navigation for our app. So let's say ul and we can even put the nav tag inside of here but it doesn't matter and we could create out an anchor that goes through to our home page which goes through to slash and now we can include that within our base layout. So inside of here let's go and include with the include syntax that layouts and partials and navigation dot twig file. Now if
02:58
we come over you can see that the nav exists at the top of every single page. So if we create out a new page and over in that page that we create we just define out the block. I'm actually going to pull that indentation in. All we need to do now is extend this base layout. Any content in here is going to be visible here but we're always going to have our navigation and this is going to start to
03:21
build up what we're building. We'll create a link to go through to the login page register page. We'll change around the state of the navigation as we implement authentication to show if the user's logged in. We can greet them by name but at least now we have a much better structure to our layout.

Episode summary

In this episode, we dive into how to set up a base layout in Twig so all your pages share a common structure. We start by making a new "layouts" directory in the views folder, and create an app.twig file. This acts as our main layout, with a basic HTML structure. The key part is adding a {% block content %} placeholder, so different pages can inject their own content into this shared layout.

Next, we see how to use this base layout in a real page. We update our home.twig file to extend the new layout by using {% extends "layouts/app.twig" %}. Inside home.twig, we wrap all the page-specific HTML in a {% block content %} so it slots perfectly into the layout.

To keep things modular, we create a "partials" folder and add a navigation.twig file, which holds our site’s main navigation. By including this partial in our base layout with {% include "layouts/partials/navigation.twig" %}, the navigation bar now appears automatically on every page.

From here, we talk about how you can reuse this structure for new pages by just extending the layout and defining their content blocks. This not only keeps the site DRY, but also sets us up to easily add dynamic features to the navigation, like login/logout states. By the end of this episode, you’ll have a reusable, organized page structure with consistent navigation throughout your app.

Episode discussion

No comments, yet. Be the first!