Foreign language websites

Introduction

Over the years we’ve built a number of multi-lingual and foreign language websites.  In this post we’ll explore some of the challenges that come with working on foreign language websites and how you might overcome them.  Whilst we’ve used bespoke frameworks, Joomla and WordPress to deliver websites of this nature, this article will focus on WordPress.

Foreign languages can present a number of surprises to native English speakers and many content management systems have grown out of the English speaking world. For example some languages have different forms depending on whether the relationship is formal or informal.  Others have different forms for written or spoken versions of the language.  Even the humble quotation mark varies across languages and we’ve probably all seen variations in how dates are written. WordPress has good support for foreign languages but this can be let down by theme and plugin authors.  At a simple level you can install WordPress in your language or install your language after a default US English install.

Installing a WordPress translation

1.  Visit the translate wordpress website and choose your WordPress version.
2. Select your language then scroll to the bottom of the page.
3. Here you’ll find a rather awkward user interface, choose Machine Object Message Catalog (.mo) from the drop-down list and then click the export text link.
4. A .mo file will be downloaded to your computer, you need to copy this into a languages folder under the existing wp-content folder of your WordPress installation.  The languages folder doesn’t exist by default so you’ll need to create it using sFTP or SSH so that you end up with /path-to-wordpress/wp-content/languages/.
5. After you’ve copied the .mo file into the languages folder go to the WordPress admin screen and choose Settings->General.
6. You should have a new language option in the Site Language drop-down. Select it and press save.

At this point the back-end of WordPress should now appear in your language. In addition the lang attribute on the html tag will have the correct locale set and various core words such as category and post will be translated on the front-end. From here you can add your content in your own language.

Beyond translation basics

If you have plugins or particular themes installed you may find English still appearing on your website.  You will need to download  a translation file for the plugin.  Popular plugins such as Woocommerce will have good language support offering, for example, both formal and informal versions of German. You need to create a plugins folder underneath the languages folder we created in step 4 above.  Download the .mo translation file for your plugin and install it into the plugins folder.  The same is true for themes, you create a themes sub-directory under languages and copy your .mo file into there.

Building your own translations

Sometimes a plugin or theme won’t have a translation.  For example the Woo subscriptions extension only offer informal German and the X theme doesn’t offer any translation at all.  There are two ways of tackling this situation.  If you’ve just got the odd phrase popping up in English (e.g. ‘Not found’ after a search) then you can target those few phrases.  For anything more you’ll want to build your own translation files. We’ll look at both in turn.

A coding approach to translation

If you’ve only got a few phrases to translate this method can be a lot easier and its relatively easy to maintain.  WordPress provides the gettext filter so that you can supply your own translations. Here’s an example:

function ak_change_translate_text( $translated ) {
        $text = array(
                'Search Results for' => 'Suchergebnisse nach',
                'Next page' => 'Nächste Seite',
                'Pages' => 'Seiten',
                'Page' => 'Seite',
                'Previous' => 'Vorherige',
                'An account is already registered with your email address. Please log in.' => 'Es existiert bereits ein Account für diese E-Mail-Adresse. Bitte loggen
Sie sich ein.',
                '%s is not a valid postcode / ZIP.' => 'Keine gültige Postleitzahl!',

        );
        $translated = str_ireplace(  array_keys($text),  $text,  $translated );
        return $translated;
}
add_filter( 'gettext', 'ak_change_translate_text', 20 );

Add this to a plugin or your theme’s functions.php file. In the latter case be aware if you switch themes you’ll lose your translations.  This may be fine if the new theme has full translation support.

Translating with pot, po and mo files

If you need to do a more complete translation then you’ll need to work with these files.  Hopefully the original author has provided a Portable Object Template (pot) file as a starting point.  If they have not you can generate one using wp-cli make-pot. Once you have this file you can open it in poedit to add your own translations of each string present in the pot file. There is also a poedit Debian package.  Themeco have a decent tutorial on using poedit here.  In essence you provide an alternative translated string for every string in the pot.  Once you’ve finished translating poedit allows you to compile your .po file into a machine readable .mo file.  Its this .mo that you will copy to the WordPress languages folder, just as we’ve described above.

One theme, multiple languages

WordPress doesn’t have great built-in support for multi-lingual websites, we’ve seen better results with Joomla years ago. There are a number of approaches, one of which is using Multi-site and having one site per language.  In this scenario (or even one where you have a separate site for each language) there are a number of desirable goals:

• You only want to maintain one set of theme files.
• The theme files should differ only as much as they need to.
• It should be clear where there those differences are.
• It should be easy to deploy the theme across each language.

Here we outline an approach, not a complete drop-in code solution.
In your theme’s functions.php file require a new file where you will keep the language specific changes, named site_specific.php. In this file we set some constants depending on the site URL, although in your situation this may depend on attributes other than URL, e.g. a virtual folder name.

if (strpos($_SERVER['SERVER_NAME'], 'unique_string_for_this_language') !== FALSE) {
        // French site
        define ('SITE_LOCATION', 'FR');
}
else {
        // UK site
        define ('SITE_LOCATION', 'UK');
}

if (SITE_LOCATION == 'FR') {
        define ('PRODUCTS_URI', 'produits/');
        french_translations();
}
else if (SITE_LOCATION == 'UK') {
        define ('PRODUCTS_URI', 'products/');
}
else {
        print 'SITE_LOCATION not set !!!';
        exit;
}

define ('PRODUCTS_URL', get_site_url() . PRODUCTS_URI);


/* 
 * Run only for French site 
 */
function french_translations () {
    french specific code goes here
}

Once the SITE_LOCATION constant has been set we can use it to do any language specific processing.  In our example french_translations() function you can run the gettext filter ak_change_translate_textas described above.

Multi-lingual is not multi-country

A common mistake is using language as a proxy for country.  For example users that choose German could be from Austria, Germany or Switzerland.  However, the legal systems in those countries are not identical.  Products that may be sold in one country may not be sold in another or messages may have to be different.  You may need a different menu for certain countries.  Determine at the start of the project whether you have products/services/messages that do not apply to certain countries and make sure your proposed architecture can support that.

Search Engines and Alternative Language URL Associations

If your site is multilingual, you need to let the search engines know that you have the same content in different languages on different URLs. This is important because search engines can penalise sites which share content with other sites. When you have multilingual versions of the same content we can inform the search engines in several ways. The most common method is to use a link element in the header pointing to the alternate language versions of the URL. For example, you would add a link like this to the British English version of a site that is also translated into German:

Alternatively, you can alternatively set up the URL associations within your XML Sitemap. You will need a sitemap plugin that can support multilingual XML sitemaps but this is currently Google’s recommended method for any medium to large website.

This example shows you how you can mark up the homepage with hreflang notation showing BOTH the English and German URL locations.

The key thing here is that you must choose one method for dealing with multilingual websites. You should either use the OR the sitemap hreflang method and use it site wide. If you use a mixture of the two or try to use both, you will create confusion and you might trigger errors in the search engines.  For more details about how to use XML Sitemaps for alternate languages take a look at the Search Console Guidelines for International Sitemaps.

Need help?

Foreign language websites need not be double-Dutch!  If you need web design or web development in the context of a foreign language please contact us.