Headless Wagtail CMS: Custom Page Properties

Hey there and welcome back to another lesson on learning Wagtail. In this video, we're going to learn how to add custom property to any Wagtail page and serialize it in your API. So this is a headless video. Now before we get started, don't forget to subscribe if you're watching this on YouTube. And if you don't already have your Wagtail V2 API sort of set up and enabled, you're going to want to watch that video first. so that you have your API up and running. So first things first, I'm just going to start my server here. And I want to give you a quick little demonstration. So this is my API and I have a homepage in here. That's page number three. So let's just go to page number three in here. And let's say on this homepage I have something extra that I want to throw in here as an API response.

Something that's controlled on the back end that might maybe change down the road, but the front end shouldn't be necessarily hard coding that. So we want to throw something custom in here. Now, maybe it's not related to another model. Maybe it's not a data point in the database. Maybe it's just something totally custom. What we can do here is we can open up our models. py. So I'm in my home app models. py uh and in our last video we did the banner CTA serializer. But in this one, I just want to add something custom to my API output. So what I'm going to do here is create a new property, and I'm going to call it A custom API response, which is a terrible name for a property, but it's pretty verbose.

And all I'm going to do in here is return Something custom. It's just a string that says cus something custom. Now this could be maybe the Wagtail version if you need that. Or a particular site setting. So if you needed to know like. Settings dot maybe the site ID if you've got a multi-site instance of Wagtail running. Maybe you want to return something like that. Now as a demonstration, I'm simply going to just use something custom, a boring string, but it really gets the point across. And as an API field, all I have to do is throw this in here. And this simply matches the property name or the function name. So let's go ahead and refresh our output here. And we can see at the bottom here, a custom API response is equal to something custom.

Now that's just returning a string. If you wanted to, you could also return a list. And so it's Do something custom in there, and as a second, not maybe not even a string, let's just do a float. And let's do one more list in here that says one, two, three. A, B, C. So this is actually pretty hard to read, but our Python interpreter is smart enough to understand what's going on here. And Django Rest framework does a lot of magic parsing behind the scenes. And so our custom API response now has a list, and we can see that list in here. Maybe I'll make that just a touch bigger. So it's returning a list, and the first item is a string, the second item is 3. 14, and the third item is another list with 123 ABC in it. Now you might be thinking, Caleb, why why is this useful?

How is this useful? Well if you wanted to do anything custom with any of your data, you could simply do this instead of using a custom serializer. So I'm going to actually comment that out and let's say I wanted to take a field in here that exists. And I just need to find one that I want to edit in here. Uh the banner title. And so as an example, I could return Let's return an F string. This is Python 3. 6 or later. So we could do self. banner title. And let's put this. Banner title is And just banner title. So it's not a great example, but it does show you that you can use self. banner title, self dot really anything in here. You can literally do any sort of extra logic that you want in here.

Logic. goes in here and you can perform anything you want within the realm of Python, Django, or Wagtail. So let's go ahead and just give this a quick little refresh here. And our custom API response is going to say the banner title is Welcome to Learn Wagtail. So we hard-coded this, but this part is data input into our home page through the Wagtail Content Management System, through the Wagtail Admin. So that is how you serialize custom page properties. That's pretty basic, and the nice thing about that is it's pretty basic. It's pretty easy to do. Now if you're looking for more headless tutorials, you can always head on over to learnwagil. com, click this little icon here, type in the word headless, and just scroll on down and you'll see all the headless videos in there as well.

Last but not least, if you like this video, don't forget you can subscribe, click the subscribe button down below, turn on notifications, and you will get a notification anytime I release a new Wagtail video.