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

And here are some bonuses this course comes with:

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

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

Lessons

What is Wagtail?
Free Lesson

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

Installing Wagtail

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

Getting Started

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

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

Wagtail Walkthrough

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

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

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)

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

Service Page

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

Service Listing Page

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

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

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

Adding Debug Tools

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

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

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

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

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

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

Repeating StreamField Blocks

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

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

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

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

Custom Radio Select Block

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

Call to Action StreamField Block

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

Django Models, Wagtail ModelAdmin, and Registering Snippets

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

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

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

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

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

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

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

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

Contact Forms: Part 1

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

Contact Forms: Part 2

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

Limiting Contact Form Choices

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

.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

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

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

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

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

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

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

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

Launching Your Website

🎉🎉 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 :)