Wordpress
Integrate LingoJS into WordPress to handle translations and language selection.
Last updated
Integrate LingoJS into WordPress to handle translations and language selection.
Last updated
To begin, you need to add the LingoJS script to your WordPress site. You can do this by adding the <script> tag to your theme's footer or header.
LingoJS allows you to effortlessly translate your WordPress website content and offer a multilingual experience to your users. There are two ways to integrate LingoJS with WordPress:
We now offer an official WordPress plugin that simplifies the integration process. This is the recommended method and ensures better compatibility and easier updates.
A. Install the Plugin
Navigate to your WordPress admin panel.
Go to Plugins > Add New.
Search for "LingoJS – Website Translation Integration" or visit the plugin page directly: 👉 LingoJS on WordPress.org
Click Install Now, then Activate the plugin.
B. Configure the Plugin
Once activated:
Go to Settings > LingoJS Integration.
Enter your Project Key.
Set your Base Language and Target Language(s).
Toggle additional options like:
✅ Remember user’s language
🌐 Show language switcher widget
That’s it! LingoJS is now active and ready to serve translations on your site.
If you prefer not to use the plugin or need a more customized setup, you can still manually include the LingoJS script on your site.
Option 1: Using Theme's footer.php
You can add the script directly to the footer.php file of your active WordPress theme. This will load the script at the bottom of your pages.
Go to Appearance > Theme Editor.
Find and select footer.php in the right sidebar.
Add the following code just before the closing </body> tag:
<script src="https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js"></script>
<script>
window.onload = function() {
if (window.lingojs && window.lingojs.initialize) {
window.lingojs.initialize({
projectKey: 'Your project key',
targetLanguage: 'de', // Define your target language or function to get the current language
baseLanguage: 'en',
rememberLanguage: true, // Decide whether to remember the user's language setting
showWidget: true // Decide whether to display the language change widget
});
}
}
</script>Option 2: Using a Plugin to Add Custom Scripts
If you're not comfortable editing theme files directly, you can use a plugin like Header and Footer Scripts or Insert Headers and Footers.
Install and activate one of the plugins mentioned above.
Go to Settings > Insert Headers and Footers (or similar, depending on the plugin).
Add the following code to the Scripts in Footer section:
<script src="https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js"></script>
<script>
window.onload = function() {
if (window.lingojs && window.lingojs.initialize) {
window.lingojs.initialize({
projectKey: 'Your project key',
targetLanguage: 'de', // Define your target language or function to get the current language
baseLanguage: 'en',
rememberLanguage: true, // Decide whether to remember the user's language setting
showWidget: true // Decide whether to display the language change widget
});
}
}
</script>In the above code, we have initialized LingoJS when the page is loaded. The projectKey, targetLanguage, and other options are configured when the script is loaded on the page.
To allow users to dynamically change the language, you can add a JavaScript function that interacts with the LingoJS API. Here’s how to add a button or any other mechanism to trigger the language change.
Example: Add a Language Switcher
You can add this functionality inside your theme's template files or through a custom widget.
Open header.php, footer.php, or wherever you want the language switcher.
Add the following HTML and JavaScript:
<button onclick="changeLanguage('fr')">Change Language to French</button>
<script>
function changeLanguage(lang) {
if (window.lingojs) {
window.lingojs.changeLanguage(lang);
}
}
</script>This creates a button that, when clicked, changes the language to French.
LingoJS automatically detects text content on your page and sends it to the dashboard for translation. However, if you have content that should not be translated, you can use the translate attribute to control translation behavior.
Disabling Translation for an Element:
To prevent certain elements from being translated, you can add the translate="no" attribute to them:
<p translate="no">This text will not be translated.</p>Handling Dynamic Variables:
For dynamic variables (content that shouldn't be translated within a sentence), use the <var></var> tag. This allows the dynamic content to be shown in the dashboard but keeps it empty for translation purposes.
<p>This is a sentence with a dynamic value: <var>dynamicValue</var></p>Remember Language: If you want the language choice to persist (i.e., for users to see the same language on returning visits), you can set rememberLanguage: true in the initialization.
Translation Widget: If you want to display a translation widget (for users to change the language on their own), you can enable it by setting showWidget: true.
Do not modify HTML tags in the LingoJS dashboard. The translations are automatically generated to ensure they retain the proper attributes (e.g., classes, styles) from the DOM.
Ensure that your projectKey is correctly configured for your LingoJS project.
When you edit a translation in the LingoJS dashboard, do not modify the HTML tags (like <div>, <span>, or <p>) within the translation interface. These tags are automatically generated by LingoJS as decorators to maintain their structure and ensure proper styling and functionality on your site.
Changing these HTML elements in the dashboard could lead to issues, such as:
Loss of formatting: The translations might not retain their original structure or styling.
Breaking functionality: Tags like <div>, <span>, or other elements might carry important attributes (like class or id), which are necessary for your layout and interactivity.
LingoJS automatically generates these HTML elements in the translation process, which are then reused in your website’s DOM once the translations are applied. Modifying these tags in the dashboard would disrupt this process, causing translations to break or misalign with the intended design.
By following these steps, you can successfully integrate LingoJS into your WordPress site. LingoJS will handle text translations and allow dynamic language switching through the API, providing a seamless multilingual experience for your users.