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.
This post and my work for WordCamps is sponsored by my employer, WordPress and CMS agency Say Hello.
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.
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.
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.
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.
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.