Skip to content

Instantly share code, notes, and snippets.

@montrealist

montrealist/hestia-guide-for-wpml-users.md

Last active June 13, 2020 06:14
Show Gist options
  • Save montrealist/521b41bd7d23473451cef64c325412b4 to your computer and use it in GitHub Desktop.
Save montrealist/521b41bd7d23473451cef64c325412b4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hestia-guide-for-wpml-users.md

Hestia free theme for WPML users


Is this guide for you?

This will give you steps to install the free version of Hestia WordPress theme, cover its most interesting features, and show how to quickly set up basic translations with the WPML plugin.

What you'll need

  • Basic familiarity with WordPress
  • A web site with access to the WordPress admin dashboard
  • Access to the WMPL WordPress premium plugin

Notable theme features

  • One-page responsive theme - the entire site can live on one page
  • Includes "sites library" frontpage demos for various use cases (e-commerce, travel agency, gym, etc.)
  • WooCommerce compatible: many shop settings can be modified right in the customizer
  • Sticky header - called Very Top Bar - with plenty of configurations
  • Uses Google Material design - helps promote consistent UX across web sites

Download, install, activate

  1. First, log in to your WordPress dashboard (WP-admin). On the left side click on Appearance > Themes.

2. Click on the Add New button at the top of the screen:

screenshot of portion of WordPress admin dashboard with arrow pointing to the Add New theme button

  1. At the top right in the Search themes... box type in "Hestia"

4. Mouse over the one search result and click on `Install`

screenshot of WordPress admin dashboard with search results for Hestia theme

  1. Once the theme files finish downloading the same button will change to Activate - click on it. After this, the theme is installed!

Sites library

These are a great starting point if a new blank theme leaves you wondering what to do next.

Here we will import the Energy Panels Demo to play with:

screenshot of WordPress admin dashboard with 3 steps for importing demo content (click on Appearance, Hestia Options, Sites Library, and finally Import for one of the demos)

After clicking on Import you'll see a modal dialogue:

screenshot of a modal dialog for importing demo content

Plugins

Hestia theme developers recommend these plugins:

  • *️⃣ WPForms Lite - contact forms that easily integrate with the theme
  • *️⃣ Orbit Fox Companion - needed to enable some sections on the homepage (Team, Testimonials, Features, Ribbon, and Clients Bar)
  • WooCommerce - can have an e-commerce store right on the site's homepage
  • SendinBlue - allows you to send out email and newsletters

*️⃣ Note: you can install these plugins right from theme options:

screenshot of WordPress admin dashboard with arrows pointing to installing recommended plugins for the Hestia theme

Frontpage sections

The frontpage has 11 highly customizable sections. In the admin dashboard, they live under Appearance > Customize > Frontpage Sections.

If you pull in one of the demo sites as we did above, some of the sections will be disabled. You can click on a section and uncheck Deactivate to add it back.

Note: Orbit Fox plugin needs to be active for these sections: Team, Testimonials, Features, Ribbon and Clients Bar (maybe integrate it into the main list with an asterisk or a table)

If you want to reorder the sections you can buy the Pro version of Hestia theme.

Click here to see the unique features of each section.


Translations with WPML

Here's how to set up a multilingual site with Hestia and WPML plugin.

Note: If WPML is already active and configured, skip to Translate frontpage content.

Setup

  1. At a minimum, you want to install and activate these plugins: WPML Multilingual CMS, WPML String Translation, and WPML Translation Management.
    Please click here for detailed steps.

2. Once plugins are activated, `Configure WPML` button will appear at the top:

screenshot of Plugins page of the admin dashboard with the Configure WPML button and arrow pointing to it

  1. At step 1, set the current content language (primary language for the site)

4. Step 2: choose additional languages. For example, French and Brazilian Portuguese
5. You can leave the other settings as is or tweak as needed. Just make sure you go through all the setup steps till the end and click `Finish`.

You are now ready to start translating your content.

Translate frontpage content

We will focus on translating the static frontpage here. The other scenario is having the latest posts show up on the homepage: click here for instructions.

  1. Go to Dashboard -> Pages and add a new page for your language:

screenshot of Pages list with arrow pointing to the link to add a translation for a page


  1. In the menu on the right click Copy content from English - you can replace English strings with French translations later.

screenshot of Page editor with arrow pointing to the "Copy content from English" button

  1. Change the page title to something different, such as Front - French, then click Publish... at the top right, then Publish again. Done - you can click View page to get to the French version. Notice the URL in the address bar will be something like site.com/front-french/?lang=fr

4. It's time to translate some text. We are using Elementor - one of the recommended page builders for Hestia. The theme is compatible with most popular page builders, so this step will be similar. We can click on `Edit with Elementor` (or `Modifier avec Elementor` in French) at the top and update each section with translated text.

screenshot of French version of the home page with URL highlighted and arrow pointing to the Modify with Elementor button

We now have our home page in 2 languages:

screenshot of French and English home pages combined with arrow highlighting differences in the URL and string translations on each page

Note: this assumes we have set the Permalink settings to "Day and name" beforehand.

Translate the main menu

If we want to be able to navigate between our translated pages, we need to translate the main menu.

  1. First, make sure you have translated all the pages that you want on your translated menu.

2. On the left side, find `Appearance -> Menus`.
3. Now you can click on either link to create a new menu translation:

06.5 screenshot with arrows pointing to links that create a new menu translation

  1. Give the menu a clear name - for example, Primary Menu - French. Then add pages to it:

06.6 screenshot with arrows pointing to pages being added to the new menu translation

Note: creating menu links to sections of the home page is a bit more involved, please click here for instructions.
One more step. Let's say we want a link to the translation for the current page to show in the main menu, next to the other items.

  1. In the left menu click on WPML at the bottom and find Menu language switcher section. Click on Add a new language switcher to a menu.

6. Pick `Primary menu` in the drop-down and customize the look:

06.7 screenshot of the modal dialog with menu language switcher options

Once you save you should be able to click between your translations:

06.8 - animated screenshot of clicking between French and English translations of the home page

Conclusion

Overall Hestia WordPress theme is a clean, functional, and flexible single-page theme that plays well with major page builders. It integrates well with WooCommerce and is simple to get started with. It's also straightforward to set up for a multilingual web site.

Click here for the full documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment