In today’s tutorial, I’ll walk you through the process of dynamically showing different languages on a WordPress website using the Visual Composer plugin, alongside the Polylang translation plugin. This setup will allow your website to display content in various languages based on user selection. Let’s dive into the details.
Introduction to Visual Composer and Polylang
Visual Composer is a drag-and-drop page builder plugin for WordPress, similar to Elementor, that allows you to create visually appealing pages without writing code. However, if you are using Polylang, a plugin designed to translate your website into multiple languages, it might not directly support dynamic text changes inside Visual Composer. But don’t worry; by using some custom code and shortcodes, you can integrate Polylang to work seamlessly with Visual Composer.
The Problem and the Solution
When I was searching for a solution to dynamically change text inside Visual Composer based on the user’s language preference, I realized there wasn’t a direct method available from the Polylang plugin. To overcome this limitation, I created a shortcode that responds when a user switches between languages. This shortcode dynamically displays the appropriate text in the selected language on the page. Below is a screenshot from my website, where we have different languages to select from in the header menu.
Step-by-Step Guide
Here’s how you can achieve this functionality:
1. Create a Custom Function
Start by creating a custom function in your functions.php file, which is part of your WordPress theme. This function will allow us to generate dynamic content in multiple languages.
For example, let’s say we want to dynamically display the “About Us” section in different languages. Here’s a sample PHP code that you can copy-paste in your functions.php file:
<?php
function footer_about_us() {
if(pll_current_language() == 'en') {
echo '<div class="footer-footeraboutus">
This is an english line. jaksd ashdajs dha jshdajs hd
</div>';
} else if(pll_current_language() == 'fr') {
echo '<div class="footer-footeraboutus">
This is fr line. sadasdasdajksdh asjdh ajs hdjashd
</div>';
} else if(pll_current_language() == 'de') {
echo '<div class="footer-footeraboutus">
This is de line. jhsda jashdjahsd jashdaj kshd
</div>';
}
}
add_shortcode('footeraboutus', 'footer_about_us');
// [footeraboutus]
?>
In this code:
- pll_current_language() is a Polylang function that detects the current language.
- Based on the current language, it returns the appropriate text (in this case, either English or French).
2. Add a Shortcode
Once you have your custom function, the next step is to register it as a shortcode in WordPress. Shortcodes allow you to insert dynamic content into posts and pages easily.
Now, you can use the shortcode [footeraboutus] anywhere on your website, including Visual Composer elements, and it will display the correct content based on the selected language.
3. Insert Shortcode in Visual Composer
After creating the shortcode, you need to insert it into your Visual Composer page. To do this:
- Go to the page you want to edit using Visual Composer.
- Click on the element where you want to display the dynamic text.
- Paste the shortcode
[footeraboutus]inside the element.
Once the page is updated, the content in this section will dynamically change based on the language selected by the user.
Final Steps
After setting up the shortcode and inserting it into the page, all that’s left is to test it. When a user selects a different language (for example, English or French) from the Polylang language switcher, the corresponding content will be displayed automatically.
This method allows you to:
- Dynamically display different languages on your website pages.
- Easily manage multilingual content using Polylang and shortcodes.
Conclusion
With this approach, you can integrate the Polylang translation plugin with Visual Composer to create a seamless, multilingual WordPress website. The key lies in creating custom functions and shortcodes that respond to language changes dynamically. Whether you’re building an “About Us” section or any other content block, this method will ensure your users get the right content in their preferred language.
If you have any questions, feel free to leave them in the comments below. Don’t forget to like and share this article if you found it helpful!
