What to Consider When Creating a Multilingual Site

Multilingual websites are becoming more and more common these days as WordPress becomes increasing popular and even more powerful with an enormous community. When starting out a multilingual site, there are a number of things to consider and some important elements to keep in mind from the very early stages of the project. In this post, I’ll try and highlight just a few main things, as every site (or Multisite) installation will, of course, vary on a per project basis.

Translation Lengths

Typically, during the design phase the text being used will be your native language or some alternative filler text (lorem ipsum). While this is perfectly acceptable practice, one thing to keep in mind is that many languages around the world have different writing systems. When translating a site for different languages, it’s important to think about margins and padding between elements as well as line heights.

Although it’s perhaps not always possible to know how long each and every word will look once it’s translated, it’s definitely something you’ll want to account for especially when space is limited. In my experience, some languages like Russian and Polish will have words that are 1½ times the amount of space as that same word written in English.

There are a couple of options for when these situations that come up. For example, conditionals can always be added to template files based on blog id or body classes can be added to target specific blogs if you’re doing a Multisite multilingual install. This can become overwhelming and difficult to manage for larger networks, so that’s also something to keep in mind.

Here’s an example of adding a body class for sub-sites for smaller fixes:

<?php
/**
 * Add Body Class for Language Sites
 */
function wds_subsite_body_classes( $classes ) {
        $id = get_current_blog_id();
        $classes[] = 'site-id-'.$id;
        return $classes;
}
add_filter( 'body_class', 'wds_subsite_body_classes' );

Using Plugins for Sub-site Modifications

Another great process that I highly recommend for making major modification to the same template based on certain language needs is to put all site specific changes into a Plugin. Although it’s not a new process by any means, I think it’s something that can be forgotten sometimes. This helps things stay organized and your theme files will be much cleaner overall. Just make sure to add it as a plugin for each site rather than an MU plugin, as that can cause for translation headaches sometimes depending on which plugin you decide to use for generating translations.

As you can see in this example adding conditionals throughout the theme in various places can become very difficult to manage if they were spread throughout the theme:

<?php
/**
 * An example of how conditionals can become difficult 
 * to manage in large Multisite Networks
 */

global $blog_id;
 
if ( '2' === $blog_id ) {
// you see here;
} 
 
elseif ( '3' === $blog_id ) {
// more here;
} 
 
elseif ( '4' === $blog_id ) {
// much more here;

else {
// how this can get out of control quickly with lots of sites in the network;
}

Internationalization and Localization

Once you’re into the development stage of a new multi-language project, you’ll want to make sure Phrases (translating Phrases is better practice than just words) are translation ready throughout the project (plugins and theme). This could be an entire post in and of it’s own, but a couple quick things to keep in mind.  For example, text domains, domain paths, basic strings, variables, plurals, and so much more. It’s all really nicely documented in the codex and developer handbooks and I highly recommend these as really good examples with solid explanations.

Codex

• http://codex.wordpress.org/I18n_for_WordPress_Developers

Themes

• https://developer.wordpress.org/themes/functionality/internationalization/
• https://developer.wordpress.org/themes/functionality/localization/

Plugins

• https://developer.wordpress.org/plugins/internationalization/how-to-internationalize-your-plugin/
• https://developer.wordpress.org/plugins/internationalization/localization/

A Few Issues that can come up with Translations and Characters

Some other issues that inevitably come up are often with languages with accents and different characters when translating. Recently, I came across a post by WPEngineer for character based languages and languages with accents. This post by WPEngineer does a really nice job of explaining how you can address the issue when/if it arises on a project.

Along the same lines, with certain character based languages, you’ll notice font rendering issues depending on which fonts you’re using on the site. There are some workarounds like declaring font weights, or if you’re using Sass, you can create a mixin along these lines:

// ------------------------------------------------------------
// Font Stacks for Non Multi-Language and Multi-Language sites
// ------------------------------------------------------------
 
// Example Font Stack Usage
// @include font(light);
// @include font(normal);
// @include font(semibold);
// @include font(bold);
 
@mixin font($fontstack) {
 
    $wds_font: (
        light: 'wds_font_light',
        normal: 'wds_font_normal',
        semibold: 'wds_font_semibold',
        bold: 'wds_font_bold'
    );
 
    $fallback: (
        light: normal,
        normal: normal,
        semibold: bold,
        bold: bold
    );
 
    font-family: map-get($wds_font, $fontstack), WDS UI, Tahoma, Arial, sans-serif;
 
        html:lang(bg) &, // Bulgaria
        html:lang(cs) &, // Czech Republic
        html:lang(el) &, // Greece
        html:lang(ko) &, // Korea
        html:lang(pl) &, // Poland
        html:lang(ro) &, // Romania
        html:lang(ru) &, // Russia
        html:lang(th) &, // Thailand
        html:lang(vi) &  // Vietnam
        {
            font-family: Tahoma, Arial, sans-serif;
            font-weight: map-get($fallback, $fontstack);
        }
 
        html:lang(zh) & { // China
            font-family: 'Yahei UI', 微软雅黑, map-get($wds_font, $fontstack), sans-serif, WDS UI, Tahoma, Arial, sans-serif;
            font-weight: map-get($fallback, $fontstack);
        }
 
        html:lang(ja) & { // Japan
            font-family: 'Meiryo', map-get($wds_font, $fontstack), sans-serif, WDS UI, Tahoma, Arial, sans-serif;
            font-weight: map-get($fallback, $fontstack);
        }
 
}

With International sites, it’s also good practice to be mindful of excerpt lengths. In English, having an excerpt of 55 words will look a lot different than it would in Chinese since most words are a single character. Not a deal breaker, but certainly something to keep in mind when working with different languages.

Social media is a huge part of most websites, but believe it or not, Facebook, LinkedIn, and Twitter are not always the most popular networks in other countries. If we use China as an example: they use things like WeChat, Weibo, and Yammer more than Facebook or Twitter, so you’ll want to account for that when building out your theme templates, plugins, etc.

This really just scrapes the surface of some of the basics to keep in mind when building and working on Language Sites. There are lots of great posts with information on internationalization plugins to use, ways to generate .po/.mo files and so much more, including this fantastic article on Post Status by Brady Vercher.

When building and designing sites, these are just a few pointers to keep in mind. If you have other experiences, tips or things to remember, let us know in the comments!