Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetEngine: How to Make a JetEngine-Built Website Multilingual

From this tutorial, you will learn how to prep your site to run polylingual and how to translate the frontmost JetEngine functionalities into any preferred language using WPML.

JetEngine is a Crocoblock WordPress plugin that lets you create custom post types and meta boxes, build relations, taxonomies, listings, forms, user profiles, and much more to make the website dynamic and feature-packed.

JetEngine became WPML-compatible, which means it is now possible to translate the website into many different languages. Let’s start by prepping the website and then going through the translation process for every content type.

Prepping the Website to Run Multilingual

Start by purchasing the Multilingual CMS WPML package. It contains WPML String Translation, WPML Media Translation, and the core WPML Multilingual CMS plugin – just what you need to translate the Crocoblock-built website. After you upload it to WordPress, complete the basic language setup.

WPML Setup

Run the WPML Setup wizard. At the first step, pick the default and translation languages of the website. Besides that, you can create a custom language if needed.

wpml setup languages

The second step allows you to format the URL of the translated website and offers three options to choose from:

  • different languages in directories;
  • a different domain per language;
  • language name added as a parameter.
wpml setup url format

At the third step, you are supposed to register WPML. Сlick on the “Get a key for this site” link if you haven’t done it yet. It will lead you to the WPML account, where you can register WPML on the website you need and generate a site key. 

After doing so, paste the received key into the Site key field.

wpml setup register wpml

Proceeding to the next step, you need to decide how you would like to translate the website. If you choose the “Translate Everything” option, the three drop-down options will appear. 

When choosing the “Translate Everything” mode, WPML will start translating content in the background. You can check the translation progress by heading to WPML > Translation Management or pushing the WPML logo in the toolbar. 

Or, if you select the “Review the translations before publishing” option from the drop-down, you will receive notifications either on the Translation Management screen or in the toolbar.

As the new content will be published or edited, it will be translated automatically.

wpml setup translation translate everything

However, if “Translate Some” is picked, other customizations are available. Select who will work on the website translation. 

If you haven’t defined all the needed translation roles while setting up WPML, you can do it in the WPML > Translation Management > Translators tab. Here, you need to choose who you would like to translate the web pages. Assign all roles right away or one at a time – just return to this page later. 

Note that you can switch between modes later by going to WPML > Settings.

wpml setup translation translate some

The fifth step called Support lets you send theme and plugin data to WPML support. In this way, you will get compatibility alerts that will decrease the problems with website translating.

wpml setup support

At the sixth Plugins step, install recommended plugins based on the website themes or skip if not interested.

wpml setup plugins

The final step includes additional information that can help you customize the process even more. Click on the “Finish” button to complete the setup.

wpml setup finished

Afterward, go to the WPML > Settings tab and define the translation method: Classic or Advanced. Please note that we suggest using the Advanced Translation Editor for new content and the Classic one for old content. In this way, it won’t affect old translations.

translation mode and translation editor settings

After everything is done, let’s proceed to translate the JetEngine-generated content.

How to Translate Meta Boxes & Meta Fields

First things first, you’ll have to make them translatable. To do so, go to the WPML > Settings page and scroll down to Custom Fields Translation

custom fields translation settings

By default, the “Don’t translate” option is set to all the custom fields. You can select one of four translation options for the custom fields:

  • Don’t translate – the system will output the given custom fields “as is;”
  • Copy – the custom field value will always be copied to secondary languages whether you decide to modify the default-language custom field or not;
  • Copy once – the custom field value will be copied to the secondary-language site version during the initial translation process. You are at liberty, though, to set a different value for it that won’t be overridden by the value of the default-language custom field;
  • Translate – you will be able to translate these fields wherever they pop out.

When all radio buttons are checked, hit the “Save” button. To dig even deeper, press the “Show system fields” button, and you’ll see the system components that can be made either translatable or not.

However, we are here to warn you that playing with system fields can be tricky. Be careful and always make a backup copy of your site content before changing anything on the backend.

knowledge base information iconNOTE. Due to integration issues, some custom fields may not be picked by the WPML translation editor. See the second-language site version on the frontend and fix that manually if any flaw is detected.
  • Go to Pages > All Pages and use the admin bar language switcher to view the pages that belong to a given language;
  • Click to edit the needed page/post;
  • You will see a warning. Press the “Edit anyway” button;
  • Input the missing translations by hand and hit the “Update” button to save the changes.

Both Crocoblock and WPML development teams are aware of this issue and working on fixing it.

Concerning meta fields, remember that you do not want to change any Field attributes except the Label. If you alter anything else, chances are the website won’t be working correctly.

How to Translate Taxonomies

For starters, go to WPML > Settings. Scroll down to Taxonomies Translation and make the ones you need translatable. Press the “Save” button.

taxonomies translation settings

Now, follow the WPML > Taxonomy translation directory and choose the one to edit from the drop-down list. You can see exactly the content this taxonomy includes. To add a translation, press the “+” icon.

taxonomy translation

In the newly-appeared window, submit the necessary translations by hand. The slug will be generated automatically. Please keep in mind that if there are identical slugs on the website, the system will add a suffix like “-uk,” where “uk” is short for the second (third, fourth, etc.) language. Don’t forget to press the “Save” button every time you edit the taxonomy content.

taxonomy term translation

Similarly to that, you can translate the generic taxonomy term. Just scroll down the page, press the “+” icon, and repeat the steps above.

Repeat the same process for every taxonomy you’ve set to be translated.

How to Translate Custom Post Types & Listing Items

knowledge base information iconNOTE. Please acknowledge that it is impossible to translate CCTs with WPML so far.

Proceed to the WPML > Settings page and find the Post Types Translation section. Make the custom post types translatable. Then click the “Save button.

post types translation settings

There are three options available for you here:

  • Translatable – only show translated items. Tick this radio button to display on the frontend only those items you translated;
  • Translatable – use translation if available or fallback to default language. This option will output the content translation if you’ve provided it, and the items with no active translations will be shown “as is;”
  • Not translatable. That’s pretty much self-explanatory. 

Afterward, open the Post Types tab in the admin panel and you’ll see that a small “+” icon appeared next to post type titles. 

post type translation pluses

Press any and you’ll be redirected to the WPML Advanced Translation Editor window. Translate the whole section by yourself or use automatic translation. Don’t forget to confirm each row separately; otherwise, the bottom scale won’t let you quit until it is 100% full.

advanced translation editor

You can translate the Listing Items in the exact same way:

  1. Make them translatable in the Post Types Translation section;
  2. Go to JetEngine > Listings;
  3. Open the desired Listing Item by clicking the “+” icon;
  4. Enter the translation manually or automatically;
  5. Press “Complete.”
listing translation button
knowledge base information iconNOTE. In case some post types/listing items lack translations in the front, that might be due to poor plugin integration. See, if you are using a third-party plugin widget that is not proven to be WPML-compatible, there’s no guarantee the content will be translated at all. You should input the missing translations by hand in either Elementor or WordPress post editing page.

How to Translate JetEngine Forms

So far, the Forms can be made translatable, but this setting doesn’t target the Form itself. In other words, if you go to WPML > Settings, scroll down to Post Types Translation, and activate the “Translatable” radio button in the Forms row, the WPML tool will be able to detect and translate only the Form’s title. And this is not what you want.

To translate any Form into the language of choice, you’ll have to follow the JetEngine > Forms directory and make a copy of the needed form. Click the “Duplicate” button, name the form accordingly, and proceed to edit it.

jetengine forms duplicate

Now, translate every form field into the necessary language by changing just the Labels, nothing else. If you alter any other components, we do not guarantee the proper functioning. Don’t forget to press the “Apply Changes” button each time you’ve translated the Label.

jetengine forms edit form

You can also translate both the Notification Types and Messages Settings sections. The procedure is the same – you submit the new content into the allowed text areas and do not change the core field values. 

Once done, click to Update the Form and proceed to the page where it’s placed. You’re going to substitute the default-language form with the translated one. Right-click the Form area and select the second-language form in the “Select form” drop-down list.

form page editor

Afterward, publish/update the page and see its frontend view.

form on the frontend
knowledge base information iconNOTE. Please note that JetBooking and JetAppointment forms can’t be translated. We’ll cover them in the upcoming tutorials. Also, the Profile Builder forms can’t be translated with WPML. So, since WPML cannot translate the Account page with Profile Builder, forms do not work correctly. The only option is to duplicate them to the needed secondary language and translate as described above.

Last but not least, you need to translate the header and footer templates as they will always be present on the secondary-language website pages.

Firstly, go to WPML > Settings and scroll down to the Post Types Translation section. Find the Theme Parts row among all and set it to “Translatable.” Save the changes. 

theme parts made translatable in the WPML settings

Secondly, proceed to Crocoblock > JetPlugins Settings tab on the WordPress admin panel and open the JetThemeCore plugin settings. In the General Settings tab, there is a Prevent Pro locations registration toggle. It is inactive by default. Enable the toggle as it will prevent the header and footer templates from disappearing on the second-language site pages.

prevent pro locations registration feature activated

Thirdly, translate the corresponding header and footer templates into other site languages. To do so, follow the Crocoblock > Theme Builder pathway. Locate the needed template and press the “+” icon next.

header and footer templates in the theme builder tab

Add the translations as you normally do for a regular page template in the Advanced Translation Editor. Once done, click the “Complete” button. Repeat the procedure for both header and footer templates.

translating footer template with WPML translation editor
knowledge base information iconNOTE. The header translation is tricky since it usually contains widgets from other plugins and a navigation menu. To translate it thoroughly, you will have to synchronize all language site versions.

Follow the WPML > WP Menus Sync pathway. Press the “Sync” button to create a secondary-language menu first. Confirm the action by clicking on the “Apply changes” button once you see it.

adding menu items to the secondary language menu

Once done, proceed to translate the menu strings. Below the “Sync” button, there is some additional information. The first point contains a link to the needed menu strings, so click on it. You will be taken to the String Translations WPML module. Add the missing translations one-by-one including links.

adding the navigation menu string translations
knowledge base information iconNOTE. Please remember to provide the links to the actual secondary-language pages. Otherwise, the translated menu items will still take users to the default-language website pages.

For example, the English URL slug looks like this: /properties/ocean-star-luxury-cottage/. And this is its Ukrainian countertype: /properties-uk/ocean-star-luxury-cottage/?lang=uk

As soon as you finish translating the menu strings, return to the WP Sync Menus tab. You will see that there are now secondary-language translations available. Press the “Sync” and “Apply changes” buttons once again to finalize the menu translation process.  

syncing the default and secondary language menu versions

This is it. Check out the result on the front end. The header template is displayed correctly; plus, all the menu items appear in the needed secondary language. 

translated header on the front end

Now you know how to use WPML to translate JetEngine meta boxes and fields, forms, taxonomies, CPTs, and listing items and synchronize the website menus in different languages.