Wagtail Workshop: Start and Deploy a Website In 1 Hour

In this one hour workshop we are going to create a new Wagtail website from scratch, create a blog, and deploy it to the internet using Netlify (free!)

How to add localization to your website

Learn how to make your Wagtail website multilingual with different translations

How to contribute to open source

Learn how to contribute to Wagtail.io

Headless CMS: Serializing RichText Blocks

Wagtail stores RichText (WYSIWYG) data as HTML-like code, but it's not perfect HTML. In this video we'll explore how to serialize Wagtail's RichText data into proper HTML.

Headless CMS: Serializing Child Pages (and QuerySets)

In this video we'll add all the blog pages to the blog listing page API response. This can be very helpful for Listing-style pages in your Headless Wagtail website.

Headless CMS: Custom Page Properties

If you want to add data custom data (or a function output) to your headless Wagtail API, you can use a @property. In this tutorial I'll show you how easy it can be!

Custom StreamField Field Validation

Wagtail does A LOT of beautiful things for us, right out of the box. But the

Headless CMS: Serializing Foreign Keys

Wagtail Page's can have ForeignKeys to other pages. In this tutorial you'll learn how to return better ForeignKey data in your Headless Wagtail CMS website.

Headless Workshop (with Vue.js)

Learn how to create a headless Wagtail website using Vue.js — from scratch

Installing Wagtail using Venv

This is a clip from the Wagtail for Beginners course. Learn how to setup a brand new Wagtail project using pure Python. No Docker, no virtualenv, no Pipenv, nothing fancy. We'll use Pythons built in venv command.

Adding User Registration/Login To Your Wagtail Website

Learn how to add user authentication and give your users the ability to signup, login, reset their password and confirm their email addresses.

Changing the Page Display Title

In the Wagtail Admin, we can change what the Pages are called in the Wagtail Page Explorer. This isn't a super popular feature, but it's good to know that this is possible.

Routable Page Categories And Years

Let's take a look at how we can filter blog posts by their URL. Previously we made a Blog Listing Page with the URL of /blog/. In this tutorial we'll add /blog/category/{category_name}/ and filter pages based on the slug in the URL.

StreamField Deep Dive 2: Exploring Common StreamFields

We'll dive into most of the simple StreamFields and explore some of the options they have to offer. We'll also look at ChooserBlock inheritance for the PageChooserBlock, ImageChooserBlock and DocumentChooserBlock.

StreamField Deep Dive: How to find undocumented options

The Wagtail docs can't possibly cover everything, that's pretty unrealistic to expect perfect documentation. So in this video I will show you how to explore StreamField options that aren't always available in the documentation. You can apply what you'll learn in this video to any feature in Python, but we're using StreamFields as an example. Let's learn how to dive into a core feature of Wagtail!

Upgrading Wagtail (to 2.5.1), Django (to 2.2.2) and Django Debug Toolbar

In this video we'll go over upgrading your Wagtail website from v2.4 to v2.5.1 and we'll upgrade Django from 2.1.5 to 2.2.2. As a bonus, we'll explore an issue with Django Debug Toolbar.

Customizing Default Property Values

In this tutorial we are going to learn how to customize default Wagtail Page properties by changing the default help text and field verbose names. We'll also learn how to set a new default field value when you create a new Wagtail Page.

How to Deploy Wagtail to Heroku

Learn how to deploy a brand new Wagtail site to a free Heroku instance.

Custom Admin Tabs

Over time you'll end up creating larger Wagtail Pages with tonnes of fields. That's totally normal. And we can get fancy and group fields together with a MultiFieldPanel, but that still makes one page REALLY long. As an alternative, we can create our own tabs. The "Content", "Promote", and "Settings" tabs at the top of an edited page... we can create our own quite easily. This tutorial will dive into how we do that.

Adding Tags to Pages

In this tutorial we'll discover how to add Tags (with an autocomplete feature) to Wagtail Pages. We'll also learn how to filter blog posts by a certain tag.

Adding Custom CSS and JavaScript to Your Admin Area

Customizing the styling and adding some additional JavaScript functionality to your Wagtail Admin (backend) is often a good idea for user experience and a higher perceived value for clients. In this tutorial I'll show you how to add a custom .css and .js file to your /admin/ area so you can give your clients a truly customized experience.

Ajax Templates

In this tutorial we'll learn how to Ajax a template and have different data (different from a regular GET request) returned to us. This is great for features like: endless scrolling (large blogs) or swapping out data on a page for something new. All without having to refresh your page so it feels very modern.

Enabling Wagtails Styleguide

If you're interested in changing the styling in the /admin/ area of your Wagtail CMS website, or if you're simply looking for a list of Wagtail Icons, the styleguide is where you should be looking. In this tutorial we'll enable the styleguide and look at how some CSS styles are being applied.

Restricting Parent and Child Pages

When you start to create several different page types in Wagtail and you create a child page (a page that's nested under a different page) you'll see every single page is an option. In this video we'll explore how to restrict where pages can live by telling the parent page what types of child page(s) they should expect, and by telling the child pages which parent page(s) they can expect.

Headless CMS: Image Rendition Field

In the previous lesson we created a custom Django Rest Framework Serializer to output JSONified image data in the Wagtail v2 API, including the URL, title, height and width. In this tutorial I'll show you how to to do the same thing but in one line of code using a built in Wagtail class.

Headless CMS: Custom Wagtail Image Serializer

Using Django Rest Framework with Wagtails v2 API, we can customize ANY field the way we want. In this short video, we take a look at creating a new field entirely by overwriting an image, but we also look at serializing (JSONifying) an image field from a ForeignKey inside an Orderable. Don't worry, it's not as crazy as it sounds!

Headless CMS: Exposing Orderable Data and StreamFields

In this tutorial you will learn how to add Orderable model fields to your Wagtail v2 API, and how to add StreamFields to your API response. As with everything in Wagtail, this is a simple task for developers.

Headless CMS: Fetching Data From the v2 API

The Wagtail v2 API is how we can turn our website into a Headless CMS. By default Wagtail will give you specific fields in the form a JSON object. But there are times when you only want certain fields; you might want to exclude or include specific fields in the JSON response. In this tutorial, we'll explore exactly how to do that.

Headless CMS: Exposing Custom Page Fields to the v2 API

In the last lesson we enabled Wagtails v2 API but we didn't have access to our custom fields.. yet! In this lesson we'll learn how in just 4 lines of code we can make a custom Wagtail Page field show up in our API. And it only gets easier from there.

How to Enable the v2 API to Create a Headless CMS

Wagtail comes with a lot of really powerful features. Many features are not enabled by default as to keep your site running quickly and efficiently. One of those amazing features is the Wagtail v2 API, which can return any page, image, document, orderable and StreamField as a JSON response for your SPA/PWA to consume. We'll enable this by adding just 12 lines of code to our Wagtail CMS website.

Using Wagtails save() method to remove template caching

In the previous lesson we discovered how to save sections of a template and reduce the number of queries on any given page. But to delete the cache so that Wagtail CMS could update the page was a very manual task. In this tutorial, we'll learn how to use Wagtails save() method to delete specific template fragment cache from our site.

How to Add Template Caching

Wagtail is a fast CMS. It's built largely for performance, which is why a lot of beautiful features are not enabled by default. In this lesson we're going to take a look at database queries and template fragment caching to speed up our load times (page performance).

Adding Recaptcha to Your Contact Forms

Contact forms are notorious for collecting spam from bots. In this tutorial we'll install a package to automatically add Google Recaptcha to our contact forms. We'll explore how to get the API keys, as well.

Contact Forms

Contact forms are an essential part of many websites. Wagtail gives us a lot of powerful features without having to do very much work. In this tutorial we're going to create a contact form and a contact form landing page. The contact form will have 3 completely custom fields that the content editor can manage on their own. We'll also explore the Forms feature in the Wagtail Admin.

Extending The Draftail RichText Editor

Wagtails RichText editor, Draftail, is very minimal out of the box. There are times when you need to extend it's functionality. Luckily for backend developers, we can extend the Draftail editor by writing a Wagtail Hook in Python. No JavaScript needed! We're create an inline <code> and a centered text feature in this tutorial.

How to Create a Custom Wagtail Menu System

Almost every website has some form of navigation. Wagtail websites are no different. But creating a menu isn't as easy as making top level pages (although that's an option!). In this tutorial we're going to explore how to create a Menu System using a Clusterable Model, an Oderable, a Snippet, and a custom template tag.. from scratch!

How to Paginate Your Wagtail Pages

Pagination is the ability to click through "pages". You most commonly see this on a Blog Listing Page, where you have "page 1 of 4" for example. In this lesson we're going to use Django Paginator right out of the box to add pagination to our Wagtail Blog Listing Page. No 3rd party packages, no craziness, and minimal maintenance. Just beautiful Wagtail and Django working together in 11 lines of code in our Wagtail Page Pagination.

How to only get Parent and Child Class Pages and their Specific Fields

When querying for a Wagtail Page that has child (Subclassed) pages, you'll receive all of the pages in your QuerySet. There are times when you simply want the child pages (all types), a specific type of child page, or just the parent page itself with no children. In this lesson we'll explore Wagtails .not_exact_type() and .exact_type() methods.

Getting Child Page Properties From a Subclassed Page

In Wagtail, and just like in Django, you can subclass classes. In this lesson, we're subclassing a Wagtail Page into 2 child pages. But when we query for all the parent classes, we're also given the child classes in the QuerySet, and the data is somewhat inconsistent because child classes can have unique fields that differ from their parents and siblings.

How to Subclass Wagtail Pages

Subclassing is having a class (in this case it's a Wagtail Page) that can be used for other classes (Wagtail Page's). The parent class has all the common attributes for the child pages, and every child page will inherit everything from it's parent. In this lesson we'll explore that by creating a subclassed Article and Video Blog Page that share a common parent, and then we'll extend the functionality of both subclassed pages by adding new fields.

Setting up Django Shell, Shell Plus and IPython

Django comes with a python shell where you can import your models and test things out. It's not great out of the box, but we can make it better by using shell_plus (installation instructions are inside) and letting IPython take care of interactivity. This is all helpful for learning Wagtail.

Registering Snippets (Blog Category) using Checkboxes

In this tutorial we'll be learning how to register another Wagtail Snippet, but instead of using an Orderable and a SnippetChooserPanel (like the previous lesson) we're going to use a ParentalManyToManyField and a form widget to create Checkboxes in the Wagtail Admin.

Using a SnippetChooserPanel to Select Multiple Blog Authors (Snippets + Orderables)

This is part 2, coming from the previous article/video. In this lesson we'll be using a SnippetChooserPanel to select Blog Authors (a snippet we registered last episode). We'll also add in an Orderable to our Blog Detail Page so we can select between 1 and 4 Blog Authors.

Registering Snippets using Django Models

Snippets are Wagtails way of re-using existing data. For example, being able to select a Blog Author (or multiple authors) instead of having to add a name, image and website for every blog author in every blog post you make; instead you can simply fill out a form once, and re-use the final data with a couple of clicks.

Adding Custom StreamField Logic

There will be times when you need to provide multiple optional fields in a StreamField, and naturally we lean towards using logic in the template. In this video we're going to learn how to pull out template logic and use Python instead. In this example we'll be using a StructValue and StructBlock to return a single URL in the template even though the StreamField has a PageChooserBlock and a URLBlock (pick one and return it).

Adding, Modifying and Removing Sitemap Entries

In this video we are going to learn how to install Wagtail Sitemaps (sitemap.xml) and how to add, remove and modify sitemap data in a Wagtail Page.

Routable Pages

Routable Pages allow us to create "subpages" under any regular Wagtail Page. Essentially, we can create pages with urls that aren't accessible through the Wagtail CMS admin. We'll learn how to implement routable pages, how to add additional context to the new page, how to render a new page template, how to reverse the routable page url in the template and how to reverse the routable page url in the Wagtail model.

How to Add a Blog Listing Page, Blog Detail Page, and Custom Context

In this (long) lesson we're going to cover three main topics. They all go hand-in-hand with Wagtail CMS so it makes sense to learn them all together. The three topics are: Listing Pages, Detail Pages and Adding Custom Context to your pages.

How to Register a Django Model with Wagtails ModelAdmin

In the land of Django and Wagtail, sometimes you need custom Django Models but Wagtail doesn't let you edit these models by default. And personally, I don't believe in giving a client 2 admin dashboards to operate in. So let's add a custom Django Model to our Wagtail website using a Wagtail ModelAdmin.

Adding Global Site Settings to Your Wagtail Website

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.

How to use Orderables in Wagtail CMS

Discover how to use Djangos Inline Models within a Wagtail Page in a feature called Orderable. Orderables let you add movable content to your page without needing a StreamField. In this video, we'll create a Bootstrap 4 Image Gallery on our Home Page model using an Orderable.

How StreamFields are Saved in the Database

StreamFields in Wagtail CMS are considered to be a complex data type. In this video we're going to explore how it's stored in the database and what it looks like to get a better understanding of how a StreamField is saved and used versus a regular Django field.

Creating a Call to Action StreamField

In this video we'll learn how to create a brand new StreamField using a StructBlock to create a Call to Action section on your page. And then we'll leverage the power of StreamFields by placing this code on a second page so we can re-use all our template and logic in two (or more) places.

How to Use ListBlocks to Create Repeating StreamField Content

Occasionally you'll want a StreamField that can have multiple repeating content areas. A good example is the design component known as a Card. In this lesson we'll explore a ListBlock to enable us to create unlimited cards with custom data, ImageChooserBlock, PageChooserBlock and how to loop through a ListBlock in your Wagtail CMS template.

How to Add a Basic StreamField to your Wagtail CMS Page

In this lesson we are going to learn how to add a basic StreamField to a a generic Wagtail CMS Page. We'll create a new app from scratch, and this StreamField will have a title and text (using StructBlock), a custom template, and it will lay the foundation for the next lesson which covers inheriting RichTextBlock and modifying the features it can have.

How to Add a RichText StreamField to your Wagtail CMS Page

In this video we are going to learn how to create a RichTextBlock StreamField, and then we're going to duplicate that StreamField and limit the number of features the editor gives us.

How to Add a New Wagtail Page From Scratch

In this video we're going to explore how to add a new app to our Wagtail CMS website, how to install it, and how to add the custom page model. We'll be creating a brand new Wagtail Page from scratch.

Adding a Bootstrap 4 Theme to Our Wagtail Website

Learn how to quickly add a free Bootstrap 4 theme to your Wagtail CMS website. With just one line of code we can import and entire theme. We'll also add styling, a navbar, and a background image.

Installing Django Debug Toolbar

Learn how to add one of the most useful Django debugging tools into your new Wagtail project. We'll go through the installation docs, learn how base.py, dev.py and production.py work together, and how to install Django Debug Toolbar.

Setting Up RichText Streamfields

In Wagtail you can have two Richtext areas: a model field and a StreamField. In this article we'll cover the Streamfield type.

Adding a Banner (Part 1)

Every modern website has a banner. Often it comes with a title, subtitle, an image and an optional call to action button. In this tutorial we're going to add all 4 of those to our Home Page. Includes:

Adding a Banner (Part 2)

In this video we learn how to access Wagtail Images, get Bootstrap 4 setup as our frontend framework, how to load Wagtail template tags, and how to make Richtext show up as Richtext. This is the secon

Getting Started With Your First Home Page

Learn how to work with Wagtails default Home Page class, and how to extend it with a simple Django model field. WE'll also explore a custom template and how to extend it.

How to Install Wagtail Using Pipenv (in less than 6 minutes)

Lots of Python developers use Pipenv to setup projects and separate their dependencies from their local machine. In this video we'll install Wagtail from scratch. (Step by step instructions are inside

Setting Up A RichText Content Area

In Wagtail you can have two Richtext areas: a model field and a StreamField. In this article we'll cover the model field type.

How to Install Wagtail with Docker

In this article we're going to learn how to get a Wagtail website setup and running with Docker.