You’d be surprised about how complex things can get. It’s very easy to keep testing and validating the same things while overlooking bugs in hidden corners. We found that the best way to uncover and fix bugs is by always testing against something different.

Testing WPML repeatedly with the default theme is like searching for your keys under the flashlight. It’s nice to see that you haven’t broken anything basic, but it’s not going to reveal anything new.

On the other hand, when we test against new themes, we always find something. In some cases, these are real bugs. In other cases, those are missing essential features and in other cases, we learn about usability problems.

For example, this week we worked on Striking Theme, BrightBox and 3 in 1 Business Portfolio. You can see the results here and here. We found a couple of bugs in both WPML and in the themes and now they’re fully compatible. Hurray!

As a result of these bug fixes and improvements, many developers using WPML are getting a better experience for other themes. When we carefully debug themes, it’s like a sterile operating environment. We turn on WP_DEBUG and pay attention to every single notice. Even if it’s not visible on the screen, it still shouldn’t be there.

These innocent-looking notices can manifest into serious problems under other conditions, so paying full attention to them helps save valuable time later.

Get Your Theme Vendors to Play With Us

When we check which theme authors cooperate best with us, we often find messages about WPML in their support forums. It’s much easier to get the attention of (very busy) theme developers when they already know that their clients are asking for multilingual support.

Then, when we contact them, we’re greeted with open arms and warm cooperation. We saw that with the great team from Headway and from WooThemes. As a result, both WPML and their theme got a great boost forward and clients get a great experience. Whatever time we’ve spent investigating their code, we already made back in support.

If you read through our support forum, you’re going to see very few support requests for themes that we’ve handled. You spend the time once and enjoy the benefits for months.

So, if you’re using a theme framework that hasn’t been fully tested with WPML, head over to their support forum and mention WPML. When you hear back the slightest sign of interest, let us know and we’ll initiate contact. A short while after this, you’ll see that all your issues are magically resolved.

What theme framework are you using? Leave a message and tell us about it!

With dozens of theme development houses and hundreds of commercial themes, it’s impossible for us to test every theme configuration with WPML.

If you’re using a premium theme and want to make sure WPML works with it, and are willing to put in a bit of work, we’ll give you lifetime access to WPML and work with you to make it happen.

Here is how it works:

1. Check the theme compatibility list and see if the theme you’re interested in is not covered already.
2. Contact us and tell us which theme want to be responsible for.
3. We’ll send you the current development version of WPML. This version always includes the most up-to-date code with fixes for any known issues.
4. Check the theme with WPML and write a report. If anything is wrong, we’ll work to fix it. Most commercial theme developers are happy to work with us, but they too need someone who will help test. That’s you!
5. We create your lifetime WPML account. You’ll be able to download all production versions of WPML, use the forum and keep making sure that things work together.

GetText is a GNU’s text localization package. It allows replacing text in one language with texts in another language.

We’ve already talked about using GetText to build multilingual themes. Now, we’ll talk about how to make the theme’s texts translatable, from the translator’s point of view.

Complete sentences only, please

Translators cannot accurately translate single words. They need to see the entire sentence in order to translate correctly.

For example, what does You must be mean?

In English, the word be has one meaning. But, in Spanish, be mean what you are (ser) or where you are (estar). There’s no way a translator can translate this correctly without seeing the entire sentence.

This is the code that’s responsible for the text:

<?php _e('You must be') ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>"><?php _e('logged in') ?></a> <?php _e('to post a comment.') ?>

So, what do we do?

Using full sentences with placeholders

What we’ve actually done in this example is concatenate several parts into a sentence. The way we did it broke the sentence into different pieces, losing all meaning in the process.

Here is this same thing, built with a single sentence a placeholder:

<?php printf(__( 'You must be <a%s>logged in</a> to post a comment' ), ' href="'.get_option('siteurl') . '/wp-login.php?redirect_to=' . urlencode(get_permalink()) . '"') ?>

What we’ve done is:

1. Create one large text that includes a placeholder.
2. Use printf to replace the placeholder with an actual value.

The translator now needs to translate this sentence:

You must be logged in to post a comment

The translator can easily translate this entire sentence.  No questions to ask and no problems translating!

Besides being easier to translate, we need to remember that in different languages words appear in different order. Supplying the complete sentence with placeholders will allow the translator to flip the order of words and produce grammatically correct (and sensible) transaltions.

Really advanced case (appears in every WP site)

Look at this PHP code. It appears in almost every WordPress site in the comments section.
<h3><?php comments_number(__('No Responses'), __('One Response'), __('% Responses') );?>
<?php _e('to') ?> &#8220;<?php the_title(); ?>&#8221;</h3>

The translator would have to translate the word to. But, it’s impossible without understanding how to is used in the sentence.

The word to is part of a sentence, which would be:

3 Responses to new widgets

Once the translator sees the entire sentence, it all becomes clear and easy to translate.

To turn this into a single sentence, we’ll use this PHP code:
<h3><?php printf(__('%s to %s'),
get_comments_number_ml(__('No Responses'), __('One Response'), __('% responses') ),
'&#8220;' . get_the_title() . '&#8221;')?></h3>

This code produces a full sentence to translate. Now, the translator can produce correct translation to your comments heading.

Note: we’ve replaced the standard WP get_comments_number with an identical function that returns the comment count as a value and doesn’t echo to the screen. You can download this PHP code from get_comments_number_ml.zip.

What about your themes?

Are your multilingual themes built for correct translation?

An easy way to test is to open your .po file in poedit and review the strings. If you’re seeing anything that isn’t clear by itself, look for it in the source and revise.

In this guest post, Wolf-Dieter Grabner, tells about building a multilingual corporate site using WordPress, Thesis theme and WPML.

Wolf-Dieter gives both the why and the how, which are equally interesting. It shows how WordPress is used as a time saving tool for both the web developer and the client.

The Client

SBA Roll Shop Solutions is one of the leading manufacturers of roll grinders. While most of us haven’t seen these high precision devices in real life, a lot of everyday products like paper or metal foils depend on extremely even rolls.

In January 2010 SBA approached me through one of my clients, asking me for a new homepage, as the old one was still based on frames and static HTML pages.

We had a short time available, because there was an upcoming conference in South America that the company was going to attend so designing the website first and writing the content afterwards was not a good option. I supplied the members of the company’s marketing with a basic setup of WordPress and Thesis and they could easily start writing the content right away.

WordPress and Thesis

What I really like about WordPress is the ease of use in comparison to other content management system for this type of site (for example Typo3 or Drupal). If you can use a text editor or word processor, you’re ready to use WordPress. Thanks to plugins like WordPress Multi Language (WPML), even very complex sites work surprisingly well.

Clients often have problems imagining a prototype or draft version if is looking too rough and unfinished. After using quite a lot of open-source and custom-made templates, I have been switching to Chris Pearson’s Thesis Framework for all recent projects: I find it to be the best solution to design prototypes. It is very easy to customize, once you are accustomed to the use of the custom CSS file and the template’s hooks system. By keeping the template and the adaptions for the individual site separate, updating the template does not imply any changes to the site.

Going International

Right from the start, SBA wanted the site to be available in multiple languages. About one month after the English version, also the Chinese version went online; German will follow.

Setting up WPML took about five minutes. Apart from choosing the languages, almost nothing was changed from the defaults.

Using WPML with Thesis

Thesis’ default drop-down menu is quite nice as you can rearrange the items in the theme’s preferences and also rename pages. Nevertheless, it does not work with WPML right out of the box: it’s showing all languages of an individual page at the same time instead of just the current language.

As an alternative, one can use WPML’s drop down menu but it does not support more than two levels, which was not meeting the client’s requirements. Navigo 1.2 offers XHTML strict output, works with WPML and offers custom classes and IDs for formatting the drop down menu. It proved to be a nice companion to Superfish, a jQuery enhanced drop down menu.

Using Thesis custom_functions.php, the navigation can easily be added to the template:

Adding your own Navigation to Thesis

function custom_thesis_nav_menu() {
    echo ('<div id="top-nav"><div id="top-nav-fix">');
    if(function_exists('navigo')) {
      navigo('sort_column=menu_order&level1=sf-menu&level2=l2&level3=l3');
    }
    echo ('</div></div>');
}

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_html', 'custom_thesis_nav_menu');

The example shows a simple function that’s creating the needed nesting and also calling navigo with some parameters to get the desired markup.

After removing the default Thesis navigation, the new function is added to the appropriate hook. Two div-tags were used to fix the position of the drop down menu even when scrolling the page. After adding the Superfish CSS markup to the template’s custom.css file, everything works nicely. When not pinning the menu to the top of the page, you can of course use thesis_hook_before_header for it. The following source snippet allows you to use the default drop down menu of WPML with Thesis:

function thesis_navigation_wpml() {
    do_action('icl_navigation_menu');
}

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_header', 'thesis_navigation_wpml');

Breadcrumb Navigation

Because of the large number of pages, we have also added WPML’s breadcrumb navigation to the site. Again, by using custom_template.php, it’s a matter of minutes:

function custom_thesis_WPMLbreadcrumbs() {
    echo ('<div id="breadcrumbs">');
    do_action('icl_navigation_breadcrumb');
    echo ('</div>');
}

add_action('thesis_hook_before_content', 'custom_thesis_WPMLbreadcrumbs');

Add some custom styles to custom.css and you’re done.

Experience and next Steps

WPML works just the way it should – even details like the XML sitemaps plugin. Being able to teach via Skype a Chinese sales person how to use the tool for translating the site is certainly a good thing.

About the author

As a photographer with an engineering background and a business degree, Wolf-Dieter Grabner regularly works for clients like Coke, Universal Music, the Vienna Musikverein or Austrian petrol company OMV.

He’s lecturing visual communications at Linz University for Art and Industrial Design and still, he enjoys working on web projects a lot. One thing all his jobs have in common? Changing perspectives and bringing new views.

How we’re doing it

No, we’re not crazy. We’ve built a powerful resource file localization system, we’re using it ourselves and for a tiny additional cost we can offer free translation for anyone who needs it.

We’re localizing our own themes for wpml.org and icanlocalize.com and we’ve ‘discovered’ that other themes share most of the texts. Stuff like leave a comment, page not found and other texts just repeat in all sites.

Now that we’ve added about a dozen themes (first one is Unsaid Words from our friends at VivaThemes), each new theme includes just a few more words to translate. The rest of the theme’s strings are already translated.

Free translation for your themes too

Let’s start with the fine print. To get free translation for your theme, it needs to meet a few requirements:

• The theme needs to be localization ready (all strings wrapped in gettext calls).
• The theme’s text are in English.
• WPML should run correctly with the theme. If the theme uses standard WordPress API call, it should be fine.
• We’ll only work with friendly people.

Passed all tests? Let’s start!

1. Create a partner account. It’s free and takes a minute.
2. Open a support ticket, tell about your theme and attach it to the ticket.
3. We’ll create a new page for you in our theme localization project. Here’s an example – Unsaid Words translations page.

The video (3 minutes)

www.youtube.com/watch?v=B0B4AD4FC6CC4161

Steps to follow

1. Go to the WPML menu and click on Advanced.
2. Go to Theme localization.
3. Select to translate the theme using WPML.
4. Make sure that the language locales are set correctly and that the WordPress .mo files are found in wp-includes/languages.
5. Review your themes strings and click to translate untranslated strings. This will send you to WPML String translation page.
6. Click on translations, next to each string, translate and save.

Any edits that you make in WPML’s translation interface will appear in the site immediately. You don’t need to upload anything or change anything in the theme.

To work, the theme needs to be multilingual-ready. All strings need to be wrapped in gettext calls and have a textdomain argument. This is already standard practice for most WordPress themes. If you’re creating your own theme, you can check out the post about how to build a multilingual-ready theme.

More reading

• Theme localization in WPML’s getting started guide
• Building multilingual themes (the comprehensive guide)

A theme for a multilingual WordPress site needs to have all strings wrapped in gettext calls, but it’s not quite enough. Using gettext in the theme allows it to display in a different (single) language from what it was originally built with.

To run multilingual, the theme needs to to allow visitors to choose their display language and deliver the correct content per language.

A multilingual version for Atahualpa

Let’s start at the end. Here is a demo site powered with a modified version of Atahualpa and here is the modified theme which you can download and use.

What we changed to make Atahualpa multilingual

1. Adding wpml-integration.php to the theme’s directory

wpml-integration.php is found in WPML’s directory under docs/theme-integration. It includes a collection of functions which help turn themes into multilingual.

All these functions are designed to make themes use WPML if it’s active or ignore it if it’s missing. This means that the theme would run multilingual if WPML is available or normally (single language) otherwise.

Added to functions.php:

include dirname(__FILE__) . '/wpml-integration.php';

This statement loads wpml-integration.php and makes it available to all the files in the theme.

2. Adding language selectors

Language selectors make it possible for visitors to choose the language in which the site is displayed. Often, it’s a good idea to add several types of language selectors. Visitors scan the site quickly and look for visual hints to contents in their languages. Different people look at different places, so adding different types of language selectors to different parts of the page will help move visitors find their language.

We added WPML’s drop-down language selector to the sidebar by adding it to header.php:

<?php wpml_languages_selector() ?>

Drop down language selector

We also added a horizontal list of languages to the site’s footer. Many users first scroll all the way to the bottom to see what’s there (and how long pages are), so it’s a good place to tell pages are available in other languages. We added the following code to footer.php:

<?php wpml_languages_list() ?>

Horizontal language selector in footer

Finally, we added a language selector at the end of each post. This adds a sentence to each post, telling in what other languages it’s available. Added the following to index.php (which includes a custom version of WordPress’ display loop):

<?php if(is_singular()) wpml_content_languages(); ?>

List of translation languages

3. Making the home page link go to each language’s home

When visitors click on ‘Home’, they expect to get to the home page without switching language. Since each language has a ‘home page’ with a different URL, a single value for all will not work.

Normally, WordPress themes calculate the address for the ‘Home’ page based on the ‘Blog URL’ value set in the admin page. WPML created a function that calculates the correct home address according to the display language.

We replaced get_option(‘home’) with wpml_get_home_url(). Also, the get_option(‘home’) function returns the site’s localication without a trailing slash (/), so themes add it manually. WPML’s function includes this slash (there’s a long story behind this).

To do this change, we had to edit two files. Modified functions/bfa_get_options.php and change:

$bfa_ata['get_option_home'] = get_option('home');

into

$bfa_ata['get_option_home'] = wpml_get_home_url();

Also, edited functions/bfa_header_config.php and removed the trailing slash from the home page link:

'<a href="' . $bfa_ata['get_option_home'] . '">' . $bfa_ata['bloginfo_name'] . '</a>'

4. Really advanced – translating texts users enter in the theme admin screen

Atahualpa allows controlling some texts through the admin screen. This is a great thing which allows to manage the site without editing PHP files. WPML can translate these strings too using its String Translation mechanism.

To do this, the theme needs to tell WPML which strings need to be translated and then display the translation if it exists.

When users go to the theme’s admin screen, update the texts and click on Save, the function bfa_ata_add_admin from functions/bfa_ata_add_admin.php is executed. We added the following section to it (starting at line 11):

global $wpml_translatable_strings;
 foreach($wpml_translatable_strings as $wpml_str ){
   if(isset($_REQUEST['bfa_ata_'.$wpml_str]) && trim($_REQUEST['bfa_ata_'.$wpml_str])){
    wpml_register_string('atahualpa theme', $wpml_str, stripslashes($_REQUEST['bfa_ata_'.$wpml_str]));
  }
 }

What this does it run through a list of strings defined in the global variable $wpml_translatable_strings. It registers each string in WPML’s string translation list.

The first argument is the context for the strings. Any name would go, but you should select a name that describes the strings. The second argument is the name for the string (doesn’t get translated). The last argument is the value of the string – gets translated.

To display the translations (if they exist), we added the wpml_t function to functions/bfa_get_options.php (starting at line 204):

global $wpml_translatable_strings;
foreach($bfa_ata as $k=>$v){
   if(in_array($k, $wpml_translatable_strings) || $__first){
    $bfa_ata[$k] = wpml_t('atahualpa theme', $k, $v);     
  }
}

This code is run when the site is displayed to visitors. It will loop through the list of strings, check if it’s been registered for translation (in_array) and if so, get the translation. The wpml_t function will return the translated string in the current language, if translation exists, or just return the original string if there’s no translation.

Turning other WordPress themes multilingual

We’ve already done similar work on iNove and Arras and are planning to convert more themes to multilingual.

Our intention is to provide ready-to-use multilingual themes and help you build your own multilingual-ready themes. Using the techniques we described here, you can build themes that will run multilingual when WPML is available or in a single language without WPML.

If you’re building themes and need help turning them multilingual, feel free to open new threads in the forum.

You can also make money (really passive income) by adding multilingual support to your themes. We’ll talk about including affiliate IDs in themes in the next post.

To find themes you can google ‘WordPress themes’ and get enough feedback to keep you busy for days. Instead of the google approach I usually go first to the themes section of WordPress.org. As I write this there are 532 themes available for download at WordPress.org.  A great source for new themes is weblog tools collection which highlights a collection of new themes every week or so.These are sources for free themes, premium themes are the subject for another post.

When you are looking for a theme as a CMS application the features to consider are different than for a theme that will be used for a blog. Two features that will be most important for your WordPress website will be the page template (pages will hold most of the content of your site) and the menu system (websites usually need a more extensive navigation system than a blog). To illustrate these points I am going to discuss a couple of sites I have built and why I chose the theme they use.

My first WordPress CMS site was for my wife’s ceramic studio, Pintalo Tu. My search for a theme led me to the Drikatruu Jelly theme. The Jelly theme was designed to use as a CMS and gives the beginning WordPress website designer lots tips and directions on how to modify the theme to fit the user’s desires. Besides the very informative website the theme is well documented in the PHP and CSS files to help make many of the typical changes to personalize the theme. I liked the theme for the all white style to highlight the colors in the content. The horizontal menu was fine for the simple nature of the site. One nice feature of the theme is an additional page template without the sidebar.

For my next site I wanted to get away from the typical WordPress layout of header, main column and 1 or 2 sidebars. I ended up going with a premium theme from iThemes. The Business Card theme comes with 6 color combinations. The layout of the theme and site is compact and I have used nested pages to guide readers through the site. I like the fact that the entire home page fits on the screen (or close). The picture rotator on the top of the main column is definitely a plus for a real estate oriented site. I would like to have a more robust menu in the side bar and I will be working on that in the near future. You can see how the theme worked out for my site here.

These examples are from the someone (me) who has very little programming knowledge and was able to put together WordPress websites that accomplish my purpose. For a truly top-drawer looking WP based website I suggest finding a designer that specializes in WP to give you something really unique (sounds like another upcoming post).

Finally, before the fun of installing WordPress and trying out a bunch of themes make sure you have a good outline of the content you want on your site and how you want it organized. That will take you a long way to finding the theme that fits the image you are trying to project.