Translating Your App

You can translate your app by providing a translation file and creating a language settings page. You can also integrate with the  WPML plugin to translate WordPress content.

1. First, download our sample translation files and add your translations.

In this package you'll find json files such as es.json, and de.json.  For example:

{
	"Language Name": "Deustch",
	"Logout": "Ausloggen",
	"Back": "Zurück",
	etc...
}

The word on the left is the word in the app that needs to be translated, the word on the right is the native translation. Any word that you need translated has to be in this file, and the file must be named by it's two letter language code, such as en.json, es.json, de.json, etc.

You must include "Language Name" in any translation file.

Find all the translation strings in the en.json file, you can duplicate that file and change it for any language. You must also add any words from your menus and custom page titles. For example, if you have a menu item titled "My Profile," add that string to each translation file.

2. Next, zip the i18n folder with your json translation files inside, and upload it to your offline assets.

When you are finished editing the files, re-zip the i18n folder.

Do not change the i18n folder name. If you need to upload other assets along with your translation files, zip them along with the i18n folder.

Upload your .zip file to the offline assets in the app customizer "Settings" tab, and save.

Now, you need a way for users to select what language they want to use.

3. Create a custom HTML page with a language setting

Go to your app customizer => Custom Pages, and create a new page. Select custom HTML, and add this code:

<ion-list>
  <ion-list-header>
    {{ 'Settings' | translate }}
  </ion-list-header>

  <button ion-item (click)="showLanguages()">{{ 'Language Settings' | translate }}</button>
  
  <!--ion-item (click)="updateData()">
    <ion-icon name="refresh" item-left></ion-icon>
        {{ 'Update Data' | translate }}
    </ion-item-->

</ion-list>

Add all of your translations as indicated in the code above, and save the page. Add it to your menu and rebuild the app, and your app is translation ready!

Note: this feature does not work in the AppPresser 3 Preview app. Please test in the browser preview, or your own test app.

The language files you included in your assets will automatically show on this settings page. If you add new language files, you will have to rebuild and resubmit your app.

(The update data item above can be uncommented and used to update colors and menus when clicked)

Set a Default Language

If you prefer to set a default language other than English you can set this on the Customizer under the settings tab. You will need to upload your i18n.zip first and then rebuild your app.  Then you will need to refresh the page for the customizer to scan your app's i18n folder in order to populate the dropdown.

Translate WordPress Content With WPML

The translation files you included above only handle text strings in the app itself, not on your WordPress site.  To translate WordPress content, you can use the  WPML plugin.

Please note: we do not provide technical support for WPML, please contact the plugin authors for translation support.

This plugin is very popular for translating WordPress, and costs as little as $29.

Once you configure WPML and add your translations, your app will automatically load translated WordPress pages  and posts based on your language settings page. API list pages are also translated. No special setup is required, but you should make sure you have done the following:

WPML Settings

In our testing, we found the following settings are required:

  • Language url format has to be "Language name added as a parameter (http://mysite.com?lang=de - German)"
  • Add these to "Preserve URL arguments" - appp,list_type,num  You must also add any custom parameters you are using for WordPress list pages, such as category, author, etc.
  • Disable browser language redirect (checked)

WordPress App List Page

If you are using the App List page, go to the page editor and select these check boxes and click "duplicate"

All WordPress content needs to be manually translated with the WPML plugin, and certain things like custom post types and custom fields require extra setup. Please  consult WPML for help, we do not provide technical support for translating your WordPress site.