With the plugin, you'll be able to:
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.
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:
Sign up and create a Web Project
Be sure you've signed up for a Transifex account. Then after creating an organization, head to your Transifex Dashboard and hit the Add project button. Fill in your project details, and when prompted to choose a project type, pick "Web Project" 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 how to use Transifex Live, check out our Transifex Live documentation.
Installing the WordPress plugin
Now that you have some translations complete, 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 Plugin 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:
Go back to WordPress and head to Settings > Transifex Live and add the Transifex Live API key you copied earlier.
Hit Save to save your API key to WordPress.
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're able to 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.
If you plan to enable regional URLs, we strongly recommend disabling the language picker.
Let's look at each of the different configuration options.
In this mode, the plugin will enable regional URLs and create language subdirectories in 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 that you can only use languages that have been 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.
The plugin creates new sets of URLs when you enable the Subdirectory option. For example, if you have 10 English pages and publish 3 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.
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.
When you enable subdirectory or subdomain mode, the plugin will automatically add hreflang tags to the of 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 to avoid any 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, however it can be overriden by changing the value in the associated Hreflang textbox.
First, what's Prerender?
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, for example, the preview will be translated as well.
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 straight forward:
$ 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.
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.
By default, Transifex shows a language picker at the bottom left corner of your site after you've publish 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 disable it all together. To do this, go to the Transifex Live and click Settings at the bottom. Then in the language picker position dropdown, select Do not place a picker and hit Save.
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.
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).