How to translate Hestia theme using TranslatePress?

In this tutorial, we show you – step by step – how to install Hestia correctly, how to set it up with TranslatePress, and how to translate every element of your Hestia-built website for smooth everyday use with multilingual content.

1. Install the Hestia theme

The starting point with Hestia is pretty standard. Go to your WordPress dashboard, then into Appearance → Themes and click on Add New. In the search field, enter Hestia. Install and activate the theme normally.

2. Add your original content

At this stage, you can customize the pages and the front page sections that came with Hestia and add your own original content.

Don’t worry about translations yet. For now, focus on creating content in your site’s default language. We’re going to add additional languages in the next steps.

As part of the theme design, Hestia fetched the homepage sections, new sections for the blog page(such as featured posts, authors, and subscribe), and also a set of other features, like the header layout. You can go through them now and customize their contents to fit your needs. If you need help exploring the theme options do not hesitate to check the documentation for Hestia, or Hestia Pro.

You can also create new pages – either via WordPress’s standard block editing interface or with your page builder plugin. The bare minimum is to customize your home and about pages.

Again, what you’re working on now is just the primary language version of your site.

3. Install TranslatePress and configure it

Once you have the main language version of the site ready, it’s time to turn it multilingual!

This is where TranslatePress comes into play!

In your WordPress dashboard, go to Plugins → Add New.

Enter TranslatePress into the search field, and click on Install Now and Activate.

Next, go to Settings → TranslatePress to configure the basic settings.

The first order of business is to select the default language of your website. Most likely, that setting is already correct. If not, choose the right language.

Next, in the Add Languages section, add a new language to your website.

👉 The free version of TranslatePress allows you to add one additional language. If you need more than that, you can upgrade to the paid version, which will let you translate your Hestia site to unlimited languages.

The other settings on this page are all optional, but you can go through them to get a better idea of what’s possible in TranslatePress.

Remember to click on the Save Changes button when you’re done here.

🤖 Note; if you’d prefer to have all your translations done on autopilot, you can switch to the Automatic Translation tab in the settings panel.

TranslatePress allows you to connect your site to Google Translate API or DeepL – an advanced machine translation solution (DeepL is available with the pro version of TranslatePress).

What’s great about this approach is that TranslatePress will do all the heavy lifting on its own, but then you can still step in afterward and fine-tune your translations to make them perfect.

With your new language added, you can now proceed to translate Hestia along with all your website content.

A good place to start when working on your translations with the Hestia theme is the site’s main menu.

Click on the Translate Site button in the settings panel or the top admin bar:

You’ll be taken to the translation interface of TranslatePress. Up top, hover your mouse over the main menu links. You’ll see a pencil icon next to each link. Click on any of these pencil icons and translate your menu items one by one.

Don’t forget to click on Save translation when you’re done with each one.

To see your menu translations in action, we need to take care of one more thing – adding a language switcher to the menu itself.

In the WordPress dashboard, go to Appearance → Menus. From the list of available menu items, select all your languages and add them at the end of the main menu.

With this done, you should see your language options in the menu:

5. Translate your Hestia homepage

Let’s now translate what’s usually the most important page on any website – the homepage.

To begin, visit your homepage and click on the Translate Page link up top.

You’ll see the main translation interface of TranslatePress, but this time, instead of customizing the menu, we’re going to work on everything else that’s on the page.

The great part about this whole process is that you can translate Hestia and all its contents simply by clicking on the pencil icon next to a specific piece of text and then adding your translation in the sidebar. Lastly, as always, click on Save translation when done.

For example, here’s what this looks like when translating the main headline:

Similarly, you can translate any other piece of text on the page: paragraphs, list items, subheadings, and so on.

This also includes translating buttons and other link texts. Again, click on the pencil icon next to any given button, and then enter your translation in the sidebar.

Apart from text content, you can also “translate” your images. In this case, “translating” images simply means replacing them with other images that may be better suited for a given language version of the site.

The good news is that the translation mechanism for this works the same. Again, hover your mouse over the image that you want to replace and click on the pencil icon next to it.

You’ll be able to upload a new image through the interface directly or pick an existing image from your site’s media library. Click on the Add Media button to do that.

All images that you can see on the Hestia homepage can be “translated” this way.

Last but not least, to find the remaining strings of text that Hestia uses on the homepage – but which might not be visible at the moment, look through the Strings List dropdown in the sidebar:

It’s best to carefully go through this list and make sure that everything has an accurate translation before you roll out your Hestia site to the public.

Translate the background images within the front page

The background images of the built-in sections from Hestia can be translated with custom CSS code. Each language configured in the plugin adds a CSS selector on the page(for example - .translatepress-en_US). Based on this selector, each section's background-image can be target and replaced with the desired URL. There are a few things that needs to be changed compared to the sample code snippets available below, the language code(for example from .translatepress-en_US to .translatepress-ro_RO), the URL of the desired background image, and for the Big Title Section, the slide number (for example from .item.item-1 to .item.item-2 ).

Big Title section (for Hestia free only)

/* Big Title section (Hestia free) */
.home.translatepress-en_US #carousel-hestia-generic .item > .page-header > .header-filter {
    background-image: url('https://s26049.pcdn.co/wp-content/uploads/2019/11/48967037207_c7f186facb_c.jpg') !important;
}

Slider section (for Hestia Pro only)

/* Slider section (Hestia Pro) */<br>.home.translatepress-en_US #carousel-hestia-generic .item.item-1 > .page-header > .header-filter {
    background-image: url('https://s26049.pcdn.co/wp-content/uploads/2019/11/48967037207_c7f186facb_c.jpg') !important;
}

About section

/* About */
.home.translatepress-en_US .hestia-about section-image {
    background-image: url('https://live.staticflickr.com/65535/50300014613_95fb0177b2_o.jpg?fdl=1');
}

Ribbon section

/* Ribbon */
.home.translatepress-en_US .hestia-ribbon {
    background-image: url('https://farm1.staticflickr.com/634/22657552743_d20b84e0a9_o.jpg?fdl=1');
}

Subscribe section

/* Subscribe */
.home.translatepress-en_US .hestia-subscribe {
    background-image: url('https://farm2.staticflickr.com/1713/25128832101_7c3530b0c0_o.jpg?fdl=1');
}

Contact section

/* Contact */
.home.translatepress-en_US .hestia-contact {
    background-image: url('https://live.staticflickr.com/5797/21575333719_2e2b3b658c_o.jpg?fdl=1');
}

6. Translate other pages within the website

The homepage is probably not the only page you have on your site. This is a good moment to go through every sub-page and translate them as well.

For those you do need, go through them one by one and translate them the same way you translated the homepage.

7. Translate the SEO parameters of your Hestia website

The last stage of full Hestia translation is taking care of some key SEO parameters of your site. This is an important step if you want your translated pages to appear in Google searches correctly.

The premium version of TranslatePress allows you to handle this through the SEO Pack add-on that’s part of the upgrade package. It has options for translating your pages’ slugs (unique URLs), page titles, and descriptions.

Handling the translations themselves is easy to do. For each page, enter the translation interface by clicking on the same Translate Page button in the top bar and then go immediately to the String List dropdown. At the top of it, you’ll find the SEO strings of the page:

Go through them one by one and add translations for each of your languages. Click on Save translation when done.

If you want to go the extra mile, you can also translate your images’ alt tags. To do this, with the SEO add-on enabled, click on the pencil icon next to any of your images. You’ll see a new Alt attribute box in the sidebar.

Adding alt tags to all images on your site will take a while, but it’s the kind of thing that can be the differentiating factor that puts your website above the competition in Google rankings.

Create a multilingual website with Hestia today

As you can see, getting the Hestia theme installed on your site and then making it fully multilingual is not difficult at all.

All it takes is some patience when translating your content piece by piece. TranslatePress hooks to Hestia's inner structure and lets you translate every single element that’s on the page (this includes text, images, headlines, buttons, you name it).

To follow this tutorial and get started, you can use the free version of TranslatePress available at WordPress.org.

Then, if you want to enhance your multilingual SEO, translate your site into more than two languages, use DeepL for automatic translation, and access a ton of other useful features, upgrade to the premium version.