Skip to content Skip to sidebar

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

Problem:
The client needed to translate the text "CLICK TO ASK A DERMATOLOGIST NOW" visible on AMP pages, which was entered using an HTML tag inside the AMP Plugin.

Solution:
We found that the HTML box where the client added the HTML content was not configured to display translated HTML on the frontend. To solve this, we followed the steps in the provided documentation and inserted a specific code snippet into the Footer template of the "Design 2" template used by the AMP for WP plugin. The path to the file is

wp-contents/plugins/accelerated-mobile-pages/templates/design-manager/design-2/footer.php

. After adding the code and translating the button text via String Translation, the text displayed correctly in Spanish on the frontend.

We also advised the client that any updates to the AMP plugin would overwrite these custom changes. To prevent this, we suggested two alternatives:
1) Use the Hook provided by the AMPforWP plugin to append the code to the footer by adding it to the

functions.php

file of the theme.
2) Create a custom footer template within a child theme for the necessary customizations.
Both alternatives help ensure that modifications remain intact after plugin updates. For more information on hooks and creating a custom template, we recommended consulting the AMPforWP tutorials:

If the solution provided here is not relevant due to being outdated or not applicable to your case, we 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 further assistance is needed, please open a new support ticket.

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.

This topic contains 11 replies, has 2 voices.

Last updated by Prosenjit Barman 1 year, 5 months ago.

Assisted by: Prosenjit Barman.

Author Posts
February 6, 2024 at 10:05 pm #15273969

Tucango

Tell us what you are trying to do?
I need to translate the text "CLICK TO ASK A DERMATOLOGIST NOW" visible on AMP pages: hidden link

Is there any documentation that you are following?
Following this steps: hidden link

This string was entered using an HTML tag inside the AMP Plugin.

What is the link to your site?
hidden link

Captura de pantalla 2024-02-06 a la(s) 19.04.07.png
February 8, 2024 at 7:59 am #15279950

Prosenjit Barman
WPML Supporter since 03/2023

Languages: English (English )

Timezone: Asia/Dhaka (GMT+06:00)

Hi There,
Thanks for contacting WPML Support.

I understand what you're looking for and will try my best to assist you in this matter.

The instructions provided in the documentation for translating the string are accurate. To enable proper translation from the String Translation, it's necessary to update the AMP template with the code provided in the documentation(Screenshot: hidden link).

However, based on the screenshot you shared, it appears you have HTML content in the Footer. To achieve translation for this section, the entire HTML block needs to be translated. Please follow these steps and update me on the outcome:

1. Navigate to WPML > String Translation. Scroll to the bottom and click on the link titled "Translate texts in admin screens »".
2. In the search field, type: [redux_builder_amp].
3. Search for the option named "[redux_builder_amp]amp-footer-text-area-for-html". You might need to navigate using the pagination to find this option.
4. When found, select this option and add it to the String Translation list.
5. Return to WPML > String Translation, and you should see the HTML content listed there. Click on the "+" icon to add your translation. You can copy the entire HTML block into the translation field and simply modify the text portion as needed. For guidance, refer to this screenshot: hidden link

For more details on registering string for translation from the Admin screen, please refer to this guide: https://wpml.org/documentation/getting-started-guide/string-translation/finding-strings-that-dont-appear-on-the-string-translation-page/#translate-admin-and-settings-strings

I hope it will help. If there is anything else you need help with, please feel free to let me know. I will be happy to help.

Best regards,
Prosenjit

February 9, 2024 at 8:10 pm #15287465

Tucango

Thanks, it works now. But after changing the AMP footer code FROM:

<footer>
<!-- Your existing footer content here -->

<!-- Container for the fixed button -->
<div class="amp-button-container">
hidden link" class="amp-button">CLICK TO ASK A DERMATOLOGIST NOW
</div>
</footer>

TO

<div class="amp-button-container">
hidden link" class="amp-button">
<?php echo apply_filters('wpml_translate_single_string', 'ASK A DERMATOLOGIST', 'first-derm-footer', 'amp-button-text'); ?>

</div>

The text box doesn't show correctly as before. How can I solve this last point?

Live example at hidden link

Captura de pantalla 2024-02-05 a la(s) 16.46.54.png
Captura de pantalla 2024-02-09 a la(s) 17.07.17.png
February 11, 2024 at 11:47 am #15289432

Prosenjit Barman
WPML Supporter since 03/2023

Languages: English (English )

Timezone: Asia/Dhaka (GMT+06:00)

Hi There,
Thank you for the feedback.

It appears that PHP code has been added to an HTML box. If PHP code support is not enabled for the HTML box, the PHP code will simply appear as plain text on the frontend.

If you wish to set the button's name using PHP, it would be advisable to consult the support team of the AMP plugin that you're using for guidance on how to properly embed PHP code so that it works as intended. By using the 'wpml_translate_single_string' hook, the button's name will become eligible for translation and you'll be able to translate the name from the String translation section.

If the approach of adding the button name through HTML is suitable for your needs, I recommend continuing with this method and translating the entire HTML code block through the String Translation, as outlined in my previous message.

I hope you can understand. Please feel free to let me know if you need further assistance in this matter. I will be happy to help.

Best regards,
Prosenjit

February 15, 2024 at 3:00 pm #15307989

Tucango

I have updated the code from PHP to HTML. It's being detected by WMPL as you can see on the screenshot. It works great on English articles:

hidden link

But after translating the Spanish version, I still shows up in English. Here is an example of a Spanish article: hidden link

How can I solve this? Thanks

Captura de pantalla 2024-02-15 a la(s) 12.00.31.png
Captura de pantalla 2024-02-15 a la(s) 11.58.45.png
Captura de pantalla 2024-02-15 a la(s) 11.55.49.png
February 16, 2024 at 7:04 am #15310075

Prosenjit Barman
WPML Supporter since 03/2023

Languages: English (English )

Timezone: Asia/Dhaka (GMT+06:00)

Hi,

The AMP plugin that you're using has an extension for WPML, which is required to achieve full multilingual compatibility. Please check the links below for more details:

- https://wpml.org/plugin/accelerated-mobile-pages/
- hidden link

From the WPML Debug Info, I noticed that the extension is currently not active on your site. Would you kindly activate the extension and then check again?

Let me know the update. I will be happy to help if you need further assistance in this matter.

Best regards,
Prosenjit

February 16, 2024 at 3:35 pm #15312280

Tucango

Thanks! I will now contact my client and check how to move forward. Will let you know in case I need any extra help. Greetings

February 16, 2024 at 5:11 pm #15312690

Tucango

Thanks, I have installed and activated the plugin, but I still see the button text in english on spanish pages like this one: hidden link

English version here: hidden link

What could be the reason?

Captura de pantalla 2024-02-16 a la(s) 14.11.21.png
Captura de pantalla 2024-02-16 a la(s) 14.10.37.png
February 19, 2024 at 5:52 am #15315893

Prosenjit Barman
WPML Supporter since 03/2023

Languages: English (English )

Timezone: Asia/Dhaka (GMT+06:00)

Hello There,
I hope you're doing well. Sorry for the delay in responding due to the weekend.

Thank you for patiently trying out the suggestions. As the issue persists, a closer inspection will be required to understand the root cause of the issue.

I want to request temporary access (wp-admin and FTP) to your site to take a better look at the issue. It would be better to have a testing site where the issue is replicated.

You will find the needed fields below the comment area when you log in to leave your next reply. The information you will enter is private which means only you and I can see and have access to it.

Maybe I'll need to replicate your site locally. For this, I’ll need to temporarily install a plugin called “Duplicator” or "All in One WP Migration" on your site. This will allow me to create a copy of your site and your content. Once the problem is resolved I will delete the local site. Let me know if this is ok with you.

IMPORTANT
-Please backup site files and database before providing us access.
-If you do not see the wp-admin/FTP fields this means your post & website login details will be made PUBLIC. DO NOT post your website details unless you see the required wp-admin/FTP fields. If you do not, please ask me to enable the private box. The private box looks like this:
hidden link

Looking forward to your response.

Best Regards,
Prosenjit

February 20, 2024 at 8:20 am #15320871

Prosenjit Barman
WPML Supporter since 03/2023

Languages: English (English )

Timezone: Asia/Dhaka (GMT+06:00)

Hello There,
Thank you for sharing the access information.

I've conducted an in-depth analysis of the issue and discovered a solution for translating the button text. During the investigation, I found that the HTML box, where you've added the HTML contents is not been configured to display translated HTML in the frontend. Therefore, The viable method for translating the text, is outlined in the documentation that you've shared while creating the ticket

- hidden link

Based on the provided documentation, it was necessary to insert a particular code snippet into the Footer template utilized by the AMP for WP plugin. Since you opted for the "Design 2" template for the AMP version, I accessed and edited the footer template of this specific AMP template at "wp-contents/plugins/accelerated-mobile-pages/templates/design-manager/design-2/footer.php". After adding the required code, I translated the button text from String translation.

This adjustment resulted in the button text being accurately displayed in the Spanish version of the site on the front end. Please check this screenshot for a better understanding: hidden link

To ensure the button text is correctly displayed in different language versions of the site, please translate the button text into the respective languages.

Let me know if there is anything else if you need help with. I will be happy to assist.

Best regards,
Prosenjit

February 20, 2024 at 4:05 pm #15324018

Tucango

Awesome! Thanks for your help on this case. Should I prevent updating the AMP plugin regarding the template modification?

February 22, 2024 at 3:49 am #15330990

Prosenjit Barman
WPML Supporter since 03/2023

Languages: English (English )

Timezone: Asia/Dhaka (GMT+06:00)

Hi There,

Happy to assist you in this matter. 🙂

Because the code is directly embedded in the plugin file, any updates to the plugin will overwrite the custom changes. You have two alternatives to consider:

1) Use the Hook provided by the AMPforWP plugin to append the code to the footer. By adding the hook code to the functions.php file of your theme, your changes will always be there even after plugin updates. For information on the available hook to insert code into the Footer, please refer to the following link:

- hidden link

2) Develop a custom footer template within your child theme for the necessary customizations. This approach ensures that your modifications remain intact regardless of plugin updates. For guidance on this process, consult the instructions in their tutorial at the link below:

- hidden link

If you require further assistance with the hooks or creating a different template, do not hesitate to contact the AMPforWP plugin support team. They should be able to offer detailed advice on integrating code into the AMPforWP plugin's Footer template.

I hope you can understand. Please feel free to let me know if there is anything else if you need help with. I will be happy to assist.

Best regards,
Prosenjit

February 22, 2024 at 12:09 pm #15333353

Tucango

Thanks for your great support!