Tutorial Summary

Most websites have social media icons in their footer and often several other links and icons that are global across the entire website. In this video we explore how to enable that with Wagtails settings context processor.

#site_settings/models.py
from django.db import models

from wagtail.admin.edit_handlers import FieldPanel, MultiFieldPanel
from wagtail.contrib.settings.models import BaseSetting, register_setting

@register_setting
class SocialMediaSettings(BaseSetting):
    """Social media settings for our custom website."""

    facebook = models.URLField(blank=True, null=True, help_text="Facebook URL")
    twitter = models.URLField(blank=True, null=True, help_text="Twitter URL")
    youtube = models.URLField(blank=True, null=True, help_text="YouTube Channel URL")

    panels = [
        MultiFieldPanel([
            FieldPanel("facebook"),
            FieldPanel("twitter"),
            FieldPanel("youtube"),
        ], heading="Social Media Settings")
    ]
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            {% if settings.site_settings.SocialMediaSettings.facebook %}
                <a href="{{ settings.site_settings.SocialMediaSettings.facebook }}">
                    <i class="fab fa-facebook-f"></i>
                </a>
            {% endif %}
            {% if settings.site_settings.SocialMediaSettings.twitter %}
                <a href="{{ settings.site_settings.SocialMediaSettings.twitter }}">
                    <i class="fab fa-twitter"></i>
                </a>
            {% endif %}
            {% if settings.site_settings.SocialMediaSettings.youtube %}
                <a href="{{ settings.site_settings.SocialMediaSettings.youtube }}">
                    <i class="fab fa-youtube"></i>
                </a>
            {% endif %}
        </div>
    </div>
</div>
Sign up for our newsletter

Get notified about new lessons :)


Our Sites