Adding content to an empty multilingual Wagtail site

When cloning our site to a server, all models, forms and business logic is there, but the database is still empty. In many cases there will be a backup of an existing or previous version of the site to fill the database. In this tutorial however, we will quickly recap and document the steps from all our previous tutorials to do this manually. Our site is a multilingual Wagtail site, set up with Wagtailtrans, with a custom navigation menu and language switch and a contact page built with a form builder from Wagtailstreamforms.

There will be no new code, everything is done in the editor. Below are the steps. Before we start, we should check whether the compatibility issue of Wagtailstreamforms is solved; if not, either fork the repository or change the code and document it well.

If you have followed a previous tutorial, we start where we left off: go to the server, enter the virtual environment and type

and in your browser visit the IP-address of your site on port 8000, in our case http://165.22.199.4:8000. Go to the Wagtail admin.

1. Add all languages to the editor

In admin, go to Settings / Languages and add all languages

2. Set up a translatable root site

Go to Pages, click on the house icon on top to arrive at the root, click on 'Add child page' and choose the Translatable Site Root Page model to create a new root. Add a title (e.g. 'Translatable Root') and Publish. Go to Settings / Sites, click on the current site (which by default should be called localhost, but which you can rename), and choose as 'Root page' the newly created Translatable Root page. Save and go back to Pages, delete the Home page (which was the previous 'Root page').

3. Add home pages in all languages

Go to Pages and choose the Translatable Root page, click on Add child page and select the Home Page model. Type a title and an introduction. Go to the Promote tab and change the slug into /en/ (or whatever your default language is) and publish. Edit the home pages in the other languages to have translated content, change the respective slugs into the respective language codes and publish.

4. Upload all images

Go to images, click Add an image and select all images from your computer that you want to add.

5. Create an article index page with some article pages with code blocks, images and video links

Add a child page to the home page and choose the model ArticleIndexPage. Type a title and an introduction and publish. Create an ArticlePage as a child of this page and add text, images, embedded video etc. Add more article pages. Go to the home page and add the article index page to it. Repeat this for the home pages in other languages.

6. Define some themes, create theme pages, add themes to article pages, translate the themes in all languages

Go to Snippets, click on Themes and then Add theme, add some themes and save. Go to Pages, create a ThemeIndexPage and children ThemePages for every theme, add images and text. Go to the home page and add the theme index page to it. Repeat this for the home pages in other languages. Go to Django admin at http://165.22.199.4:8000/django-admin/, click on Themes and add the translations for the themes in all languages.

7. Create the menus main, account, language, translate them in all languages

Go to Snippets, click on Menus and create the menus Main, Account, Language with their respective url's, pages, images, submenus. Go to Django admin to translate them.

8. Add a footer and a company logo

Go to Pages, add text pages for the cookie statement, privacy policy. Go to Snippets and create a Footer menu with these items. Also in Snippets, add a company logo.

9. Create a contact page and add it to the main menu

Go to Streamforms, add a contact form. In the tab Advanced, add a to-address. Go to Pages, create a Contact Page. Add it to the main menu.