Looking for an easy way to translate an Oxygen WordPress website and go multilingual?
Oxygen is a popular WordPress website builder that offers clean code and deep support for dynamic content, which makes it a great option for anyone building custom WordPress sites for a living.
Oxygen lets you design your entire WordPress site using a visual, drag-and-drop interface, while still giving you access to the code underneath. It works for everything from business sites to WooCommerce stores, blogs, portfolios, and more.
One thing it doesn’t do, though, is let you turn your design into a multilingual site and offer your content and templates in multiple languages.
In this post, you’ll learn how to translate Oxygen websites into one or more new languages and create a multilingual site using the free TranslatePress plugin. Just like Oxygen’s visual, code-free approach, TranslatePress also gives you a simple visual translation interface to manage your site’s translations:
TranslatePress works out-of-the-box with all of your Oxygen designs, supporting everything from static designs to templates, dynamic content loops, and custom blocks that you’ve created with Oxygen. Any translations that you create are SEO-friendly and indexable, which helps you benefit from multilingual SEO.
You also have the option to use automatic translation from Google Translate or DeepL to save time. Or, you can enter all your translations from scratch using the visual editor.
Keep reading to learn exactly how to translate Oxygen with TranslatePress…
How to Translate an Oxygen WordPress Site: Step-by-Step Guide
Here’s your step-by-step guide to creating a multilingual WordPress site with Oxygen and TranslatePress…
1. Create Your Website With Oxygen
If you’ve already created your site with Oxygen in your native language, you can jump ahead to step #2.
If you haven’t, you’ll first want to set up your Oxygen site in the default language that you want your site to use. Basically, before you can translate content into a new language, you need to have the content that you want to translate!
To speed things up, you can import one of Oxygen’s many pre-built sites:
If needed, you can customize your one-off pages and templates using Oxygen’s visual editor:
Then, once you’ve set everything up in your site’s native language, here’s how to translate it using TranslatePress.
2. Install TranslatePress and Choose Language(s)
To get started, install and activate the free TranslatePress plugin from WordPress.org. Then, go to Settings → TranslatePress to choose the language(s) into which you want to translate your content.
With the free version of TranslatePress, you can translate your site into one new language (two languages total). If you need to translate your site into multiple new languages, you can purchase the Personal license to use unlimited languages on your site.
Here’s what it would look like to translate an English-language site into Spanish:
3. Set Up Automatic Translation (Optional)
If you want to save time when translating your Oxygen site’s content, TranslatePress supports automatic machine translation via either Google Translate or DeepL.
You can use Google Translate with the free version of TranslatePress, while you’ll need to purchase the Business license to access the DeepL integration.
When you use automatic translation, TranslatePress will query those services to generate the translations, but it will store those translations locally in your site’s database. That means that:
- You don’t need to make external queries on each page load.
- You can fully edit all of the automatic translations and refine them as needed.
- You’ll only need to pay for the translation service one time, which saves you money. You can also set custom limits, which gives you the option of staying within Google Translate’s free tier.
If you want to set up automatic translation, you can do it from the Automatic Translation tab of the TranslatePress settings area. Here are setup guides for both services.
4. Start Translating Oxygen Designs
Now, you’re ready to start translating your Oxygen designs (or manually refining your translations, if you used automatic translation).
To access the visual TranslatePress editor, open the page that you want to translate on the front-end of your site and click the Translate Page button on the WordPress toolbar:
This will launch an interface that’s quite similar to the native WordPress Customizer. You’ll see a live preview of your site on the right and a sidebar on the left where you can manage your translations.
To translate any text/element, all you do is hover over it and click the pencil icon. That will open the translation in the sidebar, where you can add/edit the translation:
And that’s it! You’ll use this same approach to translate every single part of your Oxygen designs, whether they’re templates or one-off pages. Let’s look at some specific examples of how to translate different parts of your Oxygen site…
Examples of How to Translate Specific Elements in Oxygen
Again, you’ll use the same visual interface from above to translate virtually every single part of your Oxygen site.
The technique is always the same – you hover over the element that you want to translate and click the pencil icon. With that being said, it might be useful to cover how to translate some specific parts of your Oxygen site, which is what we’ll do below.
How to Translate Oxygen Images
You might have situations where you want to display different images based on a user’s language. For example, the finance demo site from Oxygen includes a chart image with English text, which you’d probably want to translate to your other language(s).
TranslatePress makes it easy to translate any image. Just as with text, you can hover over the image and click the pencil icon. Then, you’ll be able to choose a different image file to use for each language:
If you’ve added image alt text, you’ll also be able to translate that if you have the SEO Pack add-on, which is available on the Personal license.
How to Translate Oxygen Header Builder
To help you design your site’s header and navigation, Oxygen includes its own Header Builder. You can use this feature to control your navigation and also pull in navigation menus from the native WordPress menu feature.
TranslatePress makes it easy to translate all of these elements. For example, you’ll be able to translate both your individual menu items, as well as other content like your logo image and tagline:
If you purchase the Business license, you even have the option to use completely different navigation menus based on a user’s language (rather than just translating the same set of menu items into different languages, as the free version allows).
How to Translate Restricted Content
Because Oxygen handles dynamic content so well, it makes a great option for membership sites or other types of dynamic sites where different users might see different content depending on their role and access privileges.
To handle these situations, TranslatePress offers a “View As” drop-down that lets you browse (and translate) your site’s content as different types of users.
With the free version, you can browse as anonymous vs logged-in users, while the Business license lets you browse your site as any user role:
How to Translate WooCommerce Products
If you purchase the WooCommerce license of Oxygen, you can use Oxygen’s visual interface to design your WooCommerce single product and shop archive pages. TranslatePress is fully compatible with WooCommerce and Oxygen’s integration, which means that you can use the exact same approach to translate your WooCommerce content.
You’ll be able to translate both gettext strings from the WooCommerce plugin (marked with a green pencil icon) and unique content from your products/that you’ve added with Oxygen (marked with the regular blue pencil icon).
For example, here’s a simple single product template created with the Oxygen Product Builder block – you can still translate all of the elements:
How to Translate Oxygen Blocks
One of the most unique features in Oxygen is the ability to design your own custom blocks to use in the WordPress block editor (this feature requires the Agency license). TranslatePress makes it easy to translate any of these custom blocks (as well as all other WordPress blocks).
Here’s a simple CTA block that we created with Oxygen:
You could then translate that block when editing that piece of content’s translations:
Other Tutorials
If you want to see even more examples, we have lots of other tutorials on ways in which you can use TranslatePress. These tutorials aren’t specific to Oxygen, but all the same basic principles will apply since TranslatePress offers full out-of-the-box compatibility with Oxygen:
- Editor (Gutenberg) blocks
- Custom fields
- Custom post types
- WordPress forms
- WordPress menus
- Images
- Popup content
- Sliders
- WooCommerce products
Optional: Only Display Certain Blocks in Specific Language(s)
So far, we’ve focused on how TranslatePress can help you fully translate Oxygen. But you also might have certain content elements that you only want to display in specific languages. For example, you might have some special CTA box that you only want to display to your English-language audience because the offer is only available in English.
To help you do this, TranslatePress has another dedicated Oxygen integration that lets you show/hide an element based on the language that a user has selected.
To set this up, go to the Oxygen editor interface and open the element that you want to language restrict. Then, click the Condition Settings icon and then Set Conditions:
In the Choose Condition drop-down, select Dynamic Data:
Then, choose PHP Function Return Value:
Set the Function Name equal to get_locale and then click Insert:
Then, set the custom value equal to the language code for the language that you want to target (you can find this code by going to Settings → TranslatePress and looking in the Code column of the All Languages section):
To add another language, you can repeat the same process to add another condition.
You can also use rules to exclude entire pieces of content from translation if needed.
5. Add Your Language Switcher
By default, TranslatePress adds a floating language switcher to the bottom-right corner of your site. However, you also have the option to move this language switcher to another area and/or customize its appearance.
To place your language switcher, you have a few options:
- Dedicated menu item – you can add it in Appearance → Menus and it will display in the menu that you included in the Oxygen Header Builder.
- Shortcode – you can add it in one of Oxygen’s shortcode blocks anywhere on your site.
- PHP function – you can add it in Oxygen’s Code Block.
- Gutenber Block – you can add it in your back-end of the post directly as a pre-made block.
You can also make additional choices, such as whether or not to display language flags, by going to Settings → TranslatePress.
Translate Your Oxygen WordPress Site Today
Oxygen is one of the best tools for building custom WordPress sites without needing to code everything from scratch. However, it only lets you create your site in a single language.
With the free TranslatePress plugin, you can fix that and translate 100% of your Oxygen content into one or more new languages.
You can get started with the free version of TranslatePress at WordPress.org. Then, upgrade to the premium version to get more useful features for your multilingual Oxygen website:
- Unlimited new languages
- DeepL support for automatic translation
- Improved multilingual SEO options
- Option to browse your site as different user roles
- Option to create completely separate navigation menus based on a user’s chosen language