How to Add a New Wagtail CMS Page From Scratch

A FlexPage is a Flexible Page, Generic Page, Basic page, it goes by several names. There isn’t anything fancy about it, so it lets you customize pages the way you need it to be.

The same Django command is used to start an app:

python3 manage.py startapp flex

Untitled

Largely for wagtail sites you don’t actually need views, you may want to split it

. you might want to split additional logic into views, especially if you plan on making an API, but we only need models to create pages for our website.

Don’t forget to add your new app to base.py:

INSTALLED_APPS = [
    "home",
    "search",
    "flex",

This app won’t be editable in the admin page yet. We have to put it in models.py!

from django.db import models
from wagtail.admin.panels import FieldPanel
from wagtail.models import Page

class FlexPage(Page):
    """Flexible page class"""

    template = "flex/flex_page.html"

    # @todo add streamfields
    # content = StreamField()

    subtitle = models.CharField(max_length=100, null=True, blank=True)

    content_panels = Page.content_panels + [
        FieldPanel("subtitle")
    ]

    class Meta:
        verbose_name = "Flex Page"
        verbose_name_plural = "Flex Pages"

FieldPanel takes the field and puts it in the admin so you can edit it, otherwise it just sits in the database and doesn’t do anything.

Before we can edit, we must remember to make migrations for our new app!

Untitled

Now in Admin you can add a new page

Untitled

Inside this page you can change the fields that have been created in models.py

Before we visit the page, we need to define the template html file.

{% extends "base.html" %}

{% block content %}
    {{ self.subtitle }} is the subtitle
{% endblock %}

Untitled

You may now visit your site to see your template!

How to Add a Basic StreamField to your Wagtail CMS Page