Adding a panel to the admin homepage in Wagtail

Today, we are going to learn how to add an extra panel to the admin homepage in Wagtail. This small post shows how to a add a panel with a couple of links on the admin homepage.

We first start with creating a file called wagtail_hooks.py in one of our apps. In my demo, I've added it to the app called base. If you already have such a file, you just need to add the code in there.

base/wagtail_hooks.py

 1from wagtail.core import hooks
 2from django.template.loader import render_to_string
 3
 4class ExternalLinksPanel:
 5    name = 'external_links'
 6    order = 200
 7
 8    def __init__(self, request):
 9        self.request = request
10        self.external_links = [
11            ('Google Analytics', 'https://analytics.google.com/'),
12            ('Google Search Console', 'https://search.google.com/search-console'),
13            ('View Site', '/'),
14        ]
15
16    def render(self):
17        return render_to_string('wagtailadmin/home/external_links.html', {
18            'external_links': self.external_links,
19        }, request=self.request)
20
21@hooks.register('construct_homepage_panels')
22def add_org_moderation_panel(request, panels):
23    panels.append(ExternalLinksPanel(request))

We start with creating a class called ExternalLinksPanel which takes a request object in the constructor. It also implements the render method which performs the rendering.

We then register a hook called construct_homepage_panels which is triggered when Wagtail creates the admin homepage panel. We simply add our custom panel to the list.

To finish off, we also need to create the template which is in the render method. Pay attention to the location where we store this template because it will be loaded from the wagtailadmin application…

templates/wagtailadmin/home/external_links.html

 1<section class="object collapsible">
 2    <h2 class="title-wrapper">External Links</h2>
 3    <div class="object-layout">
 4        <table class="listing listing-page">
 5            <col />
 6            <thead>
 7                <tr>
 8                    <th class="title">Link</th>
 9                </tr>
10            </thead>
11            <tbody>
12                {% for link in external_links %}
13                    <tr>
14                        <td class="title" valign="top">
15                            ➡️ <a href="{{ link.1 }}">{{ link.0 }}</a></br>
16                        </td>
17                    </tr>
18                {% endfor %}
19            </tbody>
20        </table>
21    </div>
22</section>

Then restart your server and you should see the panel appear on the homepage.