• Documentation

• Installation

What is Wagtail?

Wagtail is an open-source Django Content Management System (CMS) powered by python.

Installation

For Linux/Mac

On your terminal:

• Install wagtail with pip (install pip if you do not have it installed.)

  pip install wagtail

• To verify installation:

  pip show wagtail

Start a new project

• {project-name} could be anything you wish to name your project.

  wagtail start {project-name}

  cd {project-name}

Set up a virtual Environment

• If you have python3, then type python3 instead of python.

  python -m venv .venv

• Activate virtual environment:

  source .venv/bin/activate

• Install all requirements for wagtail in venv:

  pip install -r requirements.txt

Set up the server

• Start the server

  python manage.py runserver 0:8000

• Now you will see "unapplied migrations", so hit 'ctrl+C' to quit the server and type:

  python manage.py migrate

• Start server again

  python manage.py runserver 0:8000

NOTE: If you get an error saying "That port is already in use", then first type:

  sudo fuser -k 8000/tcp

• This will kill the running port process.
• Then start server again.

Localhost:8000

• Now open the localhost:8000 on any browser.

Set admin user

• Quit the server 'ctrl+C'.

• Then type:

  python manage.py createsuperuser

• Enter the username and password.

• Run the server again.

• Go to localhost:8000.

• Click on admin login.

• Enter the username and password to sign in.

Edit the Home page

• Open the project folder with VS Code or any IDE you use.
• Go to home/templates/home/home_page.html file
• Start editing to see the changes in the home page.

Extend the HomePage model

• On the home/models.py

  from wagtail.admin.panels import FieldPanel

• Under the class HomePage(Page):

  banner_title = models.CharField(max_length=100, default='welcome')

• On your terminal, make migrations:

  python manage.py makemigrations

• migrate the changes

  python manage.py migrate

• Add FieldPanel:

  content_panels = Page.content_panels + [
        FieldPanel("banner_title"),
  ]

Add New Page

• To add a new page,

    python manage.py startapp {page-name}

• Go to {page-name} folder which will be created, under which you will find models.py. Copy the content from home/models.py and paste it on here.

• Change the name of the model and now make migrations

    python manage.py makemigrations

    python manage.py migrate

• Make a new folder under {page-name} folder, name it as templates/{project-name}/{project-name}_page.html
• Copy the content from home/templates/home/home_page.html and paste it here.

Add New Banner

• On models.py, add a new banner by adding (example)

    introduction = models.TextField(blank=True)

• And add

    FieldPanel("introduction")

under content_panels

Add Image Chooser

• In models.py, add

    banner_image = models.ForeignKey(
        'wagtailimages.Image',
        null=True,
        blank=False,
        on_delete=models.SET_NULL,
        related_name='+',
    )

• and then in content_panels, add

    FieldPanel("banner_image")

• Make Migrations

    python manage.py makemigrations

    python manage.py migrate

Add Social Media Settings

• Make a new app for site settings,

    python manage.py startapp site_settings

• Go to {project-name}/settings/base.py and under INSTALLED_APPS, add
  • "site_settings",
  • "wagtail.contrib.settings",
• Then on the same base.py, scroll down,

    TEMPLATES = [
        "context_processors": [
            "wagtail.contrib.settings.context_processors.settings",
        ] 
    ]

• Then go to site_settings/models.py,

    from wagtail.admin.panels import FieldPanel
    from wagtail.contrib.settings.models import BaseSiteSetting, register_setting

• Then add,

    @register_setting
    class SocialMediaSettings(BaseSiteSetting):
        instagram = models.URLField(max_length=100, blank=True)

        panels = [
            FieldPanel("instagram")
        ]

• Run migrations and open the admin section on localhost:8000, open settings, look for Social Media Settings and add the instagram link.
• Go to {project-name}/templates/base.html,

    {% if settings.site_settings.SocialMediaSettings.instagram %}
        <a href="{{ settings.site_settings.SocialMediaSettings.instagram }}">
            Follow on Instagram!
        </a>
    {% endif %} 

• Refresh your localhost:8000 to see the changes all over the site.

Documentation

Refer the Wagtail Documentation for further assistance: https://docs.wagtail.org/en/stable/