Ghost Multi-Language Theme: Custom Dev Experience

Themes
1

Hey guys.

Just wanted to share a quick story of how we localized our Ghost publication into 6 additional languages, in case some of you might find it helpful.

Background:

  • We decided to localize our marketing & design publication MarketSplash.
  • Reasons: 1) reaching a global audience and growing our site faster and 2) SEO experimentation.

MarketSplash is running on Ghost Pro + Shoji theme by Fueko (btw, it’s awesome :heart: )

At the very beginning, we ran a quick research and stumbled on the official help doc that Ghost team wrote up for anyone who wants to localize their sites. Key takeaways were: 1) this seems doable and 2) we need dev help.

We also emailed Ghost Pro official support, and got this reply:

"It would indeed be possible to set this up in a single Ghost site. To achieve this, you’d need to setup individual content collections for each language using our Dynamic Routing feature, filtered by tag (e.g. a tag for each language), as described in our tutorial.

You would also want to setup individual template files for each language collection, so the proper language can be set in the code, e.g. the <html lang="de"> for example, as well as the translated bits of theme text, as you would not be able to use a locale for the translations. Locales should only be used when changing the site to a language other than English (from within the General Settings fo Ghost Admin), rather than offering multiple languages of content.

Given the advanced nature of this type of setup, you could also use a third-party service such as WeGlot, which makes the setup slightly easier to achieve, utilising subdomains as opposed to subdirectories.

Let me know if this helps answer your questions. If you have others, just let us know."

At that point, we realized that we definitely need help with the custom dev :slight_smile:

Sarah from Ghost recommended that we check out their experts directory of vetted freelancers/agencies. There are just a few companies/individuals in there, and so we just emailed all of them.

The Themeix guys were the most responsive & helpful, and assured us that they can handle the project, and so we went ahead.

I’m not technical, and so going to skip all the dev details (which I don’t fully understand anyway).

Long story short, within a few weeks, we got the localized theme. Under the new setup, the posts are filtered based on the tag. For example, all the German posts on MarketSplash live under the URL marketsplash dot com/de/ and all Italian content lives under marketsplash dot com/it/.

There’s a language widget at the bottom of each parent page, allowing the visitors to switch languages (disclaimer: we added the language-widget at the bottom because it’s unlikely that English-speaking audience will ever discover/land on the localized page; reason is that 95% of our audience discover our content through organic search).

There were a bunch of minor issues like site search not working, or page titles not displaying correctly, but the Themeix guys were very gracious and helpful, and helped us to iron out all the issues.

Summary:

  • ± 1 month in total (2 weeks of dev)
  • ± $500 in custom dev costs
  • ± Very smooth process

Thanks to:

  • Ghost support for being helpful and responsive
  • Themeix guys for doing all the heavy lifting
  • Fueko for developing the theme
6 Likes
2

Thanks for sharing your experience in detail. It was bit complex work but we are happy to make you happy.

Anyone feel free to contact us for free consulting about Ghost custom development. We have a bunch of Ghost Themes too.

2 Likes
3

Thank you for sharing the process and description of how you were able to move forward. These are the types of post I look for in this forum… because I too, am not a developer! Six months in the learning mode and still no website, but it coming closer together of complete concept to then full development. I want the exact same thing when ready for it and happy to know it possible to achieve. #themeix I’ll be reaching out in a month or two

4 Likes
4

Sure, feel free to say hello there when you are ready, Contact Us – Themeix

5

I’m very impressed with the work that was done here. I’m glad you chose the Shoji theme and it met your expectations :slight_smile:

1 Like
6

Thanks for sharing the store.
@themeix Can you elaborate a bit more about the technical solution for people who cannot afford paying 500$?
I don’t earn any money with my blog would like to be able to provide some of my articles in a second language.

7

@Peleke If you are comfortable with modifying code, then you can start with this Ghost official Tutorial Tutorials

8

Here following the steps for that,

At first, you have to set up the collections from the routes.yml correctly to assign the permalinks and filter by hashtags for specific language.
For example,

  /de/:
    permalink: /de/{slug}/
    template: index-de
    filter: 'tag:hash-de'

You can learn more there,

Then you need to create template file for the specific language. Example : index-de.hbs

Every static text string we showed by document.write(lang.TRANSLATE_KEY_HERE); and we stored all the values in a HBS file.

let de = {
"TRANSLATE_KEY_HERE": "TRANSLATED_VALUE_HERE",
}

It is a long process to find all the text strings and write them in that format.

At the final stage, we created the language switcher, store data in localstorage. We handled that process by javascript. That is another complex part of that job.

You can feel free to contact us, if need further help.

2 Likes
9

I had created a small command line tool to generate the language file (en.json). This tool finds all the translatable strings and generates the language JSON file. Please try this tool. I will be happy if it reduce some of your lengthy manual string copy paste time.

After generating the file using this tool you can edit and translate the strings.

P.S. - The name of the tool is not perfectly accurate :stuck_out_tongue: . It does not actually translate the theme but it generates the translation file. I could not came up with better name at that time. :thinking:

3 Likes
10

Looks good. I will try in my next project.

11

Actually this is only working for post, page and index page content. This is not working for full site. That is the main problem.

12

Are you trying to scan files other than .hbs files? It should scan all the .hbs files in the theme root folder as well as any subfolder. So any .hbs files in the partials folder should be scanned using this automatically.

Anyways, I think we should not pollute this thread by discussing the bugs of this tool here. Can you DM me or send a mail describing the issue. I would like to solve if there is an issue.

13

I don’t think so this is a bug. Let me explain what I wanted to say. An example:
Suppose, I want to support Russian language. Here, If I follow the ghost official instruction then I can reach the Russian content to visit https://example.com/ru . But my header, footer or others content dose not translate the Russian language. Cause it works for what you set in from ghost admin dashboard. The visitor can not switch their language by own. They have to depend on the admin. Maybe this is the reason vladshvets went to custom dev…

14

Yes, you are correct. Custom development was needed for his requirement. The tool I have earlier just scans the files in a theme and creates the JSON file in the following fashion.

{
"TRANSLATE_KEY_HERE": "TRANSLATED_KEY_HERE",
......
......
}

This tool just reduces manual repetitive copy and paste work for the developer. For example, you have 10 .hbs files and each file has som hardcoded string wrapped in {{t}} helper. Normally you have to copy each string from each file and add that string in en.json file in locales folder. This tool emmit this copy paste work and generate the en.json file for you.

This tool is no means a replacement for the custom development work mentioned above. I have mentioned this tool here because themeix mentioned this

"It is a long process to find all the text strings and write them in that format."

2 Likes
15

I am working with your project and its save my huge time…

16

Glad to know that it helped. :slight_smile: :heart:

1 Like
17

I just want to second this post.

I was working on a new project which requires multiple languages. I approached my theme developer @fueko (this guy is like from another planet in a good way, all his themes are sparkling and bugless, and the support he provides is a huge help) and he pointed me to this post.

I contacted @themeix and they were happy to help me to add multiple languages to the theme. It was a pleasure to work with them, guys are really understanding, professional and reasonably fast. After adding languages, I order additional tasks from them to add some features to my website and all were successfully completed.

P.S. I used another theme - Maido the guys customized for me.

Thank you all for your help!

3 Likes
18

Here is a free open source theme for Ghost with multi language support: Release 4.0.0 · godofredoninja/Mapache · GitHub

19

Thank you for your co-operation. We tried our best to make you happy.

If anyone needs Custom Ghost Development or Multi Language Help, Feel free to contact us.

image