To run a truly multilingual site your theme must be multilingual as well. Instead of repeating our textbook explanation of how to build a multilingual WordPress theme, we’re going to go over a live example.
We’ll go over the theme used for nadelspiel.com, a German site about hand made needle sewing.
Things that need to change to go multilingual
nadelspiel.com uses a theme based on the very popular arthemia theme. It mixes between a magazine and a blog.
nadelspiel’s theme needed several changes in order to become truly multilingual:
- Like all arthemia based themes, category IDs are hard coded to the theme’s PHP. WPML assigns a different ID to translations, so these hard coded IDs needed to be changed to dynamic IDs.
- All the texts in the theme needed to wrapped in gettext calls, so that they’re translated using the theme’s .mo file.
- The home link needed to change, so that it points to the home page in each language.
- A language selector needs to be inserted.
We’ll go over each of these items and show how the theme’s files changed.
Hard coded category IDs
This is probably the biggest challenge when it comes to running multilingual sites that use complex themes. The arthemia theme includes a special featured articles box and also highlights certain categories. To do this, the category IDs are hard coded in the theme’s index.php file.
Since in WPML, translations for the category will receive different IDs, some translation is required.
<?php query_posts("showposts=1&cat=NN"); $i = 1; ?>
<?php query_posts("showposts=1&cat=".icl_object_id(NN,'category')); $i = 1; ?>
What this does is use WPML’s ID translation function (icl_object_id), to convert from the category ID in the default language to the category ID in the actual language displayed.
Localization for texts in the theme
This is relatively straight forward. All the texts in the theme need to be wrapped in gettext calls. Then, you create a .po (or .pot) file that includes all the strings to translate, translate them and create a .mo file with the translations.
You can read about this in details in our previous post about localizing WordPress themes.
Changing the link to the home page
Normally, when you click on the site’s logo at top left corner of any page, you get to its home page.
When the site runs in a single language, its home page is found in the Blog address (URL) in Admin->Setting->General. The theme can access this value by reading get_option(‘home’), so normally people implement the home page link using:
<a href="<?php echo get_option('home'); ?>/"
To adapt the home page so that it points to the correct URL per language, this needs to be changed. WPML supplies its own home page URL function, which we’ve used for nadelspiel as well:
<a href="<?php echo icl_get_home_url() ?>"
You can read more about this where we talk about the home page link.
Adding a language selector
nadelspiel’s theme includes multiple widget zones, so adding WPML’s drop-down language switcher is very simple. We just add it to one of the widget zone and we’re done.
In case you need fancier language switchers, like a horizontal list of all languages, you can add a custom language switcher.