How to Add a New Wagtail CMS Page From Scratch

Hello, welcome back to another lesson on learning Wagtail. In this lesson, we're going to be creating a brand new app inside of our Django application for a page called Flexpage. Now what a flex page is, and this goes by several different names, but a flex page is essentially a flexible page. It's a generic page, it is a basic page, it goes by several different names Different people call it different things, but the idea is that this page is a very generic page. There's nothing fancy about it. It's usually just a basic page with a ton of different stream fields on it. And that allows people to really customize pages the way they need it to be. So for example, an about page or a basic contact page that doesn't have a form would be

Good candidate for a flex page, or basic page, or generic page, whatever you want to call it. I'm going to call it a flex page just because I like the idea of making it flexible Now in order to get started with our flex page, we have to create a new Django app. So let's CD into our website. Mine is just called mySite, pipenv shell, and this will instantiate our Python environment And then we type Python3 manage. py start app, maybe I can make that bigger, start app, and we will call this flex. And it looks like it did nothing, but if we open up our editor or if we open up uh the directory in your operating system. you'll actually see that there's a new folder in here called flex.

And you can see that git in VS Code says, oh, there's a bunch of new stuff in here. So if we open this up, we've got a migrations file in knit. py, admin, apps, models, tests, and views Now largely for Wagtail sites you don't actually need views. If it's just a basic Wagtail site, you may want to uh split out some additional logic into your views. But for the pages that we're building or that we have built so far, all we need is models. py. And that's because Wagtail sort of combines the idea of a view and a model together a little bit. Now that only works up until a certain point when your app starts getting a lot larger and you need to split out additional logic, but for what we're doing today, this is absolutely perfect. Now this is not going to run the way you think it's going to run.

So what we need to do is we need to open up base. py and we need to add this. So we go into our installed apps where it says home search. We haven't worked with search yet. And we're just going to add flex. And that is it. Now if we go back to our terminal and we simply Run our website, so Python 3 manage. py run server. This will run server on 127. 001. And we boot up localhost 8000. Cool, everything is working. However, if we go into the admin, there's no way to make a basic page. So if we go into Go view our homepage and let's add a child page, we can't add a child page yet. So let's go and make that happen.

So what we want here is we want to add a basic page or flex page and we want to put it into flex slash models dot pie. And I'm going to add a little doc string at the top here Flexible page, just a little descriptor. So I'm just going to start writing out my model the way I need it to be right now. And then I'm going to add my imports after. This way I'm not importing things that I don't necessarily need. Although if you have a linter like Flake 8. It will often tell you that, oh hey, you have imports that you're not using. Basically get rid of them. So I'm just going to start with class flexpage page. We already see that we have our first one in here. We don't have page imported. A little doc string in here.

Flexible page class. Let's add a template Flex, flexpage. html, that's what it would be by default anyways. Uh but again I like to be I like to be pretty explicit in things just so that if you're brand new coming into this, you know exactly where this template's going to be. Let's add some content. Content is equal to stream field, and we're going to comment that out. And in fact, I'm going to add a to-do to it To do add stream fields. And now we've got a little to do in our code comments. Let's add a custom page title. So maybe it's not necessarily the title that you're going to see in the Wagtail admin. But maybe it's going to be the title that people see in the banner.

Not necessarily a banner title because we don't really know if this page is going to have a banner yet Now at this point if you're making a page, you should probably be going off of some sort of design. We are not. We are sort of winging the design because this is a Wagtail course. This is not a learn how to make a website from a design course. So let's do subtitle is equal to models dot char field max length of one hundred Null is equal to true, blank is equal to true. It's going to be completely optional field And then let's add this to our content panels. So we add content underscore panels is equal to page dot content panels.

So that's whatever Wagtail is giving us plus a little extra. And we have a field panel in here. So this field panel is going to take your subtitle and actually put it into Wagtails admin where you can go and edit it Otherwise, it's just a field in a database and it's not really useful to anybody. So we're gonna throw this in there, subtitle. Let's give it some metadata. No QA means basically just while the linter is running, don't worry about linting that particular line. Don't say that there's a problem there. Verbose name is equal to flex page and verbose name plural

Well Django will always just basically add an S there anyways. Uh but you know in the event that it was something different because sometimes in English it's not just adding an S to a word that makes it plural. Sometimes it's changing it to IES that makes it plural. Either way, again, I'm being explicit, largely for learning purposes for you. So now I can save this and I actually have Flake 8 installed. So you can see in red here if you're using a different editor that's totally fine. Usually underlines like Sublime, it will underline So it doesn't understand what stream fields are, but it also says that this is not imported. So let's go ahead and import that from Wagtail Core. So do from Wagtail. core. models

import page. And we have one more field panel in here, so we have to add that field panel as well. So let's add from Wagtail. admin. edit handlers is equal to an import of field panel. Alrighty. So let's open up our terminal No module named Wagtail Core model. That's actually correct. It's models Everything's looking okay. When we open up our browser though and we go to add a new page, we get this error. And our error

If I can scroll up in here, do do do where are you? So if we look at this get request here, it says admin pages add flex flex page three http 1. 1404 Basically, this is saying that your flex page does not exist. If this was on your website, like outside of the WagTel Admin, you would probably get an error that looks a lot like an SQL error. And I just know this from experience, unfortunately. I'm just going to type in Python 3 managed. py make migrations. Python three, manage. py, migrate, and then lastly run server

Now if I open up my browser again and refresh my page, ta -da! We have a new flex page. We have title and we have a subtitle in here. So we could call this about and about startup life. And there we go, we have a new model. Now there is one more thing that we have to add. It's really really quick actually. Because if we click View Live, we're gonna get template does not exist. Oh no, what do we do? Well we have to go make sure that that template does exist. So again, open up your editor. And so what we want here is we want flex, the directory, which matches the name of our app here, and flex page, which matches the name of our model here, if you were to turn this into uh

snake case, I believe it's called. You want this file to exist, so let's open up my site. Let's go into templates and let's create a new file. We will call this flex slash flexpage. html And if you quickly reference homepage, you can see that it extends from base, it loads some stuff, and it has a block in there called content. So honestly, here's what you can do. You can either type this out, or you can do what I do, copy and paste. And this is a little bit lazy, so uh this might not be the best practice, but this is what I do because I don't feel like typing all that. Instead of typing I don't know what that would be. 50 characters? My fingers only ever had to hit seven. Basically copy, paste, delete, delete, delete.

Good to go. So now let's put in here we put self dot subtitle is the subtitle and let's go refresh our page And there it is. About startup life is the subtitle. I'll make that larger too because that is really tiny. And that is exactly the subtitle we put in here. About startup life. It also made that huge, unfortunately. But there it is, about startup life. So there we go. In this lesson, in this video, we have created a brand new application, or brand new app, rather, inside of our Django application, inside of our Wagtail application.

to create a new page type. Now the reason we would create a new page type is because we might have different fields in here. This one might be a subtitle whereas the homepage actually has banner options. Or this page can have a bunch of stream fields and the homepage might not have stream fields. Eventually the homepage might just automatically pull from the latest blog or most popular blog. Usually the homepage has a lot more wow and and pizzazz to really draw the user in, and a basic page often is quite basic, so it still might look really nice. Unfortunately, it's not the draw of the website. And so that's the difference. So we can add anything else we want in here, and it's not going to conflict with our homepage at all. And if you have any questions, feel free to leave them down below.

Wagtail also has a Slack channel that you can join for support. The creators of Wagtail Torchbox. They run that whole channel. It's fantastic for support. You can always check on Stack Overflow as well. There's a lot more support coming out on Stack Overflow. And as always, you can always reference the docs at Wagtail. io Or if you want more tutorials like this, you can check them out on learnwagtail. com.