Customizing panels in the Wagtail Admin

Today, let's have a look at how we can customize the admin panels in a Wagtail site.

Let's define a simple model first:

blog/models.py

1class BlogPost(Page):
2    body = MarkdownField(blank=True)
3    tags = ClusterTaggableManager(through=BlogPostTag, blank=True)
4    date = DateTimeField(blank=True, default=None, null=True, db_index=True)

To make the fields appear in the admin interface, they need to be added to one of the panels.

By default, a page has 3 different panels defined:

• content_panels: everything shown under the tab "content" of a page
• promote_panels: everything shown under the tab "promote" of a page
• settings_panels: everything shown under the tab "settings" of a page

So, if we want to add the fields, we can add (append) them to the default one:

blog/models.py

 1class BlogPost(Page):
 2    body = MarkdownField(blank=True)
 3    tags = ClusterTaggableManager(through=BlogPostTag, blank=True)
 4    date = DateTimeField(blank=True, default=None, null=True, db_index=True)
 5
 6    content_panels = Page.content_panels + [
 7        MultiFieldPanel(
 8            [
 9                FieldPanel('title', classname="full title"),
10                FieldPanel('tags'),
11            ],
12            heading="Post Details",
13        ),
14        StreamFieldPanel('body'),
15    ]

Let's say you want to completely replace the panel, you can just change it's definition:

blog/models.py

 1class BlogPost(Page):
 2    body = MarkdownField(blank=True)
 3    tags = ClusterTaggableManager(through=BlogPostTag, blank=True)
 4    date = DateTimeField(blank=True, default=None, null=True, db_index=True)
 5
 6    content_panels = [
 7        MultiFieldPanel(
 8            [
 9                FieldPanel('title', classname="full title"),
10                FieldPanel('tags'),
11            ],
12            heading="Post Details",
13        ),
14        StreamFieldPanel('body'),
15    ]

We can make a MultiFieldPanel collapsible by adding the class name collapsible which I did with the post details:

blog/models.py

 1class BlogPost(Page):
 2    body = MarkdownField(blank=True)
 3    tags = ClusterTaggableManager(through=BlogPostTag, blank=True)
 4    date = DateTimeField(blank=True, default=None, null=True, db_index=True)
 5
 6    content_panels = [
 7        MultiFieldPanel(
 8            [
 9                FieldPanel('title', classname="full title"),
10                FieldPanel('tags'),
11            ],
12            heading="Post Details",
13            classname="collapsible"
14        ),
15        StreamFieldPanel('body'),
16    ]

You can also make the panel collapsed by default by adding the class name collapsed.

For a field panel, I also added the classes full and title to the FieldPanel. The class name full makes the field cover the complete width of the editor. The title class name gives the field a larger title size making it clear it's a title.

If you want to hide for example the settings, you can just set the variable settings_panel to an empty list:

blog/models.py

 1class BlogPost(Page):
 2    body = MarkdownField(blank=True)
 3    tags = ClusterTaggableManager(through=BlogPostTag, blank=True)
 4    date = DateTimeField(blank=True, default=None, null=True, db_index=True)
 5
 6    content_panels = [
 7        MultiFieldPanel(
 8            [
 9                FieldPanel('title', classname="full title"),
10                FieldPanel('tags'),
11            ],
12            heading="Post Details",
13            classname="collapsible"
14        ),
15        StreamFieldPanel('body'),
16    ]
17    settings_pnels = []
18

You can find much more info about panels in the documentation.