Syncing custom fields between 2 languages (with WPML)
As a WordPress developer, one of the common challenges you may face is syncing custom fields across multiple languages when using a translation plugin like WPML. By default, the saved value of a custom field is not automatically synced, only the name of the variable is.
In this blog post, we'll explore a solution to ensure that your custom field values are consistent across all language versions of your WordPress site.
The Problem
When working with multilingual WordPress sites, it's common to use custom fields to store additional content or metadata. However, the default behavior of custom fields is that they are language-specific, meaning that each translation will have its own set of custom field values.
This can be problematic if you have a custom field that should have the same value across all language versions of your site. For example, let's say you have a "Product Description" custom field, and you want the value of this field to be the same for all language versions of your product page.
The Solution
The solution to this problem is to store the custom field value only in the main language version of the page and then use a custom function to retrieve the value from the main language version, regardless of the current language.
Here's how you can do it:
-
Don't add the custom field to other languages: When adding the custom field to your pages, only add it to the main language version. Don't add the same custom field to the other language versions.
-
Retrieve the custom field value from the main language version: In your template, use the following code to retrieve the custom field value from the main language version:
<?php the_field('fieldname', lang_page_original_id($post->ID)); ?>
- Create a custom function to get the main language ID: To make this work, you'll need to create a custom function that retrieves the ID of the main language version of the current page. Add this function to your
functions.php
file:
function lang_page_original_id($id) {
if (function_exists('icl_object_id')) {
return icl_object_id($id, 'page', false, 'MAIN LANGUAGE CODE EX: SV');
} else {
return $id;
}
}
In this function, replace 'MAIN LANGUAGE CODE EX: SV'
with the actual language code of your main language (e.g., 'en'
for English, 'fr'
for French, etc.).
Here's how this solution works:
- By not adding the custom field to the other language versions, you ensure that the value is only stored in the main language version of the page.
- When you use the
the_field()
function to display the custom field value, you pass the lang_page_original_id()
function as the second argument. This function checks if the WPML plugin is active, and if so, it retrieves the ID of the main language version of the current page.
- The
the_field()
function then uses the retrieved main language page ID to display the custom field value from the main language version, even if the current page is in a different language.
This approach ensures that the custom field value is always consistent across all language versions of your site, without the need to manually manage the custom field values for each translation.
Real-World Example
Let's consider a real-world example to see this solution in action.
Suppose you have an e-commerce website that sells products in multiple languages. You have a "Product Description" custom field that you want to keep consistent across all language versions of the product pages.
Here's how you would implement the solution:
- Create the custom field: In the WordPress admin, create a custom field with the name "Product Description" and add it to the main language version of your product pages.
- Don't add the custom field to other languages: When creating the translation for your product pages, do not add the "Product Description" custom field to the other language versions.
- Retrieve the custom field value: In your product page template, use the following code to display the "Product Description" custom field value:
<div class="product-description">
<?php the_field('product_description', lang_page_original_id($post->ID)); ?>
</div>
- Add the
lang_page_original_id()
function: In your functions.php
file, add the lang_page_original_id()
function as shown earlier:
function lang_page_original_id($id) {
if (function_exists('icl_object_id')) {
return icl_object_id($id, 'page', false, 'en');
} else {
return $id;
}
}
In this example, we're using 'en'
as the main language code, but you should replace it with the appropriate code for your site's main language.
Now, when a user visits your product page in any language, the "Product Description" custom field will display the value from the main language version, ensuring consistency across all translations.
Conclusion
Syncing custom field values across multiple languages in a WordPress site can be a tricky problem, but the solution presented in this blog post should help you overcome this challenge. By storing the custom field value only in the main language version and using a custom function to retrieve it, you can ensure that your custom field values are consistent and up-to-date across all language versions of your site.
If you're running a WordPress site with multiple languages and need to manage custom fields, be sure to implement this solution to keep your content synchronized and provide a seamless user experience for your multilingual visitors. And if you're looking for a powerful analytics tool to help you optimize your website's performance, be sure to check out Flowpoint.ai
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.