🐥 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

from wagtail.core import hooks
from django.template.loader import render_to_string

class ExternalLinksPanel:
    name = 'external_links'
    order = 200

    def __init__(self, request):
        self.request = request
        self.external_links = [
            ('Google Analytics', 'https://analytics.google.com/'),
            ('Google Search Console', 'https://search.google.com/search-console'),
            ('View Site', '/'),
        ]

    def render(self):
        return render_to_string('wagtailadmin/home/external_links.html', {
            'external_links': self.external_links,
        }, request=self.request)

@hooks.register('construct_homepage_panels')
def add_org_moderation_panel(request, panels):
    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

<section class="object collapsible">
    <h2 class="title-wrapper">External Links</h2>
    <div class="object-layout">
        <table class="listing listing-page">
            <col />
            <thead>
                <tr>
                    <th class="title">Link</th>
                </tr>
            </thead>
            <tbody>
                {% for link in external_links %}
                    <tr>
                        <td class="title" valign="top">
                            ➡️ <a href="{{ link.1 }}">{{ link.0 }}</a></br>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>

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