Transifex Live translation plugin
The Transifex Live Translation Plugin ("International SEO by Transifex") makes it easy to translate your WordPress site. It uses Transifex Live, a JavaScript-based approach to website translation that allows you to translate your web content in context without complicated processes or workflows.
With the plugin, you'll be able to:
Add the Transifex Live JavaScript snippet to your site without editing any code. This snippet is necessary to show translations to your visitors.
Create language/region-specific URLS subdirectories:
(e.g.
<a href="http://www.example.com/fr/">www.example.com/fr/</a>)or map existing language subdomains (e.g.,
fr.example.com) to the plugin. In both cases, the languages published via Transifex are seamlessly made available to your visitors.Add
HREFLANGtags to your web pages. These tags tell search engines which languages your site is available in.
Before we get started, here are some important links:
Getting started
Sign up and create a Transifex Live Project
Be sure you've signed up for a Transifex account. Then, after creating an organization, head to your Transifex Dashboard and hit the Create New Project button on the bottom left of your screen.
Fill in your project details, and when prompted to choose a project type, pick "Live" and add the URL of your site.
If this is your first project in Transifex, we recommend choosing your project's target languages when creating the project rather than adding them later.
Start translating your site using Transifex Live
After creating your project, you'll be redirected back to the Transifex Dashboard. Your new project will be pre-selected. You'll also see that your project now has one resource, which is simply a container for your source content and translations. Look for the Live button near the top right and click on it.
Your site will load in Transifex Live, and you'll be able to start saving and translating your content. For more information on how to use Transifex Live, check out our Transifex Live documentation.
Installing the WordPress plugin
Now that you have completed some translations, let's install the plugin in WordPress.
The easiest way to do this is through the WordPress Plugin Directory:
Log in to your WordPress admin panel, navigate to the Plugins menu, and click Add New.
In the search field, type "Transifex Live". Look for the plugin with the globe icon and Transifex logo. Once you've found it, click Install Now.
After the installation has been completed successfully, you'll be asked to activate the plugin. Just click Activate, and the plugin will be activated.
You can also install the plugin manually by uploading a .zip file. For more info on how to do this, check out the official WordPress documentation on managing plugins.
Adding the Transifex Live API key
Next, we'll associate your WordPress site with your project in Transifex:
First, copy the Live API key from the Transifex Live JavaScript snippet to your clipboard.
Go back to WordPress, head to Settings > Transifex Live, and add the Transifex Live API key you copied earlier.
Hit Save to save your API key to WordPress.
If you only want to use the plugin for adding the Transifex Live JavaScript snippet to your site, then you can click the 'Start Translating NOW' button to start using the Transifex sidebar right away. Otherwise, read on.
Advanced SEO settings
The Transifex Live Translation Plugin includes options that can make your site more SEO-friendly, in turn helping your site rank in global search engines.
With the plugin, you can set language or region-specific URLs for your site (we'll refer to them as regional URLs going forward to keep things simple). This is done by creating new language subdirectories through the plugin or by pointing to existing language subdomains.
Our WordPress plugin supports additional key SEO features to enhance your website’s visibility and user experience. Specifically:
Canonical Tags: Automatically added to pages to manage duplicate content and consolidate SEO value.
hreflang="x-default": Specifies the default page version, improving international SEO.
Example
<link rel="canonical" href="https://example.com/en">
<link rel="alternate" href="https://example.com/en" hreflang="en">
<link rel="alternate" href="https://example.com/fr" hreflang="fr">
<link rel="alternate" href="https://example.com/" hreflang="x-default">
These tags help search engines identify the preferred and alternate versions of your content, ensuring users are directed to the appropriate page.
WordPress installed in a Subdirectory
Within the 'Advanced SEO Settings' section, you'll find the option 'WordPress is installed under a subdirectory, e.g., http://www.example.com/cms/ ...', which is disabled by default. This option should only be enabled if your WordPress installation resides within a subfolder of your main website.
Your WordPress installation should follow one of the two configurations below:
WordPress General Settings:
WordPress address URL:
https://www.example.com/cmsSite address URL:
https://www.example.com
Or
wp-config.php Configuration
In your 'wp-config.php' file, define the following:
# wp-config.php
define('WP_SITEURL', 'https://www.example.com/cms');
define('WP_HOME', 'https://www.example.com');
Make Images and Links translatable
If you want all of the paths to images and links to be handled as translatable strings, then check this box.
URL structure
Disabled
This is the default mode, and regional URLs are disabled. The plugin will only add the Transifex Live JavaScript snippet to your WordPress site. All Transifex Live options – including the default language picker – are enabled and can be controlled from the Transifex Live settings.
Subdirectories
In this mode, the plugin will enable regional URLs and create language subdirectories on your site. If your English site's home page URL is http://www.example.com/, your French site's home page URL would be www.example.com/fr/.
📝 Note: You can only use languages first published from Transifex Live.
For each language, you can set the name of the subdirectory. What you set will always appear immediately after your domain, so if you use fr for your French pages, the URL for the French version of your Product page will look something like www.example.com/fr/product/.
If you recently published or unpublished a language in Transifex Live and it's not in the list, hit the Refresh Languages List button (note: your project's source language is also listed).
⚠️Warning: The plugin creates new sets of URLs when you enable the Subdirectory option. For example, if you have 10 English pages and publish three other languages using Transifex Live, your site will have a total of 40 URLs after turning on regional URLs. Proceed with caution!
After enabling the Subdirectory mode, you can specify which types of content will use the localized URL structure. So, if you only want to use it with pages and not posts, you have that option.
Subdomains
In this mode, the plugin will attempt to match the published languages of Transifex Live to a set of language subdomains you specify. If you already have existing language subdomains set up (this has to be done outside of the plugin), you can enter the language subdomain names in the plugin.
So if fr.example.com is the subdomain for your French site, put in fr. It is important that you set up the subdomains to match the languages that are published via Transifex Live.
Hreflang tags
When you enable subdirectory or subdomain mode, the plugin automatically adds hreflang tags to your site. The hreflang tag tells search engines that a page of your website exists in another language, allowing search engines to show the correct language-specific URL to users who search in that language.
This helps avoid duplicate content penalties so your website can rank in international SERPs. To read more about the hreflang tag, see Google's Search Console Help Center. The Hreflang code is automatically set based on the language code used by Transifex but it can be overridden by changing the value in the associated Hreflang textbox.
Helping Bots Read Translations
Transifex Live uses JavaScript to serve translations to end users. However, bots (think search engine crawlers and social media sites) can't always handle websites with JavaScript. To address this, we've added support for Prerender in our WordPress plugin.
First, what's Prerender?
Put simply, it's an Open Source tool that renders your site (including the JavaScript) and serves the pages to the bots.
By using the Transifex Live WordPress plugin together with Prerender, search engines will be able to crawl and index your translated pages. And when people share a page from your translated site on Facebook, the preview will also be translated.
Setting up Prerender
You'll need to run a Prerender instance on your own server (any will do). One option is Heroku. Once you've set up Heroku, the setup process for Prerender is pretty straightforward:
$ git clone https://github.com/prerender/prerender.git
$ cd prerender
$ heroku create
$ git push heroku master
For more details on setting up Prerender, see the Prerender repository on GitHub.
📝 Note: Prerender is Open Source, so it's free if you install it on your own server. If you decide to use Heroku, we recommend subscribing to a plan to avoid any downtime to your Prerender instance.
Enabling Prerender in the plugin
Once you've set up Prerender, head to the Transifex Live plugin settings in WordPress and check the box next to Enable Prerender. After that, add your Prerender server URL to the Prerender URL field.
Once you're done, hit Save Changes.
Language picker
By default, Transifex shows a language picker at the bottom left corner of your site after you've published translations. If the subdirectory or subdomain option is enabled in the plugin, your visitors will be redirected to the regional URL whenever they switch between languages.
You can customize the language picker. You also have the option to turn it off altogether. To do this, go to Transifex Live and click Settings at the bottom. Then, in the language picker position dropdown, select Do not place a picker and hit Save.
Troubleshooting tips
Refreshing WordPress URLs can be tricky! One way to make sure WordPress is using the latest URLs is to simply visit the Permalinks page in the WordPress settings. You don't need to update or change anything on this page for a refresh to occur.
Keep in mind that your WordPress URL must match the one that the site is published under in Transifex Live. Optionally, in Transifex Live, you can have two URLs set up – one for production and a second for staging. Each of these would require a separate WordPress environment.
Make sure your WordPress site is using a fully qualified public domain name and that your site is accessible from external Transifex servers.
Tips for developers
The Transifex Live plugin uses WordPress hooks to manipulate the links found in your website’s content, so they always point to the appropriate language. If you use custom post types (or one of your plugins does) that emit the `the_content` filter, our code might not be triggered.
For those cases, it is recommended to manually trigger our custom filter `tx_link` before you return your content, as seen in the example below:
e.g.
$updated_content = apply_filters('tx_link', $original_content);
It is also recommended to use widgets in your theme instead of custom code since this allows you to make your integration more future-proof against incompatibilities with 3rd party modules.
If any issues arise after updating either WordPress or Transifex Live WordPress plugin to a newer version, then we would suggest you try the following tips:
Clear the WordPress cache.
Restart your Apache/nginx server and clear its cache if possible.
Reinstall the plugin.
Community integrations
Besides the Transifex plugin, our community has built several other integrations with WordPress:
PackZip: Mail Poet created PackZip, a ruby app based on Sinatra that integrates GIT and Transifex command-line client in one tool. Here's an article about PackZip with an animated screenshot.
Transifex Stats: The codepress/Transifex-Stats WordPress plugin allows you to easily display the completion statistics of your Transifex project on your WordPress website (screenshot).
💡Tip
Looking for more help? Get support from our Transifex Community Forum!
Find answers or post to get help from Transifex Support and our Community.