How to Translate WordPress Themes for Better Accessibility

Allowing clients to manage their websites in their native languages is an important aspect of accessibility. If you develop a WordPress site that may have users from non-English speaking countries, it can be necessary to translate the theme.

Localizing the theme doesn’t mean you translate the content on the frontend such as posts and pages; instead, it refers to the theme-related content in the admin area: the theme’s description, options, and the customizer.

The WordPress Core Team puts a huge emphasis on the translation of WordPress Core. It’s already translated to many foreign languages; that makes WordPress a truly global content management system.

Localizing the theme can be extremely useful for clients who use the admin area in their own native language, otherwise a significant part of their admin settings (the settings under the “Appearance” menu) will be displayed in English, while the other parts of the dashboard in their native language. It’s not really a seamless experience.

Internationalization vs. Localization

Making a theme accessible in other languages requires 2 key steps: internationalization and localization. I18n (internationalization) and l10n (localization) represent the two sides of the same coin.

I18n is a process in which theme developers add features to their themes that make later translation possible. When a theme is provided with i18n features, it’s called translation-ready, but it doesn’t mean it’s already translated.

Translation happens during the l10n process, when a translator, the developer, or the site owner translates the theme to a foreign language, making use of the i18n features the theme author previously added to the theme.

In this guide we will take a look at how to provide l10n for a theme, or with other words how to translate it to a foreign language (in our example, to Spanish).

1. Find Translation-Ready WordPress Themes

You don’t have to be a developer or know how to code if you want to localize a WordPress theme, you only need to speak the chosen language.

First of all, you need to find a translation-ready WordPress theme. It’s an easy task, as in the official WordPress Theme Directory they are marked with the “translation-ready” tag.

You don’t have to do anything else than clicking on the “Feature Filter”, check the “Translation Ready” feature, hit the “Apply Filters” button, and choose the theme you like the most.

Translation Ready WordPress Themes

2. Add Translation with Poedit

If a theme is tagged as translation-ready, that means the author already added i18n features to it. Each translation-ready theme contains a file with the .POT extension that enables you to easily translate the theme.

First of all, you need to find this file; it’s usually located inside the /languages folder. The .POT file is a translation template file that can be translated to any language. You need to load this file into the Poedit translation editor program.

Poedit Translation Editor

As Poedit is a standalone program running from your desktop, you need to download and install it first. There are other translation editor softwares out there too, but probably Poedit is the most widely known. If you choose a different software, it’s recommended to use a gettext editor.

After you got through Poedit’s installation process, you will see the following screen:

Poedit Start Screen

2.1. Create New Translation

Unfortunately the “Translate WordPress theme or plug-in” option can only be chosen by users who upgrade to Poedit Pro, so we will choose the second option, namely the “Create new translation”.

After clicking on it, select the .pot file that you’ve previously located. When this happened, you need to choose the language in which you want to do the translation from a dropdown list.

In this tutorial we will choose Spanish, but the translation process works the same way with any other languages.

2.2. Translate The File

The translation itself is a quite straightforward process in Poedit: the source text is sliced into shorter strings, and you need to translate these strings one by one. The good news is that you don’t need to translate the whole file at once, you can save your work, and return to it when you want to continue.

Poedit Translation Screen

2.3. Check Translation Properties

Before saving the translation it’s a good idea to check the translation properties. You can find them under the Catalogue > Properties top bar menu item. The first two items inside the Translation Properties pop-up, the Project name and the Language are set by default by Poedit, but it’s important to pay attention to the next one, Plural Forms.

Plural forms are an important aspect of translation, as in every language plurals follow specific patterns that the translation editor software needs to know to properly handle them.

Plural forms use the following syntax: nplurals=2; plural=(n != 1); (in the case of the Spanish language).

Poedit sets the default plural translation rules, but you can modify them if you wish. You can find a list about the appropriate plural forms in many languages in this handy cheatsheet, but if you want to understand how plural forms work in gettext editors, read this user guide about it.

You can also set the charset in Translation Properties. The default is UTF-8, and that is the safest to choose, as it can be used for all languages, but of course you can go with a more specific charset too, such as iso-8859-1 for Latin-1 languages like Spanish.

On W3C’s checklist you can always check if you chose the right one for the language you want to do the localization for.

Translation Properties

2.4. Save The Translation Files

When you save the translation, it’s crucial that you use the right format. At the end of the file’s name you need to include the appropriate country and language code.

WordPress uses the gettext language-country codes, you need to add the appropriate language code first, followed by an underscore, and finally the country code, for Spanish the proper format is es_ES.

Luckily Poedit is such a handy program that if you click on the Save button in the top menu bar, it provides you with the right language code inside the “Save as… ” pop up window. The first two letters stand for the language code, and the second two letters for the country code.

Poedit Save Screen

You also need to type the name of the theme before the language-country code, so the example file will be saved under the twentyfifteen_es_ES.po file name. The .PO (Portable Object) file contains the translation, and you need to open this if you want to modify the translation later.

If you take a look at the /languages folder of your theme, you will notice that Poedit also saved another file with the .MO extension. It’s a compiled translation file, and you also need it if you want your localized site to work properly.

.PO and .MO files

3. Upload Your Translation Files

Now that the translation files are ready, you need to upload the modified theme to your server with the help of an FTP client. You can upload the whole theme again, but you can also insert only the two new translation files (.po and .mo) to the /languages folder of your theme.

Final Note

You need to create separate translation files (respectively a .PO and a .MO file) with Poedit for each language you want the theme to be available in.

What is really cool about WordPress is that if your client changes the language of the admin area under the Settings > General dashboard menu, WordPress will automatically pick the appropriate translation files for the theme.

Test Site In Spanish
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail