Getting Started With Your First Home Page in Wagtail CMS

Hello and welcome back. In a previous video, what we did was we installed Wagtail from scratch using uh pipenv. And this video extends on that one. So in this lesson, we are going to create a new Wagtail page. Actually, we're going to use an existing Wagtail page, but you could create a new Wagtail page. uh if you wanted to. Um we are going to create a couple new fields, extend the template, and start customizing our website to be the way that we want it to be. So I'm going to open up Visual Studio Code. You can open up Sublime, Atom, Vim, it doesn't matter. Just choose your editor of preference. I already have my workspace open, so this is the MySite website that we created in the lesson where we installed Wagtail using pipenv.

And if we close up these directories, this is what it gave us by default. So it gave us requirements manage. py docker file. It did not give us db or pip file that was generated when we actually ran the server. Um which we're going to need to do. And it gave us home and search. So we have two apps in here, one called home, one called search. And home is the one that we're going to be working on today. So if you open up home and go to models. py, you will see a very basic page that does absolutely nothing, really. And to show you what this really looks like, and let's go to our website and start the website. So mine was located in websites my site. I'm going to pipandv shell to get inside of it.

And then Python three manage. py run server. And this will run server on HTTP127001 or the equivalent of localhost on port 8000. So now if we open up our browser, go to localhost 8000, we will see our Wagtail site. It's beautiful! Isn't it? This is the default Wagtail site, so there's nothing in here yet. So what we're going to need to do is we want to go down to our admin interface. It will ask you to log in, so if you're not already logged in, make sure you have a super user. If you don't have a super user, the last video where we installed Wagtail using pipenv also walks through creating a super user, so you can reference that video if you need to. And in here we have pages

and all we have is a home page. And we can actually see that this homepage has a few options in here. So we've got a slug, page title, we've got some settings in here. But the name is just home. When we go to localhost 8000 again, this is what the homepage is by default from Wagtail 2. 4 and forwards. on versions Wagtail 2. 3 and prior to those versions you just get an ugly page that says welcome to your new Wagtail site. Either way, we're going to be overriding this, so it doesn't really matter. It's just nice that this this CMS gives you something nice to look at right off the bat. So if we open up home slash models. py and we have in here we have where it says pass, we can actually just delete that

and we're going to add some additional stuff in here. You can see that Django. db is importing models. Uh that is not actually used right now, but we're going to make use of that. So the first thing we want to do is we want to explicitly tell it to use a template. I like being explicit. If you don't want to be explicit then you can just assume that Django is going to take your class name and put it into uh I'll type this out for you, templates slash home. underscore page. html. And this is where we're going to basically put it. Actually, that's wrong. It's going to be templates slash home slash home underscore page. html. And that's exactly where we're going to put this And again, I just like being explicit. And I typed the wrong thing there. Do do do.

And let's give this a doc string because that's a good practice. Homepage model. Okay, so now we have a template that we're going to use. It doesn't need to use templates because Django knows that always look for templates in the templates directory. Now if we save this and we go into Chrome, nothing happens. But if we open up my site and then we have a couple directories here So open up templates and then just create a new file. Da da da da da create a new file. I'll give it a directory of home and homepage. html. And this is where we start to extend things. So this is very common in the world of Django, but if you don't come from a Django background, this might be a little bit new to you.

So in Django and in a lot of other frameworks now, uh you have this notion of blocks. And these blocks are really nice because basically you have a base. html page And inside of these blocks you can inject your code from other templates. So what we're going to do is we're going to take the block called content So it says block content and then end block and we're just going to use that inside of home page. And if we type literally anything, this will overwrite what Wagtail has already given us. So let's open up Chrome and take a look Oh hello world. There it is. So we have overwritten that entire page. So that's getting started with a brand new template.

And that's a quick crash course on how blocks work inside of Django and Wagdeal as well. Alright, let's hop on over to models. py and let's create something custom where an administrator can actually put in some sort of text or some sort of data. and we can show it on the page because right now everything is hard coded and this is no different than a static site, which is I mean sometimes it's good, but it's not what we're going for here. So let's create a new field and Let's just call this banner title because it might actually be different from the homepage title itself. This is straight up Django at this point, so we're doing models. charfield. Max length is going to be let's say

100. Blank is equal to true and null is equal to true. Actually let's do blank is equal to false. So What this means is when someone goes to fill out this field, and I'll show you this in just a moment, when someone goes to fill out this field, it cannot be blank. But in the database, it's allowed to be null. It's allowed to have no value So this is for form validation, and null is for what's stored in the database. Now if we run this, we're actually not going to see anything. It's not going to work the way we want. We need to do Something a little bit extra. We need to add content panels. So content panels is this notion of you have a Django field.

In this instance it's called banner title and it's a char field or a car field. And we need to add that to our page. So essentially, we need to add another field in here so that the admin or the content editor can go in there and they can customize it somehow. So let's do that now. We have these things called content panels. And we want to grab the default content panels. and append to it. Now the default content panels is just the title. And you can actually see that up here where it says title That's all it is. So if you ever wanted to get rid of that, you could theoretically get rid of that.

You probably don't want to though. And let's create a new field panel. And this one is called banner title. And that is it. So what we're doing here is we have banner title as the property name in our class, and we're simply referencing it as a string Now we save this and we head on over to our terminal. We can say, or we can see that field panel is not defined. Well, that's because we have to import it. Like everything in Python, we need to import this. So where does field panel come from? Now I just know off the top of my head that field panel comes from Wagtail Admin Edit Handler. So let's do this. From Wagtail. admin. edit handlers. Handlers. Import field panel.

Save that and let's open up our terminal. And everything looks nice. However, if we open up Chrome and we refresh our page, we get well we get an SQL error. This basically says in our database there is no column called banner title, so we need to make that exist. So open up your terminal Cancel your run server and then run python manage. py make migrations So it made a migration for us and then we do python manage. py migrate with an m migrate So what that did was that created a Python file for the database to check to see if that column actually exists.

And if it doesn't, Python will then loop through all of the migration files, their Py files, and in this case it's called uh 0003 homepage banner title and it's going to apply that migration to the database. Basically it just made a column in the database for us. Now we need to run our server again. So python 3 manage. py run server And refresh our page. And hello, we have a banner title in there. So now we can say, hello, this is A banner title. And you could label that to be whatever you want. I'm just gonna throw some dummy text in there and we will we'll work with this a little bit later. So I'm going to publish this page, and when I reload low close 8000, still nothing is going to happen And that's because we haven't told it to do anything.

So let's open up homepage. html, and inside of our block here, we're going to use uh I call them double mustache or double curly brackets or Anything you really want to call them. There's probably a proper name. I like calling it double mustache because it's kind of funny. And all I'm going to do in here is type self dot banner underscore title. Self is because this is object oriented programming, this is referencing itself as in this model and it's referencing this property. So in object orientated programming in a function, for instance, You would have uh something self, it would look something like this, and then you could return self. banner title. And again, this is just basic object-oriented programming. If you're new to this, Welcome.

This is a better way to live your life. If you know about this already, well, it's good to review, I guess. So self. banner title is what we want in our page. html. And I'm going to save that and refresh Chrome. And there it is. Hello, this is a banner title. Now there's a couple other things that you could probably add to your page to make them a little bit better. So for instance, in Wagtail, if we wanted to add another page to root, we could. But let's go ahead and add a child page to home. Now instantly it recognizes that there's only one other page it could ever be, and that could only ever be the homepage. But why would you ever have a homepage underneath a homepage? That tree hierarchy doesn't make sense.

In fact, there should only ever be one home page per site. Now, in order to limit this, and we're not going to get into multi-site, but in order to limit this, this is really easy. In Wagtail 2. 4, you can simply say In your models. py, max count is equal to one. This means that there can only ever be one home page instance at a time in your site. Now let's save that. Let's head on over to Chrome, refresh. And when we add a child page, it says Basically, there's nothing to choose from. And that's because we said, oh, there's already a homepage. You can't add another one. So one thing to note here. Is max count became available in Wagtail 2.

4? If you're using an earlier version of Wagtail, up to 2. 4, not including 2. 4, there is a different way to do this, but in 2. 4 it's nice and easy. It's a one-liner. Now there's one other thing, I'm going to comment this out for this next example, and this is some metadata. So uh move this down. Class meta And we're going to set a verbose name and a verbose plural name. So verbose, verbose name is equal to oh hello world. And I'll change this in a moment, but I'm going to show you why I'm doing this. Verbose plural name is equal to plural name. Um and actually before going on, what I did there was backwards, it's verbose name plural.

As you can see, the name and convention is the same on both of them, so that was my mistake. If you're screaming at the screen right now going, Caleb, you know better. You're right. I did. I knew better. So I'm just gonna open up Chrome. And now when I add a child page. . It says, oh hello world. So it didn't say new homepage or new home pages. It says new oh hello world. So you can actually rename your entire class if you wanted to. So that's in the WagTelegmin, it's always referenced as a different name. So for instance, if you have a class name called HomePage, Django is going to, by default, say, oh, this class is called HomeSpace Page. It just takes the capital letters and throws a space before it. But in this case, we explicitly said call it something else.

Now again, I like to be very explicit in how I do things, so I'm gonna call this homepage, and when there are more than one homepage. home pages. And that's it. I'm going to undo the max count. And when I open up Chrome, go back to home. Add a child page. There can't even be any child pages in here because there aren't any to choose from. So there you go. This is a lesson in creating your first home page. It's very, very simple All it has is a little text in here. We created one additional field. We gave it a max count. We added the field as a field panel so that it's actually editable inside of the Wagtail admin. And we gave it a verbose name and a verbose

name plural. Now if you ever wanted to extend this, you could add any other Django fields that you wanted to. Just make sure you add the appropriate fields. We're going to explore field panels and the different varieties of field panels in future lessons, but for this particular lesson we are up and running with our own custom homepage. Now there's one last thing to note. If you are using Wagtail 2. 3 or earlier, you are going to actually need to create an app on your own. This doesn't come with homeslash models. py like what we're working with here you're actually going to have to run a command in your terminal called pythonmanage. py start app home. And then you're going to have to go into your settings and add home to your installed settings. Or in your installed apps rather.

And for anyone who's looking at this saying, what is that comma, comma, dash, or comma, comma, p? Uh, well this is a comma, comma, chameleon. Um aka Text Expander. And this just this is basically devs being lazy. This allows me to write certain pieces of code really, really quickly without having to memorize them So for instance, I have a text expander uh set to comma, comma, pm. That's python manage. py. I've got a bunch of these. Uh it's a text expander. If you're on Mac OS, you can use a program called Alfred. Uh there are several different text expanders for different operating systems, so do a little googling if you're interested in that. But otherwise, yeah, that's all this is. Comma, comma, pm is python manage. py Hey, did you like this video? If you did, feel free to give it a little bit of a thumbs up there.

Some little love would be great. Really helps out the Wagtail community to get more exposure in tutorials like this And you can also look at other tutorials on learnwagtail. com