Translating each Awesome Support page

If you have followed the instructions in the previous sections then all minimum configurations have been completed and we are ready to translate the Awesome Support pages. We will now go through step by step each of Awesome Support‘s pages and translate missing strings using WPML’s String Translation.

Starting translation of the “Submit Ticket” page

To begin the process we will use a web browser which isn’t logged into the website to simulate a support user. In this example we will be using Google Chrome with the website loaded in incognito mode.

On the front end of the website we will use the language switcher in the menu to access the French version of the website:

WPML French language switcher

We will then click on the “Submit Ticket” link on the menu (which in this case is “Envoyer le ticket”).

Translating the “Submit Ticket” register/login forms

Below is how the initial page looks like:

Frontend Submit Ticket page

As we are not logged into the website we are presented with the registration/login forms. So far on the French language version we can see two untranslated text: “Submit Ticket” and “Forgot password?”.

First, we will translate the “Submit Ticket”text. This is the actual title of the page. So, to translate this we will go into the administration panel and access the French version of this page:

WPML French submit ticket page

We then will change the “Submit Ticket” title to the French equivalent and update the page:

Now if we reload the “My Tickets” page on the front end you should see the title update successfully:

WPML Frontend submit ticket title translated page

Next we will look at translating the “Forgot password?” text. To do this we will be using WPML’s String Translation. In the administration panel hover over the “WPML” menu node and click on “String Translation”:

This area covers all text domains throughout the website. As we are translating the Awesome Support plugin you will find the Awesome Support text domain (awesome-support) in the “Select strings within domain:” option:

WPML Select strings within domain option

Afterwards, enter the string you would like to translate in the “Search for:” field and press the “Search” button:

WPML String translation search for option

Once the search has been completed the translatable string(s) for that search term will appear:

WPML String translation result display

The next step is to click on the “translations” link. This will show translations of this string for all of the languages on the website. Once the translated text has been entered you will need to check the “Translation is complete” checkbox and click the “Save” button. This must be done for every language that you have translated. Below is an example of the French translation:

WPML String translation result French translation

In some cases you may get a translation suggested which is highlighted in yellow. The process will be the same to translate the text but the checkbox will be labelled “Use my translation”. The German version gives an example of this:

WPML String translation result German highlighted suggestion

Now, if we check the front end of the website and check each language version the strings should be translated.

Note that the method to change the title in German has been omitted as it is exactly the same process as which was used in the French version.

French:

WPML Frontend final translated French Submit Ticket page with forms

German:

WPML Frontend final translated German Submit Ticket page with forms

Note that when translating the login/registration forms when clicking the submit button the text will change, so check that the translation works for the language that you are changing, otherwise you will need to do the string translation process to change this text.

Translating the “Submit Ticket” logged in form

Now that the support user is logged in, when they access the “Submit Ticket” page they will be able to see the submit ticket form.

In this part of the guide we will not cover taxonomies which Awesome Support provide. Instead, they will be covered in section 8.

First we will see how the French version of the page looks:

WPML Frontend submit ticket form French

Here we can see the following strings that need to be translated:

• Logout
• Description
• Department
• Priority

To translate these strings we will be using WPML’s String Translation. In the administration panel hover over the “WPML” menu node and click on “String Translation”:

As before we need to select the “awesome-support” text domain so we only search strings from the Awesome Support plugin:

WPML String translation select strings within domain option

We then search for the first string “Logout”:

WPML String translation search for “logout” string

Like before we need to click on the “translations” link and find the language that we want to translate for, which in this example French. After the translation text has been changed the “Translation is complete” checkbox should be checked and the “Save” button should be clicked.

WPML String translation French logout translation

We can then check the front end of the website to see the translation before correcting the other translations:

The above process should be used to translate the rest of the strings.

In some cases you may get more results displayed while searching. For example, if we search for “description” we will get many results:

WPML String translation multiple results

This includes all strings with the text “description” in them. As we want the single word we can click on the “Exact match” filter and search again:

Now only one string is returned which is the one that we want to translate.

After all strings have been translated we can check the front end in the French language to check that everything has been changed:

WPML Frontend Submit Ticket page French complete translations

We will then repeat the process to check the strings that need to be translated in other languages. In this example we will change to the German language version. We should check first the front end to see which strings need to be translated:

WPML Frontend Submit Ticket form German

Here we can see that only one string needs to be translated: “Priority”. Like before we use “WPML’s String Translation” to search and translate the string, then check the front end again to check that the string has been translated:

WPML Frontend German priority string

Now that the pages have been translated the form is ready to have tickets submitted. For the upcoming sections a French language version ticket will be created with dummy content. The same principles in future sections will apply for any other language versions.

Replying to a ticket as an agent

To allow for an example of full content on the “My Tickets” and “Single Ticket” pages we will simulate a reply from an agent.

To do this from the administration panel the agent should go to the “All Tickets” page:

In this example we are in the administration panel’s English language version which has only one French ticket so the “All Tickets” page will be empty:

WPML All tickets empty in English version

To find the French language version ticket we will need to change the language to French:

After this has been selected we will be able to see the ticket created by the user:

Edit tickets screen displaying French ticket

The agent will open the ticket and can enter a reply using the normal process:

Agent replying to the French ticket

Now that we have content in a ticket from both a user and agent we can proceed to check the translation on the other pages.

Translating the “My Tickets” page with no tickets

This page has two scenarios: the user has no tickets created or the user does have tickets created, so we will need to check for both circumstances.

Looking at the page with no tickets in the French language version we can see the following content:

WPML Frontend My Tickets French empty page

Here the text “My Tickets” is a page title so we will not need to use WPML’s String Translation but will change the French version’s page title.

In the admin panel we need to access the “Pages” section in the language that we want, which in this example is French:

Preparing to translate the My Tickets page in French

Once we are on the “My Tickets” page’s edit screen we need to change the title and update the page:

Changing the My Tickets title in the French version

Now we can check the front end to see that the translation has been successful:

Checking the frontend title in French version

Translating the “My Tickets” page with tickets

Like previous pages we should check the front end first to see if there are any missing translations:

My Ticket page frontend with content

In this example using the French language version there is one missing translation: Date.

As this text is not a title we will use “WPML’s String Translation” to translate the string:

WPML My Tickets page translating “Date”

Once the string has been translated, we should check the front end to make sure that the string has been translated:

My Tickets frontend after being translated

Like other pages this process should be repeated for other language versions.

Translating the Single Ticket page

In this example we will be using our previously created ticket in the French language version. Like the other pages we first should check the front end for missing translations:

Single Ticket content page before string translation

Here we can see one untranslated string “minutes ago”. “ID” could also be seen as an untranslated string so we could also use “WPML’s String Translation” for this case if needed.

To change the “minutes ago” string we will use “WPML’s String Translation”. This string is slightly more complicated to translate than the other strings.

First, we should access the “String translation” page in the administration panel. Strings on WordPress such as mins ago, minutes ago etc. are handled through specific WordPress code functions, so we can’t directly search for the exact string “minutes ago”. The “minutes” text is automatically generated by the WordPress function so we can’t search for it. Instead, we will search for “ago” without using the “Exact match” option:

WPML String translation searching “ago” string

There will be multiple results returned for this string example:

WPML String translation results for “ago”

The characters “%s” is used to generate the “minutes” text so we can assume that “%s ago” is the string that we are looking for. Based on the results, however, there are two strings which use “%s ago”. We can look at the “Context” column for more descriptive information about the string. One of the “%s” context mentions “Time ago (eg. 5 minutes ago)” so we can assume that this is the string that we are wanting to translate. Like other strings we should click on the “translations” link and change the string in the language that we want:

WPML String translation French min ago

Finally we should check the front end of the website to check that the string has been successfully translated: