Adding Translation Files To Your Child Theme

Last week, I received the urgent project from my client. The site needed to be online within one day. The client requested only two pages which were the front page and contact page. Also, I needed to add all content and design the template as well as the color theme for them.

Finally, the site has only one language which is Thai.

This translation method in this post can apply to any languages.
Note

I decide to use the Virtue Free WordPress theme. It is a free theme and I have been using it for a few years without any issues. However, the theme doesn’t come with the Thai language pack so I need to create the Thai translation for this theme.

You should create the child theme if you want to customize the theme or you plan for adding some changes in your site in the future. So you don’t lose any customization if your theme is updated.
Note

Okay, now you should have the parent theme and child theme already. Next, we will talk about how to create the translation to your child theme.

Table of Contents

Translation Ready

Most of the themes are the translation ready which means you can translate the theme into your language.

For example, for the Virtue free theme, if your site is a Spanish site when you change the site language in WordPress backend, you will see the frontend shows the Spanish language because the Virtue theme provides the Spanish translation which can be found in “themes/virtue/languages/es_ES.po” and “themes/virtue/languages/es_ES.mo”.

If I change the site language to Thai, there is no Thai translation on the front end because there is no th.po and th.mo in the Virtue theme.

What is PO file and MO file

Now I mention the po and mo file above. So what are they? I gonna explain in short below.

PO – Portable Object. This is the file that you receive back from the translator tools. It’s a text file that includes the original texts and the translations.
MO – Machine Object. The MO file includes the exact same contents as the PO file. The two files differ in their format. While a PO file is a text file and is easy for humans to read, MO files are compiled and are easy for computers to read.

Reference: What are PO MO files

The POT file

The themes with the translation ready come with the POT (Portable Object Template) file. This file contains the original strings (in English) in the theme. It can be found in the languages folder under the theme folder.

In my case, it can be found in “themes/virtue/languages“. It names “virtue.pot“.

So what is POT file? It is the Portable Object Template. This is the file that you get when you extract texts from the website. Normally, you send this file to your translators. Then the translators will send your the po and mo file for each language. For example, es_ES.po and es_ES.mo for Spanish.

Create the PO and MO files from POedit tool

Finally, it is time to create our own language translation. I often use the POedit tool to create the po and mo files from the POT file. In order to follow my tutorial, you must install POedit tool.

Once the installation is done. Follow the steps below.

Open the POedit tool
Choose “Create new translation” option
Choose the POT file from the parent theme. In my case, it is “virtue.pot” where can be found at “themes/virtue/languages“.
You will see the popup for asking you which language you want to translate. In my case, I choose “Thai” and the language code is “th”. The language code is very important. The language code needs to match the language code that WordPress uses on the front end and back end. After you change the site language at the WordPress backend (Settings>General>Language), go to the frontend and use the web inspect tool from your browser and check the lang attribute at HTML tag. For example, <html lang=”th“>. Or you can print out the current language with this PHP command => get_bloginfo(‘language’).
Now you can start to add your translation in the translation box and save into your child theme at “themes/your-child-theme/languages“. The output after saving will be the po and mo files. In my case, it is th.po and th.mo.

Load our translation files in functions.php

From the last step, we create the po and mo files for our language. Next, we will load our translation in the child theme. Don’t forget to activate your child theme in Appearance menu at the WP backend. Then follow the step below.

Paste the PHP code below into the functions.php in your child theme. The path will be “themes/your-child-theme/functions.php“.

function child_theme_slug_setup() {
    load_child_theme_textdomain( 'parent-theme-slug', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'child_theme_slug_setup' );

child_theme_slug_steup is a function callback name. You can change the name whatever you want.

parent-theme-slug is your parent theme text domain. It can be found in “themes/your-parent-theme/style.css”. In my case, the parent text domain is “virtue”.

You should use to after_setup_theme action hook.

See your translation on the front end

Next, go to the front end and refresh the site (F5), you should see your translation text now.

What else you should know

The languages folder is a folder default for WordPress. So WP knows where to find the translation files. But if you want to use the other folders, you can set with “Domain Path” in the style.css of your current theme. More detail is here.
The translation file is NOT overridden as same as the template. Meaning, for the child theme, you can copy the template from the parent theme and edit that template to fit your needs and store in the child theme. WP will look at the copied template in the child theme and show that template on the frontend. But for the translation file, if you copy the es_ES.po and es_ES.mo from the parent theme and add those files into your child theme, WP still look at the es_ES.po and es_ES.mo from the parent theme. So if the theme you use, don’t have 100% complete translation, you may help to add the translation to the theme for your language.

Useful Links

Tips

If you create the new plugin and want to use the translation file from the current theme, you can use the text domain from the current theme in the plugin. Then you can add the new plugin path in the POedit following the steps below.

add new plugin folder that refers to the theme text domain. Open the POedit then choose the Catalog menu and go to Sources paths tab. Add the new plugin folder path and click OK button.
after adding the new plugin folder, click on “Update from code” menu. You will see the new source code and ready for translation.
then changes what ever you want and save to update the PO file and modify the MO file.