• Documentation
  • Integrations
  • WordPress

WordPress

Transifex Live Translation Plugin

The Transifex Live Translation Plugin makes it easy to translate your WordPress site. It uses Transifex Live, a JavaScript-based approach to website translation which 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 files. This snippet is necessary in order 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 HREFLANG tags 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 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.

project-create-types.png#asset:100

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.

    WordPress-6.png#asset:2230

  • 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.

    WordPress-7.jpg#asset:2231

  • 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:

  • First, get your Transifex Live JavaScript snippet from Transifex and copy it to your clipboard.

  • 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.

    WordPress-8.jpg#asset:2237

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'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.

WordPress-16.jpg#asset:2244

Note

If you plan to enable regional URLs, we strongly recommend disabling the language picker.

Let's look at each of the different configuration options.

Configuration Modes

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 Transifex Live settings.

Subdirectories

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.

WordPress-11.jpg#asset:2245

Heads up!

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.

WordPress-12.jpg#asset:2246

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.

WordPress-13.jpg#asset:2247

Hreflang tag

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.

Helping Bots Read Translations

Transifex Live uses JavaScript to serve translations to end users. However, bots (think search engines 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, for example, the preview will be translated as well.

WordPress-17.png#asset:2254

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.

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.

WordPress-18.png#asset:2255

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 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.

WordPress-14.png#asset:2256

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.

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).