Wagtail CMS: Custom Admin Tabs

Hello and welcome back to another lesson on learning Wagtail. In this video, we are going to learn how to add our own custom tabs to the Wagtail page editor. And what I mean by that is we're just actually going to jump straight in here is We have, and this is just leaving off from last video by the way, a content panel, a promote panel, and a settings panel. And every Wagtail page comes with this. Even if we edit our home page, we're going to see the exact same panels. Now we can get rid of these panels. Or these tabs, uh, if we wanted to. It's not hard to do that, but what if we wanted to add something extra? What if we had I don't really know what to put in here that's going to fit every page's need, so maybe let's get a little bit specific. Let's create a sidebar.

And so right beh beside settings here we're going to create sidebar settings and it's just going to have some content in there. And it's not going to be great content, it's not going to be anything magnificent, but it is going to demonstrate how we can add a little card in here or a little tab rather not a card a tab. So we're going to do this on the home page. I'm going to open up home models. py and we should see it in here. We've got content panels. And just as an example, if we wanted to possibly get rid of the promote panels, we could do that. So we could say Promote panels is equal to an empty list. And if we wanted to also get rid of the settings panels, we could do the same thing. It's called settings panels is equal to. So this is not actually supposed to be covered in this video, but because this is a quick one.

I'll just quickly show you. It only takes 30 seconds. And voila, there is no more settings panel and no more promote panel. And that's how we get rid of it. We just set it as an empty list. Wagtail is smart enough to figure out there's nothing there, so don't show it at all. Now I'm going to leave those commented out and we're going to create a brand new, a brand new section, a brand new tab. Now to make this happen we are going to have to add a couple extra imports to our page as usual, that's always expected. And we're actually going to overwrite what's called an edit handler. And these edit handlers That's what creates all of these tabs for us. And we're going to have to pass in the existing tabs already, which is actually super easy. It's one line of code for each tab. And then we can create our own tab and add that in there as well.

And that's exactly what we're going to do. So the first thing we want to do here is uh we want to add our object list and a tabbed interface. And do we have edit handlers in here? We don't, it doesn't look like we do, do we? Nope. Okay, so let's put it in here. Let's do from Wagtail. admin. edit handlers import object list and a tab data interface. Nice. And actually I lied we totally do. I don't know how I overlooked that. That was silly, but all I'm gonna do is remove that line and throw these up here. If you're screaming at your screaming, Caleb, there is one, then uh, you know what? Good catch. Because for whatever reason I didn't see that, and that's okay.

So we're gonna go back down to our home page. Those are imported. And I've commented out the promote panels and the settings panels. So if we re refresh our page, we're going to actually see that they show up again. Perfect. That's exactly what we want. And now we have this new section or this new property in here called Edit Handler. And this is going to be a tabbed, tabbed interface. And this is a class, but this class takes a list. And it takes a list of object lists. So object list, this is how we create a tab, and we're going to put in our content panels. And we're going to give it a custom heading. Heading is equal to And let's just save that. Open up our terminal. Life looks good in terminal land

and refresh. And here it says custom. That's exactly what we s we we wanted it to do that. Now the reason that the promote panels went away and the settings panels went away is because we overwrote all of the tabs. We said we have a brand new tab interface. We're not going to give it anything except our content panels, which is defined right up here. Content panels. Where is content panels? panels. Doo doo doo do do. Past it. There it is. Content panels. Now that's cool and all. So let's change that to let's change that back to content, which I believe is the default anyways. Now let's say we wanted our promote panels to be in there. So we do object list

page. promote panels And let's give it a heading, promotional stuff. And lastly, let's also add our settings back in there, if we wanted to. Object list, page. settings, panels. Heading is equal to settings stuff or stuff. Okay, refresh. Refreshing my page and everything's gonna look normal, except I just renamed the tabs So no big deal there, but that's how you would rename your tabs. That's cool. Not useful, but it's cool. And lastly, we want to create our own list in here. And we're going to do basically the exact same thing we did with content panels, but this time we're going to add an object list, and this one's going to be

Sidebar settings. No, let's not call it settings. Let's call it panels. Keep with the name and convention that Wagtail has given us. Sidebar panels, heading is equal to sidebar panels. sidebar settings I guess. And when we save this, we're going to get an error because sidebar panels does not exist. Promote panels and settings panels, they do exist. And let's add a comment here. And just like our content panels, our content panels is basically just a list of panels What we're going to do is we're going to do the exact same thing, but for sidebar panels. So sidebar panels is equal to a list. That's all we want it to be. We can make this a multi-field panel

Give this a heading of custom one if we wanted to. And give this a field panel. And we don't know what to put in here yet, so let's maybe instead of adding new fields, let's just move some fields. Uh what do we have here? We have a whole section just for banners. We've got Uh banner title, subtitle, image, and CTA, and we've got banner options. So you know what? Let's just actually cut this whole thing out. Do a little homepage surgery here. And I'm gonna paste that in. Now we don't need to run migrations because these fields already exist. These properties up here, like the banner CTA, it already exists. It's not going to change anything in the database. What this does is it simply changes how it's viewed in our Wagtel admin. And I broke something there.

Invalid syntax, yep, I'm not surprised by that one. Okay, terminal land is happy, refresh. And here we have content, promotional stuff, settings stuff, and sidebar settings. So that's actually not sidebar anymore. We should probably rename that. Let's not call that sidebar settings. Let's call this banner panels. Banner panels banner settings and let's move this up. Let's move this up here. So it goes content panels, banner panels, promote panels, settings panels. Refresh our page and wait for it to load. Here we have content, banner settings, promotional stuff, settings stuff.

So all we did was we added a brand new tabbed interface and it basically just overwrote all of Wagtails. default tabbed interface data on the homepage. And then we re-added our content. We re-added promote and we re-added the settings panels. And we created a brand new list of Panels. And in those panels we basically just moved our homepage banner panels into this new banner panels, I guess. The naming convention gets a little bit funny here. And all of a sudden we have an extra tab. Now we don't need to do anything in our templates. Our homepage and everything is still going to look perfectly fine because we didn't change how anything is actually structured. We didn't change the data structure or the database structure.

at all. All we really did was say, hey, we want to move a couple of these fields, or in this case, four fields from our homepage, and we want to put it into a new tab so that our homepage content doesn't get super, super long. And now just as an example, to make sure that everything does work as fine, I'm going to click Live, and we can see that our homepage is our typical, kind of ugly homepage. And again, ugly is okay because a design is easily changed, and data is sometimes not as easily changed And as always, I have a bunch of code in this video that you've seen me write. I can't put that all in the description down below, so I'm going to put that in a git commit, and you can check that out at any point in time. It is open source and is available to you 24-7.

Hey there, my name is Caleb Tallinn. I am a Wagtail Core team member, and I just wanted to say thank you for watching this video about learning Wagtail CMS. If you enjoyed this video, there are plenty more where this came from. all available on learnwagtail. com. And if you would like to dive into any particular subject, you can always go to docs. wagtail. io. The documentation is quite fantastic and in true Python fashion, it is very well written. And hey, if you like this video, don't forget you can always share, subscribe, or leave a comment down below. I love hearing from the community, and I look forward to seeing you in the next video.