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 pagepromote_panels
: everything shown under the tab "promote" of a pagesettings_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.
If this post was enjoyable or useful for you, please share it! If you have comments, questions, or feedback, you can email my personal email. To get new posts, subscribe use the RSS feed.