How to create a custom Wagtail CMS page type?

Creating a custom page type in Wagtail CMS allows you to extend the CMS functionality and tailor it to your specific needs. 

In this example, I will guide you through the process of creating a custom page type called “CustomPage” with a title, body, and additional custom fields.

Step 1: Set up the Wagtail project Assuming you already have a Wagtail project set up, make sure you have the necessary dependencies installed. If not, you can create a new Wagtail project using the following command:

$ wagtail start mysite
$ cd mysite

Step 2: Create the CustomPage model In your project’s directory, open the mysite/home/models.py file (or create it if it doesn't exist). Add the following code to define the CustomPage model:

from wagtail.core.models import Page
from wagtail.core.fields import RichTextField
from wagtail.admin.edit_handlers import FieldPanel

class CustomPage(Page):
    body = RichTextField(blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('body'),
    ]

In the above code, we import the necessary modules from Wagtail and define the CustomPage model as a subclass of Page. We add a body field of type RichTextField, which will serve as the main content for our custom page. We also define the content panels to include the body field.

Step 3: Register the CustomPage model Open the mysite/home/wagtail_hooks.py file (create it if it doesn't exist), and add the following code to register the CustomPage model:

from wagtail.contrib.modeladmin.options import ModelAdmin, modeladmin_register
from .models import CustomPage

class CustomPageAdmin(ModelAdmin):
    model = CustomPage
    menu_icon = 'doc-full-inverse'
    list_display = ('title', 'first_published_at')

modeladmin_register(CustomPageAdmin)

In the above code, we import the necessary modules from Wagtail and our CustomPage model. We define the CustomPageAdmin class as a subclass of ModelAdmin and specify the model and desired options. Here, we set the menu_icon to display a custom icon for our page type and define the list_display to show specific fields in the admin listing. Finally, we register the CustomPageAdmin class using modeladmin_register.

Step 4: Apply migrations and run the server To apply the migrations for the new page type, run the following commands in your project’s directory:

$ python manage.py makemigrations
$ python manage.py migrate

Once the migrations are applied, start the Wagtail development server:

$ python manage.py runserver

Step 5: Create a new Custom Page instance Navigate to http://localhost:8000/admin in your browser and log in to the Wagtail admin interface. You should see the new "Custom Pages" section in the left sidebar. Click on it, then click "Add Custom Page" to create a new instance of your custom page type. Fill in the required fields like title and body, and save the page.

Congratulations! You have successfully created a custom page type in Wagtail CMS. You can now use the CustomPage model to create and manage instances of your new page type. You can further customize the model by adding additional fields or modifying the admin interface according to your requirements.

Note: Don’t forget to restart the Wagtail development server whenever you make changes to the code.

Learn more IT here

Join our IT youtube channel here