Our friends at Access Now work with partners and supporters all over the world, fighting for cybersecurity and internet access as a basic human right. Although English is used for the majority of their content online, they provide lots of pages in other languages — sometimes only in the language that’s spoken in the country where a campaign is taking place, and sometimes in many different languages, when the campaign is global or regional.
When we built their awesome new site in summer 2016, we had discussions with the Access Now team about how to manage translations on their site. At the time, all they really needed was the ability to differentiate amongst pages in different languages, so we built them a simple tagging system in WordPress.
A year later, they came back to us with new needs: they wanted to provide the same page in eight different languages, and they wanted users to not only be automatically directed to the version of the page in their language based on their browser locale, but also be able to easily toggle between the various translated versions. Because WordPress is so powerful and flexible, we were able to build on top of the work we’d already done, which is one of the things we love about building web solutions rather than, say, designing print brochures — nothing is set in stone!
As we started to tackle the new challenge, we considered adding on one of the well-known, out-of-the-box solutions like Google Translate and WordPress Multilingual Plugin (WPML). Google Translate provides automated translations and WPML provides tools for administrators to add their own translations. However, neither was perfect: they both direct the user to the appropriate translated version based upon locale, but neither provide an integrated interface that allows the site visitor to switch between translated versions.
So we went with a custom solution: We built a new feature on top of the simple language tagging solution, extending it to provide the switching functionality. Previously, the “tag” was simply the name of the language. In the new customization, we added new fields that allow Access to define the language’s native name, its corresponding locale code, and its reading direction (i.e., left to right or right to left, to account for languages like Hebrew and Arabic):
Now, if a user visits a page that is available in a translated version that corresponds to the visitor’s locale code, they will be automatically routed to the appropriate language version. And on each of these tagged pages, a bar with links to the other translated versions (listed in the defined Native Name) is automatically generated:
Access Now can use this new internationalization feature on any future pages, and it is easy for them to add new languages. We’re so excited to help them reach audiences all around the world with their crucial advocacy for cybersecurity!