Canvas can power fully multilingual sites “out of the box” with no configuration. This tutorial shows how to build multilingual sites with Canvas and WPML.

First, a few words about what multilingual sites are.

When we say multilingual, we mean that the same WordPress install holds content in several languages at the same time. Most themes today come with .po files that allow them to run in different languages. Multilingual means, the site includes content in several languages together.

WPML makes WordPress sites multilingual. Authors can write content in several languages. It also loads the correct .po (actually .mo) files, so that the WordPress, the theme and plugins display in the right language.

Installation and Configuration

First thing to do is download and install WPML.

Next, click on the WPML menu to add languages. The setup process includes 3 steps:

1. Choosing the default language (the language in which contents are currently in)
2. Adding more languages
3. Adding language switchers to the theme

Choosing languages for the site

Until here, it’s all standard. Now starts the fun part – the pre-configured setup for Canvas.

Translating Content

Once WPML setup is complete, you can start translating content.

WPML helps you separate between content authoring and translation. Of course, the same person who writes can also translate, but normally, other people would do the translation.

Create new WordPress accounts for your translators. They can have any sort of account type, including even subscribers.

Head over to WPML->Translation Management->Translators and make these users translators.

Adding a new translator

Now that you have translators in WordPress, you can send them jobs. Click on the Translation Dashboard tab, choose the documents you want to translate and send to translation.

Translation Dashboard

WPML will send notification emails to your translators, they will log in and translate in WordPress. Each translator sees a jobs queue and can only work on content that you send for him/her.

Hey, I Didn’t Notice Anything Special About Canvas!

Good catch. This is what happens when things are fully integrated – you don’t actually need to do any setup.

Canvas uses custom fields in posts and custom post types. The custom fields store the SEO data and the custom types hold slides. The theme includes a language configuration that tells WPML all it needs to know, so that when you start translating, WPML includes the right fields in the translation editor.

Editing body and Canvas SEO fields

When you send content to translation, WPML knows which custom fields Canvas uses and includes them automatically. Some fields get translated and others just copied.

Canvas also stores texts in its setup page and WPML lets you translate them.

After you save the options in Canvas->SEO, you can translate these values in WPML->String translation. Go to that page and select the texts from Canvas. Translate and save.

Beyond a Blank Canvas

Chances are you’re using Canvas as a starting point and not as the final theme.

When you add your own custom fields or use new custom types, make sure you tell WPML how to handle them.

You can do that in one of two ways:

Via the GUI – WPML->Translation Management->Multilingual Content Setup. Then, choose what to translate.

Choosing which custom fields to translate

In the XML configuration file – open the file called wpml-config.xml and add your new stuff there.

So… We’d like to launch a new initiative, whereby our themes will be translated into as many languages as possible. There’s obviously a lot of value in this for us and we’d like to reward everyone that actually contributes some translations to the project. How cool would it be to have every WooTheme available in 20-odd languages?

You can help! If you read / write / speak English, as well as another language you can help us out and translate any of the themes we have available. We haven’t limited this to WooThemes-only users, as all of the .po files have been made available here. We think the reward for contributing should persuade enough of you to help us out here…

We would’ve loved to do this ourselves, but unfortunately we’re not as multilingual as we’d need to be to handle this internally. So we’re hoping we can count on all the Woo fanboys & girls to work with us to improve our themes even further!

Before we start

All our themes will support localization and include a language file (.po or .pot file) which contains all the English texts. You can find this language file inside the theme folder in themename/lang/.

Setup WordPress

The first step is to make sure your WordPress config file is setup with your locale. Open wp-config.php and modify the line below, or add it if it is missing. We’ve set it to Norwegian in the example below. See the complete list of language codes and country codes to find your exact locale.

/**
 * WordPress Localized Language, defaults to English.
 *
 * Change this to localize WordPress.  A corresponding MO file for the chosen
 * language must be installed to wp-content/languages. For example, install
 * de.mo to wp-content/languages and set WPLANG to 'de' to enable German
 * language support.
 */
define ('WPLANG', 'nb_NO');

Once this has been done you need to translate the language file in the theme using a plugin.

Translate using Codestyling Localization plugin

Install and activate the plugin and go to Tools > Localization (shown in your language), then follow the instructions on how to translate the theme.

Codestyling Localization plugin allows for easy translation

Updating a theme

If you update your theme to a new version which has an updated language file, you’ll need to rescan your theme using the plugin and then translate the new strings. Find your theme in Codestyling Localization plugin and click the Rescan link to have the plugin update the po file.

Update your PO file by rescanning the theme

After you have rescanned your theme, click Edit to translate any new strings the plugin found when rescanning. Remember to generate a new MO file after you have translated your new strings.

Translating a child theme

If you are using a child theme and have template files in the child theme that needs to be translated, you need to translate this through Codestyling as well. To make the plugin recognize your child theme so it can scan it, you need to add a functions.php file in your child theme (if you haven’t already got one) and add the following:

<?php

// Load the textdomain for translation
load_child_theme_textdomain( 'woothemes' );

?>

Now you can use the plugin to translate your child theme as well!