Blog

Hello again everyone! This is a follow-up to my previous post about adding a foreign language section to a WP website. In this post I will share what I think is a cool way to create flags in the header that link to the translated pages and how to work around a problem in WordPress with non-latin characters in the URL (in case that you choose to use these in the foreign language section of your website).

For the sake of simplicity, let’s continue the example from the previous post where the foreign language section of our website is Italian and we already have the Italian templates created (header-italian.php, footer-italian.php, etc.). Now we want an Italian or English flag (or an “Italiano” or “English” sign) to appear only if the page has a translation. We also want only the correct version of the flag to appear – an English flag on an Italian page and vice verse (not both), and we want it to link directly to the translation of that particular page. To achieve this:

1. For each page that is translated (English or Italian), set a custom field (enable viewing custom fields by expanding the “Screen Options” menu in the top right corner of your Dashboard when editing a page or a post and checking the “custom fields” option) called “foreignLangCounterpart” (the name is just exemplary) with a value the URL to the translation of the page in the other language.

For example let’s say that you translated your mysite.com/about-us page to mysite.com/it/su-di-noi. What you need to do is edit mysite.com/about-us to contain a custom field “foreignLangCounterpart” with a value of “mysite.com/it/su-di-noi” and edit mysite.com/it/su-di-noi so that it has a custom field “foreignLangCounterpart” with a value of “mysite.com/about-us”.

2. After you have done step 1 for all couples of translated pages, include the following piece of PHP code that I crafted wherever you would like your flags to appear. Executing PHP code should not be a problem because you would want to include the flags either as part of a template (header, footer, sidebar) or in a widget (in which case you can install the “Executable PHP Widget” as explained in the previous installment of this post). Let’s assume that you want the flags in the most natural position, the header:

In header.php:
ID,’foreignLangCounterpart’,true);
//if yes, display an Italian flag to indicate that the user can switch to the translated page
if(strcmp($langCounterpart,”)!=0)
{
$output = ‘<a title=”Italian Language Translation of Page” href=”‘.$langCounterpart.’”><img src=”http://mysite.com/path-to-italian-flag” alt=”" /></a>’;
echo $output;
}
?>

In header-italian.php:
ID,’foreignLangCounterpart’,true);
//if yes, display an English flag to indicate that the user can switch to the translated page
if(strcmp($langCounterpart,”)!=0)
{
$output = ‘<a title=”English Language Translation of Page” href=”‘.$langCounterpart.’”><img src=”http://mysite.com/path-to-english-flag” alt=”" /></a>’;
echo $output;
}
?>

As you can see, this technique could easily be expanded to accommodate translations in multiple languages. You should only let your content writers know about adding the custom fields, so that they make it a habit, just like adding a title and meta description.

The other issue that I want to address in this post is related to a bug with non-Latin characters in a WordPress URL. For example if you translated your website in Russian, it might be smart from a SEO perspective to have the URLs include Cyrillic characters, such as mysite.com/ru/кири́ллица. The problem is, if you do that, these pages might not get indexed in Google and linking to them might return 404 errors. This seems to be because of a weird issue of WordPress accepting only lower-case percent-encoded hexidecimal URLs and many agents, such as browsers, encoding a URL such as mysite.com/ru/кириллица with upper-case hexidecimal. You could try different solutions, such as using lowering the case of urls from within httpd.conf (if you have access to it, namely you are not using shared hosting) or using rewrite rules from within .htaccess. What I found the easiest solution however (after which all links worked and I successfully submitted all my links for indexing through Webmasters Tools) is:

In wp-includes/class-wp.php
Replace
$req_uri = str_replace($pathinfo, ”, $req_uri);
with
$req_uri = str_replace($pathinfo, ”, strtolower($req_uri));

After you have completed this and resubmitted your pages for indexing, you can double-check that it worked by googling “site:mysite.com” and examining all pages that Google indexed.