Building a multilingual WordCamp website

After several years of city-based Swiss WordCamps, we have been able to gain the approval of WordCamp Central to hold the first WordCamp Switzerland since 2015. The event will take place at the beginning of April 2023. The organisers decided to set up what we believe to be the first “proper“ multilingual WordCamp website.

One of the main goals of the organisation team is to bring participants from across Switzerland together. This goal is no mean feat, given that Switzerland is divided into three regions, each of which with its own local language: Swiss German, French and Italian.

No plugins allowed

International WordCamp websites all run in a single, huge “multisite” WordPress installation. So that the site remains as efficient as possible, organisers are not allowed to install any plugins to extend the functionality of the site, and have to use one of the standard WordPress Themes. Individual styling for each event has always been restricted to people writing custom CSS and doing their best to use the basic WordPress installation and a few custom blocks to display information about organisers, speakers and so on.

Full-site editing

Thanks to the introduction of full-site editing in 2021, editors have a wide range of possibilities for designing the site. A great deal can be managed and customised using the site editor, and I spent some time earlier this year preparing the look and feel of the event website after mocking-up the site in Adobe XD.

Because I have thousands of hours of experience working with the Block Editor — since 2021 on projects using the Site Editor — I based the design on what I knew could be achieved without any plugins. Even the typography and colour scheme relies on the editing tools baked into the base of WordPress itself.

Design templates for WordCamp Switzerland 2023
Design templates for WordCamp Switzerland 2023

A multilingual WordCamp site

WordPress has been available in many languages for years, but built-in support for multilingual content management won’t be available for a good while yet. Plugins like Polylang add this feature, but as we can’t use plugins in the WordCamp installation, I had to come up with an alternative solution. It quickly became apparent that most of the multilingual requirements could be resolved with manual editorial work.

WordPress Styles Editor

The base colours, typography and spacings are set using the WordPress Styles Editor within the Site Editor. This tool allows me to override the default colours provided by the Twenty Twenty Two theme, including the brown primary and (sparsely-used) blue secondary colours. The Customizer — which remains in use in the WordCamp installation — allowed me to define the use of some custom fonts.

Reusable blocks

I added the English content to the site first, adding Pages containing the initial state of the website in the usual manner. Using the Site Editor, it’s fairly easy to edit the header and footer which appears on every page. But it became immediately apparent that the navigation had to be different on English, French and German pages. I therefore emptied the content of the usual header Template Part and created a block group for the header in each language.

Update January 2022

Since the initial creation of the site, I’ve re-worked the logic and structure so that the header and footer are being loaded via the Site Editor Template Parts as usual. English pages use the template “English Page”, French pages the template “French Page”, and so on. The only concession we had to make was that the links between language versions of the page are now added manually to the Post Content.

The structure of the header remains the same, using a Reusable Block for the navigation in the appropriate language, and using a Cover Block (set to use the Page Featured Image) which contains the Post Title Block.

The header contains the following block structure.

  • Group Block with a custom CSS class name for some styling.
    • Group Block containing the navigation for the current language. This is edited manually using a Navigation Block. The Group Block has a custom CSS class so that I can position it absolutely within the parent block.
    • Cover Block which uses the page featured image as a background and the primary colour from the Style Editor.
      • Post Title Block, which automatically uses the Post (Page) Title.
      • Group Block set to “row” mode to add two side-by-side links. Moved to the Post Content.

I then converted this grouping into a Reusable Block. Reusability is a hugely powerful feature, which allows me to add the “Page header EN” reusable block to any new English page I add to the site. If I edit the Navigation Block within this reusable block, the changes will appear automatically on every page.

I then added German and French versions of this Reusable Block, so that they can be placed on the relevant pages as they are created.

Structuring the content

In order to group the content logically, I opted to set up the page structure to emulate the way in which Polylang groups content URLs together. For example, the /fr/ prefix is a regular WordPress page and is used as the parent page of all French content. This helps editors working in the WordPress editor without the convenience of Polylang.

I then added the translated content of the Pages and built the structure of the site. This gave me a URL for the page content in each language, which I can use to place manual links in the Reusable Block headers. This manual linking between languages takes a little time, but isn’t difficult once you’ve done a few pages.

Standard link editor in the WordPress Block Editor

Where multilingual content isn’t possible

All of the regular Pages in the site can be structured hierarchically, translated, and linked together in the way I’ve described here. The “header” for each Page is a Reusable Block and the Header Template Part is empty.

All content which relies on its own “single” view — News, Organisers and so on — cannot be translated in the way I’ve described here. If we were to publish a news story with one post for each language, and then link them together in this way, they would appear correctly on the site, but there is a down-side which makes this impractical.

News feeds like RSS or emailed news updates would be “spammed” with triplicated content. This isn’t what we want, so I opted to add an alternative header in the Template Editor containing a simpler, reduced navigation which points to the home pages in all three languages. We then add content in all three languages to each individual news story, so that interested people can read and understand everything in their primary language.

Massive thanks must go to fellow co-organisers Michael, Patricia and Michelle for their translation work, and for correcting my own French and German translations.

My work with WordPress

My daily work at Swiss WordPress agency Say Hello largely involves building websites using WordPress: developing custom blocks for the Gutenberg Block Editor, designing sites and page layouts and integrating APIs to pull data from services like Outdooractive and Swiss Parks.

3 responses to “Building a multilingual WordCamp website”

  1. Nick Weisser avatar

    Thanks for sharing, Mark. One day we‘ll have multilingual capabilities in WordPress core. Until then we’ll probably have to build WordCamp websites as you described Gutenberg phase 4 to the rescue.

    1. Mark Howells-Mead avatar

      Thanks Nick. Fingers crossed!

  2. Patricia BT avatar

    Perfect workaround making a non-multilingual site as if it was multilingual :)
    Thank you Mark for everything you do, year after year, for the Swiss WordCamps and communities around the country.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.