Wagtail CMS for Web Development

Andrei Teleron
4 min readJul 8, 2021

--

A free & open-source CMS based on Python/Django and my experiences with it as a developer.

Founded in 2014 and led by the folks at Torchbox, an employee-owned digital agency, Wagtail is a content management system (CMS) that provides an intuitive and sleek interface for content managers, and robust tools for developers. Built on top of Django, Wagtail adopts much of its design philosophy:

  1. Quick Development. A lot of features come “batteries included” such as a user authentication system and inherent security features while leaving incredible room for customization.
  2. Consistency. Wagtail extends much of Django’s classes, while staying true to Django’s architecture and coding style. Those familiar with Django will find it that much easier to pick up!
  3. Loose Coupling. Django & Wagtail’s project methodology encourages regimented organization of code, where each layer is independent and specialized in function.

Over the years, Wagtail has seen a growth of open-source contributors to its platform. With Torchbox at the helm, they all helped to make it a now renowned name in the web-based business solution sphere for companies small and large — with the likes of Google, NASA, and Mozilla readily adding it to their tech stack.

Organizations using Wagtail CMS

Customizable Admin Design

After creating a number of websites with Wagtail, it has crystallized in my mind that it’s my first tool of choice for full stack web development — thanks in large part to its beautifully designed, out-of-the-box admin page.

Example of an admin page for adding new articles

With its poppy animations combined with vibrant orange, charcoal, and deep teal colors, right from the get-go the admin page seems a tier above vanilla Django’s. Wagtail provides good documentation on how to customize it even further to better suit a company’s image, such as changing its base colors and replacing the bird logo with a new one.

Intuitive Explorer for Content Managers

Wagtail contents follow a tree-like structure. For pages, they all have one common root, usually the home page. Like a sprout advancing into adolescence, pages will begin to branch out, encompassing more of the site’s full, envisioned web-space. Wagtail has made this quite easy and snappy to explore, making it a pleasant experience for content managers.

Admin demo

Folders and links to other admin pages can be created for different purposes such as analytics and CRUD operations on vanilla Django models. To assist with content management workflow, admin account permission settings are also readily available in Wagtail and customizable — with features such as group creation and modifying each group’s access level.

Streamfields — a CMS Luxury

One of the main selling points of Wagtail are its streamfields. It’s used like WordPress’ Gutenburg to create non-fixed and varied page structures by adding organized blocks of content together. Each block can house content fields that will map to a specific styling in the published page, and are specialized for a specific function — whether it’s a big brick of rich text, a welcoming call-to-action banner, or a complex card block that contain a mix of images, rich text, and URL links.

Streamfields demo

A couple months ago, Wagtail released a major update (v2.13.0) in which streamfields were rebuilt to use a client-side rendering model via Wagtail’s new telepath library. Drawing inspiration from the react-streamfield library, this adds improved speed/performance, and more productivity options (i.e. block duplication) and am excited in the future to see how they expand its uses.

It’s Based on Django

Wagtail has a Page model, which is essentially a suped-up version of a regular Django model, with built-in features such as native image support, admin mapping, and an api_fields attribute that takes in a list of fields to expose in Wagtail’s powerful, v2 API (built on Django Rest Framework). If not used in a headless application, Page models handle page routing with minimal set up. They can be designed to be created anywhere along the page tree structure, or made available as a child or parent page for certain types of pages.

Regular Django models are also readily accepted for cases that don’t need Page model methods. For example, an ecommerce website may want to create a customer, shipping address, cart, and order model to store customer data that is easily browsable in the admin — all organized in a folder called accounts. To do this, Wagtail adopts a similar method in Django with its special method modeladmin_register().

Wagtail — My First Tool of Choice

My first implementation of a Wagtail website was a space news/blog. And after finishing it, it’s left such a good impression on me that I’ve continued to use it on all my projects thereafter. It has been a pleasure to develop on and would like to thank Kalob Taulien’s YouTube series on Wagtail for helping me get started. For my clients, it is in the hopes that their pleasant experiences with Wagtail CMS will move them to create vibrant, high quality content that their users would enjoy.

--

--

Andrei Teleron
Andrei Teleron

Written by Andrei Teleron

Would like to empower others in their learning journey. Interested in reading, web design, coffee, nature, and doing cool things with family and friends.

No responses yet