Course Details

Welcome to Wagtail for Beginners!

This course is designed for developers who are new to Wagtail CMS. Together, we'll create a brand new Wagtail website from scratch, and at the end we'll deploy it to the web. Here's a preview of the final website: Rocketman

If you're unsure whether this course is for you or not, consider the follow topics we'll be covering together, and if you're unfamiliar or not completely comfortable with all of these subjects then it's likely this course is for you.

Here's what we'll be learning:

  • Installation
    • You'll learn how to install Wagtail using venv and Pipenv
  • Create 7 custom
    • Including services, misc pages, testimonials, StreamFields, a custom menu, contact pages, and global site settings
  • Contact pages
    • Creating the initial page and the landing page
    • Customizing contact form options
  • StreamFields
    • Basic StreamFields
    • Repeating StreamFields
    • Custom StreamField validation
    • Table blocks
    • Reusing StreamField components
    • Adding additional logic to StreamFields
    • 2 ways to create StreamFields
  • Custom pages
    • Page validation
    • Custom page fields
    • Working with images and foreign keys to other models
  • Create listing pages to automatically populate content as soon as you create a new page
  • Caching
    • How to speed up your website with caching
    • How to delete caching when you save a page or model
  • Create a custom menu
    • You'll create a sortable menu system from scratch
    • You'll be introduced to Orderables and Clusterable Models
    • Register the menu with Wagtails ModelAdmin
    • Create a custom Django template tag to work with your menu templates
  • Create Django models
    • Use Wagtail as the main admin interface
    • How to turn Django models into reusable pieces of data (Wagtail snippets)
  • Create custom site settings
    • You'll make site settings globally accessible
    • Cache these settings
    • And delete cache when the values are updated
  • Custom image cropping and renditions
    • And .webp image support
  • Creating a sitemap
  • 2 super helpful debugging tools
  • My personal methods for learning Wagtail quickly and efficiently
  • Launch your website on a brand new server
    • Using Digital Ocean and Ubuntu 18 with Nginx and Gunicorn
    • There's a free $50 credit inside for Digital Ocean as well
  • Install an error monitoring service for your live website

Courses bonuses:

Here are some additional bonuses to taking this course.

  • All the source code
  • The frontend build tools to customize the theme
  • A sample nginx config
  • Sample gunicorn files

Course requirements

  • An internet connection to stream the videos
  • You'll need to have Python install on your computer

Additionally, this course comes with lifetime 24/7 access.

If you think you could benefit from a course like this, definitely enrol today and let's get started.


What is Wagtail?
Free Lesson
2m 10s

Let's take a quick look at what Wagtail CMS is, and what it isn't.

Installing Wagtail
10m 50s

In this lesson you'll learn how to install Wagtail using Python's venv and Pipenv

Getting Started
3m 26s

Let's make our websites look the same. If you have a different design you want to work with you can safely ignore this lesson.

Logging into the admin
Free Lesson
2m 17s

Wagtail comes with it's own admin interface. Let's sign in as a superuser.

Wagtail Walkthrough
10m 28s

If you've never used Wagtail before, this might be a helpful video. Skip this lesson if you're already familiar with the Wagtail Admin.

Editing the Home Page
23m 20s

Wagtail gives us a Home Page to start. Let's modify this a little bit to kickstart our new website.

Working with the Base Template
7m 07s

Every template comes from base.html when you start a new project. In this lesson we'll explore this template a bit more.

Services App (and new pages)
20m 19s

We'll create a brand new Django app and create a couple Wagtail Pages from scratch.

Service Page
11m 42s

In our Services app we'll need two custom Wagtail pages. The first one is the Service Page (Service Detail Page)

Service Listing Page
14m 20s

The Service Listing Page is going to be a mostly-automated page that automatically pulls in the available services from all the Service Pages you created in the previous lesson.

Custom Page Validation
7m 36s

Wagtail and Django aren't perfect and they don't know our intentions. With custom page validation we can guide people to enter content properly.

Adding a Header and Footer
7m 32s

Our Rocketman website needs a header (nav) and footer. Let's add those in now.

Adding Debug Tools
15m 48s

Like working in a trade, you need a good set of tools. Let's explore a couple very helpful options for debugging your code like a pro.

Flexible (Misc.) Pages
6m 37s

Most websites need a "general purpose" page. We'll create a new app and Wagtail page just for this. This is the start of our Flexible Page type — we'll add more to it in the future.

Using Django Models with Wagtails ModelAdmin
16m 14s

In this video we'll create a regular Django Model and enable Wagtail's ModelAdmin so we can edit it!

Welcome to StreamFields
Free Lesson
5m 53s

StreamFields are one of Wagtails most unique features. They let you move entire sections of content around your page. In this lesson I'll describe what they are and how they're used.

Creating the StreamField App
3m 05s

StreamFields don't NEED their own app, but to keep our code nice and organized we'll create a new app so we can store all our StreamFields and Blocks in one file.

Your First StreamField
13m 49s

In this lesson we'll create our first StreamField! 🎉

Repeating StreamField Blocks
12m 55s

There's a really nice way to add repeating content in a single StreamField Block. In this lesson we'll dive into Wagtails ListBlock feature.

Simplifying Repeating StreamField Blocks
18m 30s

Wagtail's ListBlock feature is powerful, but it can get REALLY big and hard to read quite easily. Let's separate this out into their own classes and save our sanity.

Custom StreamField (Block) Logic
9m 13s

StreamField blocks can have additional logic beyond the content the user enters. In this lesson we'll explore how to add custom logic and simplify our templates.

Image and Text StreamField Block
12m 51s

Together we'll create a new block that let's us select an image and provide some custom text.

Custom Radio Select Block
4m 30s

Let's swap out a dropdown list for a radio list.

Call to Action StreamField Block
5m 38s

Let's create another fairly simple block that helps guide our website viewers to an action.

Django Models, Wagtail ModelAdmin, and Registering Snippets
9m 51s

Let's integrate pure Django into Wagtail with a plain Django Model. We'll register it with Wagtails ModelAdmin and also register it as a Snippet so we can re-use testimonials later.

Table StreamField Block
11m 22s

Tables are old HTML from last century, and we don't use them too often anymore. But occasionally there's a good reason to use a Table and luckily Wagtail has this built it.

RichText StreamField Block
15m 27s

Let's create a new StreamField block that allows headers, lists, images, bold, italic and much more! No more writing HTML in your CharFields.

Image Chooser Block
6m 19s

Learn how to create a simple StreamField with just an image in it, and how to work with it in the template.

Custom StreamField Block Validation
9m 53s

Occasionally we need to bend the rules a bit — like allowing a content editor to have an external link or select a Wagtail page. Let's limit this so they can't do both.

Limiting Pages
11m 44s

It doesn't make sense to have a Home Page nested under a Home Page. In this lesson we'll limit where pages can be created (ie. Service Pages can only live under the Service Listing Page).

Create a Navigation System from Scratch
17m 47s

Navigation doesn't need to be hard. In this lesson we'll take the slightly more complex route (but not the most complex!) to get an understanding of Orderables, Clusterable Models, and Template Tags.

Navigation Templates
16m 09s

Now we'll work with our templates to display our navigation menu.

Contact Forms: Part 1
19m 38s

Contact forms are important on a website. Let's get the initial contact form setup.

Contact Forms: Part 2
9m 57s

Contact forms are a big feature. We'll finish off our Contact Page in this lesson.

Limiting Contact Form Choices
4m 56s

If you don't want to support every form field type in your contact form, we can remove the ones we don't want and only show the ones we want to support. This is optional.

Adding .webp Image Support
Free Lesson
2m 49s

.webp is a new age image format with high compression and very low quality loss. Google loves these. Most browsers support these. Let's create a .webp image from a regular .png using Wagtail.

Additional Ways to Learn Wagtail
10m 48s

Courses like this are great! But there are other ways to learn Wagtail and in this lesson I'll show you a few different ways I continue to learn Wagtail.

Global Site Settings
14m 29s

Thinks like social media links are often set as a global site setting. This feature allows you access the setting on every page.

Changing the Wagtail Admin Logo
2m 39s

Sometimes the biggest win for your website (or client) is a simple branding change. Using their brand colors and their logo is a big win. Let's swap out Wagtails bird logo for something custom.

Adding Caching
15m 14s

Let's add a form of caching to our website to speed it up. We'll use the simplest and most powerful form of caching in this lesson.

Caching the Navigation and Footer
12m 09s

Navigation menus and footer links often bloat our page with queries that don't change very often. By caching these requests to the database, we can significantly boost our websites performance.

Adding a Sitemap
2m 38s

Search engines look for a sitemap.xml or sitemap.html file. It's a simple file that tells engines like Google which pages to scrape and index. Every Wagtail page can be easily added to your sitemap.

Preparing for Launch
7m 08s

Let's get our website ready for production by working with our file. We'll also install an error monitor application to help us log and debug issues on our live website.

Launching Your Website
38m 33s

🎉🎉 Let's launch this website! We'll use Digital Ocean, Ubuntu 18, Postgres, Nginx and Gunicorn. We'll setup this new server from scratch 🎉🎉

Sign up for our newsletter

Get notified about new lessons :)

Our Sites