Wagtail CMS Course | A CMS Framework for Django

Create a new virtual environment, activate it, and use pip to install wagtail and its dependencies. The installation includes Django, then you can proceed to create your project.

Set up a new Wagtail project, create a blog, run migrations, and create a superuser for the admin to prepare the development environment.

Walk through the Wagtail environment, exploring migrations, base settings, templates, and static files; examine page models and search views, and distinguish development versus production configurations.

Explore Wagtail page models as the central concept and structure for your project. Add fields for true content management and grasp the built-in search feature and its interaction with pages.

Discover how Wagtail's page framework uses page models to define content fields and build a blog with a blog index page and its child blog posts, enabling routing like /blog.

Explore how Wagtail uses a home page model that inherits from page, creates templates, and manages content via a Django admin-like interface, including title editing and publishing workflows.

Add and edit fields on the home page model using Wagtail's FieldPanel and content panels, then run makemigrations and migrate to enable editing in the admin.

Add an image field to a Wagtail page using the image chooser panel in the admin UI, without coding. Render the image in the template with a 400-pixel width.

Explore how Wagtail's rich text field lets admins format content and render as html in templates, using core tags and a rich text filter for headings, bold, and italics.

Discover how stream fields in Wagtail enable rich content with blocks like heading, paragraph, and image, enabling admins to mix content freely within a single field.

Learn how Wagtail's search app indexes pages and returns results via a get-based query, displaying links to matched pages and their content through the search templates.

Explore building a Wagtail blog from scratch by creating blog page models and a blog index model, then dive into styling and understanding the framework’s structure and intent.

Create a wagtail blog project by setting up a virtual environment, installing wagtail, running migrations, creating a superuser, and launching the local server to access the site at localhost:8000.

Customize the home page by removing clutter and adding a admin-editable call to action. Create a rich text description and content panels to enable on-page editing in Wagtail.

Create a separate blog app beside the home page, register it in settings, and begin modeling blog content while using the admin section to manage the app's models.

Create a blog structure in wagtail by building a blog index page with child blog pages and a blog page using a stream field for heading, content, and images.

Create wagtail blog templates in templates/blog, adding blog_page.html and blog_index_page.html, extend base.html, and define block content to manage routing and display.

See how the Wagtail admin organizes pages as a tree, with home and a blog index as a child, using slugs to form nested URLs like /blog.

Open the wagtail admin dashboard to create and edit blog pages, including home, blog index, and individual posts. Use stream fields and include_block to render content, set slugs, and publish.

Demonstrates building a Wagtail blog: output post titles and descriptions from stream fields, loop through blog index children with get_children, filter by live, and link posts via dot specific.

Modify the blog index template to wrap the title in a link to the post page using page.url and post.specific, loading wagtail core tags to access post data.

Learn to style a Wagtail blog using Bootstrap, building a navigable blog with a navbar, search, and an index plus post pages, delivering a polished, deliverable blog.

Style your Wagtail blog with Bootstrap by adding the external CSS, building a nav bar with a search feature, and placing JavaScript at the end of the body.

Add a bootstrap navbar to the wagtail site with a single blog item, a dark brand bar, and a search form that submits to /search via get using query.

Style the home page with Bootstrap components such as a jumbotron, container fluid, and centered text to highlight the White House blog's welcome heading and description.

Style the blog index page by centering text, wrapping content in a container, and using a row and full-width column with padding and horizontal rules to separate items.

Style the blog page and blog index in a Wagtail project using container layouts, center-aligned text, and an em-sized description, then preview with sample content and a styled search page.

Style the search page with bootstrap utilities, aligning the search bar inline, applying container, row, and column layouts, adding margins and dividers for clean, centered results.

Finish the course by inviting student feedback, offering deeper explanations on Wagtail features, and encouraging questions and future topic ideas for ongoing learning.