logo

Sue Feng Design

‹ Back to blog

WordPress i18n (Internationalization)

If you would like your WordPress to be viewed in different languages, there are several steps you can take to make this possible. This tutorial will explain how to make your WordPress theme have different language translations that can be viewed depending on the language setting in a user’s browser. This does not include actual post content, however. For that you will need a plugin, and you will need to write the translations for each post. But for text such as the date, navigation links, sidebar content and such, you can create translation files and integrate those translations with your theme. Based on the user’s browser language setting, the site will display in the corresponding language(s). Of course, you will need to make the translations yourself even for theme related text. There’s no automatic translations here.

Determine Translated Text and Create the PO File(s)

First you will have to take a look at your site and see what portions of your theme has text that need to be translated. Then create a PO file such as zh.po for Chinese, ja.po for Japanese, fr.po for French etc. For more country codes, visit this list of i18n locale codes. For the PO file, you will need to write your translations with this heading:

msgid ""
msgstr ""
"Project-Id-Version: Sue Feng Design"
"POT-Creation-created_at: 2013-10-22 15:05-0600"
"PO-Revision-created_at: 2013-10-22 21:38-0600"
"Last-Translator: "
"Language-Team: "
"MIME-Version: 1.0"
"Content-Type: text/plain; charset=UTF-8"
"Content-Transfer-Encoding: 8bit"
"X-Generator: Poedit 1.5.7"
"X-Poedit-KeywordsList: _;gettext;gettext_noop"
"X-Poedit-Basepath: ."
"Language: zh"

Then use this format for the actual translations:

msgid "Blog"
msgstr "博客"

The msgid is the default text in your theme, and the msgstr is the translated text. Use this format for all strings of text from your theme.

Create the MO File(s)

After you’re done with your PO file, you will need to convert it into a MO file. To do that, you may install Poedit. Once you’ve installed Poedit, run the program and open your PO file in it. Then do File > Save As, and save it as for example zh.mo, making sure to select Save as type: All files (*.*). Place both your PO and MO files into a folder called languages and place that into your /wp-content/themes/yourtheme/ directory.

i18n

Date Translations

To translate the date, you will need to know what format the date will be in, and whether or not the month and or day of the week needs to be translated, based on what kind of date format you want to use. For example, to translate the date into Chinese use this in your PO file:

msgid "F j, Y"
msgstr "Y年n月j日"

For a different language such as Spanish, you may use something like this:

msgid "January"
msgstr "Enero"
 
msgid "F j, Y"
msgstr "F j, Y"

The translation for January is if your date format requires the month spelled out. You’ll want to create translations for each month in this case. If you want days of the week as well, then you’ll have to translate the days of the week as well.

Set the Text Domain

Set the text domain in functions.php in your theme directory. You’ll want to use your theme name for this. In this case, the theme name is news. Also, you’ll want to add your languages folder. For this, you don’t have to change the below snippet. You just need to change where it says ‘cherry’ to what your theme name is. Then you’ll use the text domain below under Enable Internationalization for Text in Theme

add_action('after_setup_theme', 'news_setup');
function news_setup(){
  $result = load_theme_textdomain('cherry', get_template_directory() . '/languages');
}

Set the Locale

Add this code snippet to your functions.php as well. It will set the locale for your site according to what the browser setting is.

$locale = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);

Enable Internationalization for Text in Theme

This is what you’ll use for wherever there is text that has a translation:

<?php _e('Blog', 'cherry'); ?>

How it works is, it echos News if the browser language is set to English and it echos 消息 when the browser language is set to Chinese. Where ‘cherry’ is is the text domain. Change ‘cherry’ to whatever you want translated, making sure you have the corresponding translation in your PO file, and that you have an updated translation of the MO file as well. You will then need to add this for outputting the date in the correct format and in the correct language:

<?php echo get_post_time(__('F j, Y', 'cherry')); ?>

Of course, you may change the date format to however you want it to be. Make sure you use the same format here as you do in the PO file. For more on this, visit PHP date. The dates may be tricky if you want to use month names and or days of the week. Below is something you can try in functions.php:

function localizedate() {
  $date = get_post_time(__('F j, Y', 'cherry'));
    $month = get_post_time('F');
    $dayYear = str_replace($month, "", $date);
  if(get_locale()=='zh' || get_locale()=='ja'){
     _e($date, 'cherry');
    }
 else {
        _e($month, 'cherry');
       _e($dayYear);
 }
}

Then call the function where you want the date to appear such as here:

<time datetime="<?php echo get_the_date('Y-m-d').'T'.get_the_time('H:i:sP'); ?>"><?php localizedate(); ?></time>

See It in Action

Below are examples of PO and MO. You may view my site in Chinese to see it in action. I haven’t translated everything though, and some translations may be subject to change as I’m not the best at Chinese. Please let me know if you have questions.

PO Snippet:

msgid ""
msgstr ""
"Project-Id-Version: Sue Feng Design\n"
"POT-Creation-created_at: 2013-10-22 15:05-0600\n"
"PO-Revision-created_at: 2013-10-22 21:38-0600\n"
"Last-Translator: \n"
"Language-Team: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Generator: Poedit 1.5.7\n"
"X-Poedit-KeywordsList: _;gettext;gettext_noop\n"
"X-Poedit-Basepath: .\n"
"Language: zh\n"
 
# Chinese translations
msgid "Blog"
msgstr "博客"
 
msgid "Portfolio"
msgstr "作品集"
 
msgid "About"
msgstr "关于"
 
msgid "Contact"
msgstr "联系"
 
msgid "Links"
msgstr "超链接"
 
msgid "Search"
msgstr "搜索"
 
msgid "Categories"
msgstr "种类"
 
msgid "Art"
msgstr "艺术"
 
msgid "Design"
msgstr "设计"
 
msgid "News"
msgstr "消息"
 
msgid "Poems"
msgstr "诗集"
 
msgid "Quotes"
msgstr "引语"
 
msgid "Recipes"
msgstr "食谱"
 
msgid "Reviews"
msgstr "评论"
 
msgid "Sketches"
msgstr "素描"
 
msgid "Sustainability"
msgstr "持续性"
 
msgid "Tutorials"
msgstr "辅导课"
 
msgid "Older"
msgstr "以前的"
 
msgid "Newer"
msgstr "新式的"
 
msgid "Going Up"
msgstr "往上走"
 
msgid "Sue Feng Design"
msgstr "冯舒设计"
 
msgid "M d, Y"
msgstr "Y年n月j日"
 
msgid "Latest Entries"
msgstr "最新的条目"
 
msgid "Latest Works"
msgstr "最新的作品"
 
msgid "Continue on the blog"
msgstr "继续看博客"
 
msgid "Continue on the portfolio"
msgstr "继续看作品集"
 
msgid "Similar Posts"
msgstr "相似的条目"
 
msgid "Comment"
msgstr "评论"
 
msgid "Comments"
msgstr "评论"
 
msgid "Submit"
msgstr "提交"
 
msgid "Leave a Reply"
msgstr "留下回答"
 
msgid "View All Entries"
msgstr "看每个条目"
 
msgid "Other"
msgstr "另外的"
 
msgid "Name (required)"
msgstr "名字(必需的)"
 
msgid "Email (required)"
msgstr "电子信(必需的)"
 
msgid "Web site"
msgstr "网站"

MO Snippet (just to see what it looks like):

de12 0495 0000 0000 2000 0000 1c00 0000
1c01 0000 2b00 0000 1c02 0000 0000 0000
c802 0000 0500 0000 c902 0000 0300 0000
cf02 0000 0400 0000 d302 0000 0a00 0000
d802 0000 0700 0000 e302 0000 0800 0000
eb02 0000 0700 0000 f402 0000 1400 0000
fc02 0000 1900 0000 1103 0000 0600 0000
2b03 0000 0800 0000 3203 0000 0e00 0000
3b03 0000 0c00 0000 4a03 0000 0d00 0000
5703 0000 0500 0000 6503 0000 0600 0000
6b03 0000 0500 0000 7203 0000 0400 0000
7803 0000 0500 0000 7d03 0000 0500 0000
8303 0000 0900 0000 8903 0000 0600 0000
9303 0000 0700 0000 9a03 0000 0700 0000
a203 0000 0600 0000 aa03 0000 0d00 0000

Resources

Posted on: October 23, 2013Categories: TutorialsTags: coding, wordpress
‹ Back to blog