Using Custom Tabs to Organise Your Wagtail Admin

By Christopher Shaw

Custom tabs are a great way to organise your Wagtail Admin. We can use different tabs to organise fields for content editors, improving their editor experience.

In todays video we'll look at how to move fields to the built in promote tab and create your own custom tabs in the Wagtail admin.


Intro - Welcome To Wagtail Wednesdays

Hello and welcome to this weeks instalment of Wagtail Wednesdays.

In todays video we're going to show you a quick way to reorganise your admin interface to make it simpler for your content editors to focus on just the content.

Section One - Adding Fields To The Promote Setting Tab

Here we have a basic example page that I've set up, which includes a field for an author, a date override field and some checkboxes here that dictate whether Wagtail should post or share to these various social media platforms.

Finally at the bottom here we have our rich text field for our main post content.

It'd be great if we could move these non-content fields to another tab. You'll notice that by default Wagtail create these Promote and Settings tabs and displays some extra fields there already.

The first thing I'm going to show you is how we can move these fields from our content tab, to each of these other two tabs.

So let's say, we'll move out the author and sharing settings to the Promote tab and our date override to the Settings tab.

Here in our you can see our various fields being passed into this content_panels list. Anything passed into the content_panels list will display on the Content tab in the admin interface.

If we define a new list down here called settings_panels and pass in the date override, we should see that the field has now moved to the Settings panel in our admin.

We're actually going to make this equal to Page.settings_panels plus our list of fields. This way we won't override the Wagtail defaults for that tab like scheduled post date.

So, if we go back and also move the author and sharing settings to another list called promote_panels, equal to Page.promote_panels plus our list of fields - we should now see in our editor that the panels have appeared in the Promote tab this time.

While splitting fields between these three tabs might be sufficient, I wanted to show you how you can create your own custom tabs - which gives you even more freedom to organise your fields however you'd like.

Section Two - Creating A Custom Tab

To create our own tabs we need to make our own TabbedInterface object and use that to override the default value of the Page.edit_handler attribute.

Firstly, we need to add two imports at the top here. Let's import TabbedInterface and ObjectList from wagtail.admin.edit_handlers.

The next thing that we want to do is create a new list for our custom tab. Which we'll call custom_tab_panels and just move our author, date and social fields into this new list.

Now we can override edit_handler with a new TabbedInterface which takes in a list of ObjectLists. For each ObjectList we'll pass in a list of panels and a heading.

Let's add our custom tab panels with a heading of just Custom Tab.

If we refresh our editor window, we'll see that our custom tab has appeared and contained the fields we assigned to it. Unfortunately, the other tabs and fields they contained have disappeared. This is because we overwrote the edit_handler but didn't pass these tabs in, so let's go back and sort that out.

In the TabbedInterface list we need to create new ObjectLists for the content, promote and settings tabs. You could also use this opportunity to rename those default tabs, if you'd like by giving them a different heading.

For the settings object list we'll also pass it a classname attribute with the value 'settings' - this will ensure that it gets it's cog icon next to the heading in the tab.

Thanks For Watching

Thanks for watching our quick video tutorial on organising fields into different tabs. If you enjoyed the video, please consider liking and subscribing to our channel. You can also sign up to our mailing list for early access to these videos - you'll find the link in the description below.

Thanks very much and we'll see you next time.

Get Early Access To Future Wagtail Wednesdays

Submit your email and we'll send you early access Wagtail Wednesdays videos direct to your inbox.

<< Back to Insights