Also checkout the Troubleshooting page.
Author 诗语
Translation Editor
The Translation Editor can be accessed from both the Settings page or from the Admin bar.
Normally, you can access it from the WordPress Admin Bar -> Translate Site button.
If the Admin Bar is not available (for example, wordpress.com hosting replaces the default admin bar with it』s own), you can access it from WordPress -> Settings -> TranslatePress -> Translate Site.
It』s a simple interface that allows you to translate your website page by page.
Edit visible text
The main functionality of the translation editor is the possibility to translate string by string your entire page.
Simply hover over a string, click the edit button that appears on the left and translate your string in the left translation interface.
Changing language
Selecting a new language will allow you to navigate your site in that particular language, making it a lot easier to notice untranslated strings.
Search for a string
Not all detected string are visible in the page. Strings like SEO Title, meta description and sometimes other strings that don』t have a the edit button can be found by simply searching the list of strings.
Browse As
You can Browse your website from the translation editor as your self (logged in) or as a non-logged in user. This makes it easy to translate pages that are dynamic based on the logged in / non-logged-in status.
You can navigate as a different user role with the Browse as Role Addon.
Translate SEO elements
The SEO Addon is only available in the paid versions of the plugin.
Using this addon you can translate all the SEO elements from every page:
URL post/page/custom post type slug
page title
page description
image alt tag
Facebook and Twitter title and descriptions (these are usually added by your SEO plugin and appear when users share your content)
To translate the above, choose them from the string list under Meta Information.
TranslatePress works out of the box with all SEO plugins.
Using the SEO Pack addon, TranslatePress will extend the sitemaps functionality added by SEO plugins and automatically create a multilingual sitemap that includes all your translated content.
Multilingual Sitemap support is added for the most popular SEO plugins:
Yoast
Rank Math
SEOPress
Having these important SEO elements translated, as well as creating a multilingual XML Sitemap will have a major impact on your site ranking into multiple languages.
Here』s a short video covering how to translate the most important SEO elements using TranslatePress and its SEO Pack addon:
Translation Blocks
To translate larger blocks of html with a single translation you need to join multiple translation strings into a translation block.
Merging a string with its parent paragraph is done by hovering a string that you want to join with its surrounding strings within the parent. Click the merge button shown for the hovered string.The block that will be merged is now highlighted in the live preview. The full text containing the HTML structure, is now shown in the left sidebar where you can optionally add a translation. Click the Save Translation button to confirm the creation of the translation block.
Merging a translation block
Now the translation block will be translated as a whole. You can edit the translation by clicking the Edit button . When writing a translation for the translation block, be careful to insert a valid HTML in the translation block.
Note: The merging icon will be available only to the strings compatible with translation blocks. Merging is allowed within block elements such as paragraphs and divs. Content received through wp-ajax requests is also compatible.The translation block is not compatible with Gettext strings or strings dynamically inserted with JavaScript.
To go back to translating individual strings from a created translation block you need to hover it and click the Split button . A pop-up will appear asking you to confirm separating the translation block into smaller pieces. The translation of the whole translation block will be available anytime you decide to merge back again.
How to Translate words in different contexts
You can also specifically select any HTML block to be translated as a whole by adding the class 『translation block』 to it. For example:
Image translation
Find out how to show different images for different languages in our image translation documentation.
Link translation
Find out which links can be manually translated and which are automatically translated in our link translation documentation.
Keyboard Shortcuts
Take advantage of the Translation Editor』s keyboard shortcuts to speed up the translation process.
Exclude a certain text or element from being translated
There are situations when you might want to exclude a certain HTML element from being translated by TranslatePress.
How to exclude text or an element from being translated
You can easily achieve this by using the following attribute: data-no-translation.
Attributes provide additional information about HTML elements.
Let』s say we want to exclude a certain paragraph of text from being translated.
This is a paragraph of text that will be excluded from translations.
This can be easily done for any HTML element (list, form, div, etc.) to exclude it from being translated.
You can achieve the same thing programmatically in PHP by using the filter trp_no_translate_selectors.
add_filter( 'trp_no_translate_selectors', 'trpc_no_stranslate_selectors', 10, 2);
function trpc_no_stranslate_selectors($selectors_array, $language){
$selectors_array[] = '.do_not_translate_css_class';
$selectors_array[] = '#do_not_translate_css_id';
return $selectors_array;
}
Note: This will exclude from being translated all the element』s child elements.
To exclude a certain element from being translated in the front-end use the attribute data-no-dynamic-translation. This differs from the data-no-translation attribute because it still allows the translation of the element in the server side. It will only stop being detected in the client side using JS.
In other words, dynamic changes over this element will be ignored.
This is a paragraph of text that will be translated only on the server side. Dynamic changes to this element using JS will not be detected.
There is also a filter where you can programmatically add other selectors to be excluded from dynamic translation: trp_skip_selectors_from_dynamic_translation
/**
*
* Skip dynamic detection of strings.
*
*/
add_filter( 'trp_skip_selectors_from_dynamic_translation', 'trpc_skip_dynamic_translation' );
function trpc_skip_dynamic_translation( $skip_selectors ){
$add_skip_selectors = array( '.section', '.other-section' ); // replace with a list of selectors
return array_merge( $skip_selectors, $add_skip_selectors );
}
You might also want to check out the Advanced Settings tab in TranslatePress which lets you:
Exclude selectors from translation
Exclude Gettext strings
Exclude from dynamic translation
Oxygen Builder Integration
TransatePress is also compatible with Oxygen Builder, that』s why if your website is built on Oxygen, you can display certain elements in specific languages directly from the Oxygen』s interface.
How to Show / Hide Oxygen Builder Elements Based on Language
Go to the Oxygen editor interface and open the element that you want to restrict based on a language. Then, click the Condition Settings icon and then Set Conditions:
Search in the Choose Condition drop-down, and select Dynamic Data:
Then, choose PHP Function Return Value:
Set the Function Name equal to get_locale and then click Insert:
Set the value equal to the language code for the language that you want to target (this code is available by going to Settings -> TranslatePress and looking in the Code column of the All Languages section):
If you want to target another language, you can just repeat the same process to add another condition.
Also, if needed, rules to exclude entire pieces of content from translation can be used.
Image translation
With TranslatePress you can show different images for each language of your website.
To do this just click the button corresponding to the image you want to translate or select the image by name from the dropdown of strings under Images option group.
In the left sidebar you can use the Add Media button to upload a new image or select one from the Media library. You can also just type the url of the translated equivalent of the original image in the text box.
Beside the image source, you can also translate all the existent associated meta information such as the alt attribute and title attribute. If the image is inside an anchor pointing to its larger version of the image for example, you will be able to translate the href attribute of the anchor.
All the translatable meta information associated with the image will be shown together with the image source in the sidebar.
Note: To translate the alt attribute you will need the SEO Add-on which is only available in the paid versions of the plugin.
Image slider translation
To translate an image slider or an image carousel, you simply need to hover over the images displayed and click for each image you want to replace when viewing in a different language.
Translating the alt attribute and all the other meta information can be done from the left sidebar of the Translation Editor.
Note: To translate the alt attribute you will need the SEO Add-on which is only available in the paid versions of the plugin.
Related: How to Translate Images in WordPress [Complete Guide]
Fix broken HTML
If the HTML from the theme or other plugins is not very well formatted, it can sometimes cause issues when using TranslatePress.
For example, using duplicated attributes in a tag can cause missing attributes, which in turn can lead to unexpected behavior of the website when browsing a translated page.
We have solutions that attempt fixing broken HTML. Go to Settings -> TranslatePress -> Advanced tab.
Activate option Fix spaces between HTML attributes first (attributes without spaces between them are not valid HTML)
If the first fix doesn』t work, try activating option Fix broken HTML. Only try this if you still have problems after using the first solution
If your issue is still not solved, look for bad formatting in the missing HTML and correct it in the plugins/theme.
Common bad formatting includes duplicate attribute on same tag, like the class attribute in the following example:
Conditional Shortcode Based on Language
Things like emails sent to users by different plugins cannot be translated using the visual translation interface because they do not appear in the front-end.
For these other types of content you can use the conditinal shortcode to display content based on language:
[trp_language language="en_US"] English content only [/trp_language]
This can be done also with PHP:
Another use case of the conditional shortcode is for translating images, basically displaying different images for different languages.
[trp_language language="en_US"]
[/trp_language]
[trp_language language="fr_FR"]
[/trp_language]
However, this can now be easily achieved directly from the front-end using the built in image translation functionality.
It is also possible to use the conditional shortcode to display Gutenberg blocks only on the desired language.
To do this, you will have to wrap the Gutenberg block between two shortcode blocks. The first shortcode block will contain the start of our conditional shortcode ([trp_language language=」en_US」]) and the second block will contain the end of our conditional shortcode ([/trp_language]).
The result can be seen in the following image. The first page is the default English version and the second page is the Spanish version of the same page.
Installation
TranslatePress allows you to translate your website content page by page, directly from the front-end.
It also supports automatic translation via Google Translate or DeepL.
Installing TranslatePress
TranslatePress installs and is activated just like any other WordPress plugin.
You can watch the following video for a quick installation tutorial or continue reading for an in-depth approach:
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
Download the plugin zip file
After purchasing a license, you』ll receive an email containing links to your purchased downloads and also the information to access your account.
By logging into your TranslatePress Account you will be able to download the main plugin, download the premium version, upgrade to another version, see your serial number, renew your license if it』s expired and also see your purchase history with us.
After you download the plugin:
Unzip the archive and upload the plugin folder under the /wp-content/plugins directory.
Or install it from your WordPress admin Plugins → Add New → Upload and upload your .zip file and then just hit Install Now button.
Activate TranslatePress
After the installation completes, just press Activate Plugin and the plugin will be ready for use.
Where is TranslatePress located in the navigation menu?
After the installation and activation, you can find the TranslatePress options page under Settings -> TranslatePress.
Activate your license
To activate your license, go to Settings → TranslatePress and then to the License tab.
The License tab will become available only after installing one of the paid versions.
Here, you need to enter the serial number you received with your purchase and press Activate License.
You need to press this button in order to activate the license. If the license is valid and not expired, the activation will work, else, it will fail to display a notice:
Remove TranslatePress Hooks
remove_hook( 'init', 'create_gettext_translated_global' );
$trp_loader->remove_hook( 'shutdown', 'machine_translate_gettext' );
}
view raw
remove_tp_hooks.php
hosted with ❤ by GitHub
WPBakery Integration
TranslatePress is fully compatible with the WPBakery page builder. If your website structure is built using WPBakery, you can easily display certain elements on a specific language or exclude it from certain languages.
After the integrations with Elementor and Oxygen Builder, WPBakery was not allowed to be missing from this list.
How to show/hide WPBakery elements based on language
In order to display or hide an element based on language TranslatePress gives you 2 options you can use:
Restrict by Language
To use this option click on the element that you want to restrict, and then go to the TranslatePress tab, where you』ll find the Restrict element to language option. Set the option to Yes and select the language in which you』d like to show the selected element.
Exclude from Language
Through WPBakery an extra option is available, Exclude from Language, through which you can display an element in all languages, except the one(s)* that you selected.
*To select multiple languages just use the Ctrl key while you selecting the languages with the cursor.