Our approach

The Angel Shark Network has an existing WordPress website so managing the content through this meant we wouldn’t have to build a database for the multilingual content, or a user login system and much of the interface would be helped by existing WordPress functionality.

We used the Advanced Custom Fields plugin to create a settings page which allowed administrators to add some original text (or a template placeholder) and multiple languages for it to be translated into.

We then created a JSON feed of this content as a WordPress plugin for the map to read.

For the static content and the map interface we created template keywords such as ABOUT and HOME which would be filed with the relevant content for the selected language.

When it came to the MachForm this was a bigger challenge. We had very limited control over how the form was rendered so used DOM traversal (via the useful FindAndReplaceDOMText library) to replace translated text on every element of the page (including drop down items, checkbox labels and tables as it’s a complex multi-part form with logic), while keeping the functionality and layout the same.

Caching for performance

Reading from the WordPress database added some unwanted loading time to the map so we cached a local copy of the translations with the map application and provided a simple URL that could be run to update it when the translations changed or new languages were added. This also separated the map from the WordPress system so it wasn’t dependent on it in case of downtime or changes to the WordPress site.

Additional translation features

Apart from automatically creating links to any languages the map and form have been translated into, the header of the site was changed for each translation to indicate the language to the browser.

<HTML lang="es">

This had the fun side effect of translating the Twitter share button into Spanish automatically when Spanish was selected.

We also provided alternate hreflang language links in case the browser or search engine were able to read them to know that translations were available.

<link rel="alternate" hreflang="en" href="/?language=en" />
<link rel="alternate" hreflang="es" href="/?language=es" />
<link rel="alternate" hreflang="cy" href="/?language=cy">