WPML: Running WooThemes Multilingual

The WPML plugin allows running multilingual WordPress sites and is fully compatible with all of our themes. In this tutorial, we’ll talk about how to offer multilingual support on your website, how to enter translations and how to create multilingual-ready theme modifications.

Setup

Get the plugin and install it. The setup wizard will guide you through adding languages. You can add or remove languages later as well.

The Languages Wizard

Next step is to add a language switcher, which allows your visitors to toggle between different languages. WPML provides two built-in options for language switcher and also makes it possible for web developers to create their own custom language switchers.

The built in language switchers are:

• Language switcher widget (either a drop-down or open list of languages).
• A footer language switcher, as a horizontal list of languages.

Lastly, go to WPML->Languages to choose which language selectors to enable and style them.

Translating

To translate contents, go to either the list of posts/pages or edit individual posts and pages. In the list, you’ll see ‘+’ and ‘edit’ icons below each language. Click on the ‘+’ icon to add new translation or on the ‘edit’ icon to edit existing translations.

The Pages List

In the edit screens you’ll see similar translation controls, which allows you to add or edit translations while editing contents.

Editing a single post

Here are some good practices for creating solid multilingual sites:

1. Make sure that texts and links are translatable.

The following code snippet won’t be translated automatically:

<a href='<?php get_option(home)?>/support/'>Support</a>

Instead, you need to modify that snippet to use gettext (more info here) and look like this:

<a href='<?php get_permalink($page_id)?>'><?php _e('Support',THEME) ?></a>

We’re getting the actual permalink for the support page from WordPress and getting localizable anchor text. WPML will return the correct permalink of the support page for the display language, so the support link will display and link correctly.

2. Avoid using images as text

Some times, folks use images that have texts. These will make maintaining multilingual sites much harder as the translated images will have to be generated manually for each language. Whenever possible, you should use images as background and place text, as normal text, on top of them.

3. Assume texts can be larger or shorter

When you’re designing the site layout, take into account that texts in different languages has different length. For instance, compared to English, German can be 150% larger and Chinese 50% shorter. Make sure that page layout adjusts well. Elements such as graphics buttons, headings and sidebar should display correctly regardless of the length of the text.