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.

Course lessons

• 1. What is Wagtail? Free Lesson

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

  2m 10s

• 2. Installing Wagtail

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

  10m 50s

• 3. 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.

  3m 26s

• 4. Logging into the admin Free Lesson

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

  2m 17s

• 5. 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.

  10m 28s

• 6. Editing the Home Page

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

  23m 20s

• 7. 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.

  7m 07s

• 8. Services App (and new pages)

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

  20m 19s

• 9. Service Page

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

  11m 42s

• 10. 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.

  14m 20s

• 11. 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.

  7m 36s

• 12. Adding a Header and Footer

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

  7m 32s

• 13. 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.

  15m 48s

• 14. 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.

  6m 37s

• 15. 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!

  16m 14s

• 16. 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.

  5m 53s

• 17. 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.

  3m 05s

• 18. Your First StreamField

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

  13m 49s

• 19. 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.

  12m 55s

• 20. 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.

  18m 30s

• 21. 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.

  9m 13s

• 22. Image and Text StreamField Block

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

  12m 51s

• 23. Custom Radio Select Block

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

  4m 30s

• 24. Call to Action StreamField Block

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

  5m 38s

• 25. 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.

  9m 51s

• 26. 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.

  11m 22s

• 27. 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.

  15m 27s

• 28. 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.

  6m 19s

• 29. 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.

  9m 53s

• 30. 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).

  11m 44s

• 31. 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.

  17m 47s

• 32. Navigation Templates

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

  16m 09s

• 33. Contact Forms: Part 1

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

  19m 38s

• 34. Contact Forms: Part 2

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

  9m 57s

• 35. 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.

  4m 56s

• 36. 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.

  2m 49s

• 37. 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.

  10m 48s

• 38. 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.

  14m 29s

• 39. 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.

  2m 39s

• 40. 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.

  15m 14s

• 41. 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.

  12m 09s

• 42. 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.

  2m 38s

• 43. 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.

  7m 08s

• 44. 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 🎉🎉

  38m 33s