Skip Navigation

Home › Support › English Support › [Resolved] Translate custom html

[Resolved] Translate custom html

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client has custom HTML added to their blog for an author box, which is not translating in the Advanced Translation Editor (ATE).

Solution:
Firstly, we advised the client that it is not necessary to include meta tags and font links within the custom HTML block, as WordPress adds this information to the site. Instead, we recommended enqueuing the fonts file in the functions.php file of the child theme and adding CSS rules to the style.css file of the child theme.

We then instructed the client to simplify the custom HTML block to only include the necessary divs and paragraphs, which will allow the strings to be automatically translated in the ATE. The client should remove unnecessary HTML tags and structure, leaving only the content that needs translation.

If this solution does not apply to your case, or if it seems outdated, we recommend opening a new support ticket. We also highly recommend checking related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If you need further assistance, please contact our support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: , ,

This topic contains 9 replies, has 2 voices.

Last updated by Andreas W. 11 months, 1 week ago.

Assisted by: Andreas W..

Author Posts
February 21, 2024 at 9:11 am #15326132

nielsO-5

Hi , i have a custom html added to my blog (author box), but is does not translate

This is the code:

<meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link href="hidden link" rel="stylesheet"/><style>.author-section {
font-family: 'Roboto', sans-serif;
color: #666;
margin-bottom: 40px; /* Meer ruimte onder "Over de auteur" */
}

.author-section hr {
border: none;
height: 1px;
background-color: #ddd;
margin-bottom: 10px;
}

.author-section-title {
font-size: 24px; /* Grootte van h2 */
font-weight: bold; /* Dikgedrukt voor "Over de auteur" */
color: #333;
margin: 0 0 20px 0; /* Meer ruimte onder de titel "Over de auteur" */
}

.author-box {
display: flex;
align-items: flex-start;
border: 1px solid #ccc;
padding: 20px;
margin: 20px 0;
font-family: 'Roboto', sans-serif;
}

.author-box img {
flex: 0 0 120px;
width: 120px;
height: 120px;
margin-right: 20px;
border-radius: 50%;
object-fit: cover;
}

.author-box div {
flex: 1;
}

.author-name {
font-size: 24px; /* Grootte van h2 */
color: #333;
margin: 0 0 5px 0; /* Minder ruimte tussen naam en titel */
}

.author-title {
font-size: 16px;
color: #555; /* Een donkerdere grijstint */
font-weight: normal; /* Verwijdert dikgedrukt */
margin: 0 0 20px 0 !important; /* Meer ruimte tussen titel en beschrijving */
}

.author-box p {
margin: 0;
color: #333;
}
</style><div class="author-section"><hr/><p class="author-section-title">Over de auteur</p></div><div class="author-box"><img src="hidden link" alt="Ate Keurentjes"/><div><p class="author-name">Ate Keurentjes</p><p class="author-title">Server Side Tracking Specialist bij TAGGRS</p><p>Ate Keurentjes is een Server Side Tracking specialist bij TAGGRS. Hij heeft ervaring met verschillende Google Tag Manager concepten. Keurentjes redigeert en schrijft sinds 2023 over de nieuwste ontwikkelingen en trends in data verzameling / Server Side Tracking.</p></div></div>

as you can see in the picture, the text above it is translated (as it should be) but the author box html is not.

Can you help 🙂

Screenshot 2024-02-21 at 10.10.31.png
February 21, 2024 at 10:13 am #15326815

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

To create translations in WordPress and with WPML you will need to use PHP.

It is not possible to translate raw HTML.

Please read this article and let me know if you have further questions:
https://wpml.org/documentation/support/translating-the-theme-you-created/

Best regards
Andreas
February 26, 2024 at 9:47 am #15343231

nielsO-5

Hello,

After checking out the article I don't see an easy way to solve this problem. Is there another way to translate the raw HTML block?

February 27, 2024 at 1:24 pm #15349279

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

Do I understand, right that your code example is placed into the theme file?

You should be able to translate it if you place the code instead into a respective Gutenberg Block or Page Builder Widget.

It would be very helpful if you could also send us the WPML information for the solution.
Further information here:
https://wpml.org/de/faq/provide-debug-information-faster-support/

Best regards
Andreas
February 28, 2024 at 3:53 pm #15354882

nielsO-5

Hello Andreas,

We are working in Gutenberg.
I provided you with the debug information.

Best regards
February 28, 2024 at 10:34 pm #15356007

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Hello,

Could you please increase your WP Memory limit to 256M? 128M is the minimum required by WPML.
Your current values are:

PHP Memory Limit 3072M
WP Memory Limit 40M
Add this code to your wp-config.php to increase WP memory:

define('WP_MEMORY_LIMIT', '256M');

Paste it just before:

/ That's all, stop editing! Happy blogging. /

Now, verify the current settings at WPML > Support > WordPress. Then complete the translation again.

These settings can be limited directly by your hosting provider, so I recommend you contact and ask them to modify them directly.
If you can get even higher values It would be great.

https://wpml.org/home/minimum-requirements/
Note: WPML needs a minimum WP Memory limit of 128M to work only under a minimal environment, which means, with a default theme and no other plugins installed.

When you are done with adjusting the limit please try to apply the translation again.

If this will still not solve the issue, please let me know.

Best regards
Andreas
February 29, 2024 at 8:22 am #15356509

nielsO-5

Hello,

I've changed the WP memory limit to 256M. I've also checked this in WordPress. However, the translation is still not working. In another support ticket, we had a problem that JavaScript wasn't translated. At that time, we were working in Elementor and not in Gutenberg. That time we provided you with our WordPress login details. After that, you added something of which I added a screenshots to this ticket. That made it work. Is there also such a solution in this case?

Kind regards

screenshot wpml 1.jpg
screenshoit wpml 2.jpg
February 29, 2024 at 4:20 pm #15359371

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

Please recreate the issue on this test site and I will have a look into it.

One-Click-Login:
hidden link

Please do not migrate your whole website - I only need a simple example page that uses the same block for testing.

Make sure to leave me a short comment in this ticket, once you are done with this task.
March 1, 2024 at 8:47 am #15361473

nielsO-5

Hi, i tried recreating the issue but i don't want to fill in payment information to translate.

What i did: created post including the html
Translation managemnet --> Translation management
What you need to do, translate automatically --> check if the post (in this case german) is translated (including the html).

Thank you!

Screenshot 2024-03-01 at 09.45.35.png
March 1, 2024 at 4:04 pm #15363899

Andreas W.
Supporter

Languages: English (English ) Spanish (Español ) German (Deutsch )

Timezone: America/Lima (GMT-05:00)

You do not need to add any payment information.

I have changed to "Translate what you choose" and opened the content inside the Advanced Translation Editor.

As you can see on the screenshot, your HTML content is not displayed by default on the Advanced Translation Editor and this is why an automatic translation is not possible.

This is expected behavior for the Advanced Translation Editor, as it strips out HTML and PHP and lets translators only translate texts.

You will need to create this translation yourself inside the Advanced Translation Editor by searching for non-visual content inside the text field on the top left of the Advanced Translation Editor.

Guide:
https://wpml.org/documentation/translating-your-contents/advanced-translation-editor/#main-features-of-the-advanced-translation-editor

See the second screenshot.

The issue here is, that the block is unexpectedly rendered inside the Advanced Translation Editor, and filling out the translation field does not work.

You Custom HTML Block starts like this:

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
....

You do not need to add this information to the block, as it is added by WordPress to the site.

Further fonts can not be loaded inside a Block. You can not do this:

<link href="<em><u>hidden link</u></em>" rel="stylesheet">

You need to enqueue the CSS file into the functions.php file of your Child theme:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

How to create a Child Theme:
https://developer.wordpress.org/themes/advanced-topics/child-themes/

The CSS rules should be added to the style.css file of your Child theme.

The only content that your custom HTML should include is:

<div class="author-section">
  <hr>
  <p class="author-section-title">Over de auteur</p>
</div>

<div class="author-box">
  <img src="<em><u>hidden link</u></em>" alt="Ate Keurentjes">
  <div>
    <p class="author-name">Ate Keurentjes</p>
    <p class="author-title">Server Side Tracking Specialist bij TAGGRS</p>
    <p>Ate Keurentjes is een Server Side Tracking specialist bij TAGGRS. Hij heeft ervaring met verschillende Google Tag Manager concepten. Keurentjes redigeert en schrijft sinds 2023 over de nieuwste ontwikkelingen en trends in data verzameling / Server Side Tracking.</p>
  </div>
</div>

Like this you will be able to translate the strings automatically, as they will show up inside the Advanced Translation Editor.

See the third screenshot.

Best regards
Andreas

translate.PNG
non visual elements.PNG
ATE Test.PNG
March 7, 2024 at 2:45 pm #15384960

nielsO-5

Thanks! Worked 🙂