How to translate the X theme into other languages

This article was last updated on the December 9, 2016.

This article will cover translating the X theme into any language apart from the default (en_US). This article won’t cover translating plugins, if you’d like to learn about translating plugins, here are some great articles you can check out.

Before we get started, you should have the following:

  • X downloaded and installed on your WordPress site
  • FTP/SFTP details (for uploading the translation)

We’ll be covering one main method of translation and then have a brief section on other ways you can translate.

Getting Started

For the purpose of this article, we’ll just be translating one string as a example, but this same principal applies to translating the whole theme.

The specific string we’re translating is “Below you’ll see everything we could locate for your search of” for this article, we’re going to use deutsche, but you can translate in any language and we’ll cover that below.

Downloading Required Resources

For the translation, we’ll be using a tool called “Poedit” Poedit is a translation tool for translating strings from there original language to the one you want. It’s simple to use and quite straightforward.

Head to https://poedit.net/ and click on the free download button

Download Poedit

You should get a popup message to either save the file or open it like this

Open Poedit

Click on open and unzip/uncompress the zip file, the file just contains the Poedit application. Congrats! Poedit is now installed and ready to use.

Translating With poedit

Open up where you downloaded X, if you don’t have a copy of X downloaded, you can download it directly via your themeforest account or from your member dashboard here. But for the purpose of this, we’re going to use FTP, open up whichever FTP program you’d normally use. For this article we’ll be using Coda 2, other options are

Open up your FTP program and login with your FTP credentials, if you don’t know where to find these, you can use the cPanel file manager or ask your host.

Once you’re logged in, you should see a file structure similar to this

FTP File Structure

It’s worth noting here though that not all file structures will be the same, if you get stuck at all, open a support topic here and we’ll be right along to assist.

Navigate to your wp-content/themes/x/ folder, normally located in /public_html/ (if it’s the root of your install), if you have multiple domains it might be something like /public_html/yourdomain.com/wp-content/themes/x

You should have a screen like this

FTP X

Now click on the framework folder, and then the “lang” folder, so the complete path you should be at now is wp-content/themes/x/framework/lang You should see the x.pot file within the lang folder like this

x.pot file

Right click on the x.pot file and click “open with Poedit”.

Open x.pot

Note: If you don’t have the same option, right click and download the x.pot file and then open with Poedit, either way is fine .

Creating a new Translation

Click on “Create New Translation”

Create New Translation

You should see the following

Naming your translation

Enter the language of the translation itself. This would be the country code or you can use a country name, so for German, we could use de or just type “German”.

Once you’ve done that click “ok” and your new .po file is automatically created. Now it’s time to actually translate the theme, as we covered further up, for this purpose of this example, we’re just going to translate one string, but you can translate as much or as little of the theme as you want and what you’ve translated will still work.

So the string we’re going to translate as mentioned earlier is “Below you’ll see everything we could locate for your search of”.

Poedit has a great feature, which allows us to find any string we want. On Mac, just hold cmd + f to bring up the search bar.

Once you’ve brought up the search bar which should look like this

Poedit search

and click “next”, which will take you to that specific string like this

Poedit translate string

As you can see, right now our translation for this string is empty, so let’s change that.

Enter in your translation for that string, so in my case, that’s “Unten sehen Sie alles, was wir gefunden haben zu Ihrer Suche nach” As I’m translating in German.

Note: At this point before moving on to the next steps, you can translate as much as you want, just go through the file and click on each string in Poedit and add your translation, once you’ve completed that, follow the steps below.

Now you’ve added your translations, let’s make sure we save it, so in Poedit go to > file > saves as, name it in your language code, so for this article as it’s German, we’d use “de_DE.po”, save it anywhere on your computer, as we’ll upload it via ftp (or it should allow you to save it straight to FTP anyway).

Next we need to create what’s known as a “machine readable file” or .mo for short, so in Poedit go to file > “compile to MO” like this

Compile to MO

Save that as your language code, so in this case it’d be de_DE.mo like this

Saving MO.

Phew! That was a long section, but now you have a translated theme! Congrats. 🙂

Uploading your Translation

Now you’ve got your translation files ready to go (both .po and .mo files). You can upload those to /wp-content/themes/x/framework/lang

Important! Uploading your translation files to the parent theme, will mean they’ll be overwritten on a theme update and lost. We’d highly recommend the following two methods below instead.

Uploading your Translation in a Child Theme

This section presumes you already have a child theme setup and does not cover setting up a child theme, if you don’t have a child theme setup, you can download one from the members area here

Create a “languages” folder in your child theme, for example /wp-content/themes/x-child/languages and upload your translations to that file.

But now we need to tell WordPress to load the translation, open up your child themes functions.php and add the following code

	
add_action( 'after_setup_theme', 'load_child_language' );
	function load_child_language() {
		load_child_theme_textdomain( '__x__', get_stylesheet_directory() . '/languages' );
}

This tells WordPress to find the translation in the child theme languages directory.

Now the final step to making your translation show up is setting your language in WordPress, to the language you translated the theme in. Since WordPress 4.0, we no longer need to add a define to the wp-config.php, instead we set in the wp-admin > settings > general. You should see a screen like this

Changing Language

Select your language from the dropdown box and click “save”.

Now when we go to the front-end of our websites, we should see our translated string like this

Translation successful

Congrats! You’ve successfully translated your website. The same basic principals also applies to translating plugins.

Alternative Upload Method

Rather than using a child theme, you could upload your translation to /wp-content/langauges/themes, the main difference being if you upload that way, you’ll need to use the text domain of the theme/plugin you are translating in the naming of the file. For example, for this article we’d use the X text domain which is __x__ and then with the language code like this: __x__-de_DE.po and __x__-de_DE.mo

Alternative Ways of Translating

Below are a couple of alternative translation methods, both being plugins, that you can use from within the WordPress admin area to translate themes and plugins.

  • WPML – X includes built in integration with WPML and works flawlessly straight out of the box, if you already have WPML installed, you can read about translating a theme with WPML here.
  • qTranslate X – A free alternative to WPML, offering the ability to translate WordPress themes and plugins from the WordPress admin.

Further Reading

Below is some great further reading material, both on the subject of general translation and more specific topics on translating themes.