Multilingual site - wordpress - frontity

[alex.fernando.801]

Hello great Community,

I’m developing a site with Frontity. The site has to be bilingual (English and Spanish). I have some experience with react, but completely new in the WordPress world. I read about it and here are the options I found.

1.- Using a plugin for free but with a limit of 2000 words translated on my site (but probably the site will have more words than that)

2.- Using subdomains in order to create “2 WordPress content manager” (one for EN and the other for ES), It that makes sense? If so, That means that … I would have two different wp-json URLs? Does Frontity allows you to have two different URLs to fetch data on your site in different custom themes?. How Can I do that? or it is completely non-sense?.

3.- Paying for a plugin (but probably there’s no budget for that, haha).

Please, Could you suggest the best way to face this problem?
Sorry if I asking a lot, but I wanna be sure before jumping into one of these options.

Thank you in advance.

Cheers.

[mburridge]

Hi @alex.fernando.801

Welcome to the Frontity community. It’s great to hear that you’re using Frontity for your project.

Regarding your option 2, yes Frontity allows you to connect to multiple URLS. See our docs here for more info on this.

Having two sites means more admin overhead in that each post will need to be posted in two different places, once in each language, so a plugin might help to reduce that overhead.

If you’re posting relatively infrequently, i.e. it’s a personal blog, and you don’t mind doing everything twice (e.g. featured image, categories, tags, etc… for each post) then option 2 could be a good option.

For a busier site with multiple contributors then option 3 is probably a better bet, if you need to make a case for a budget allocation!

Hope this helps.

[alex.fernando.801]

@mburridge, thanks for your help, and really sorry for my late reply. I’ve been developing the website without using a WordPress REST API. But now I have to try one of these options. I’ll go for option 2 (creating 2 WordPress REST API). Inside the frontity project, I created two themes-packages with the command “npx frontity create-package my-custom-theme”, one for each language, but I’m not sure if this is correct. Since both themes have the same components and only the data and URL API change.

It will work, using the same package for both REST API and data? or it’s ok using different themes?.

Having two different themes means, to have 2 index.js and 2 Root.js, so in order to switch from one to another language (navbar with ES, EN tags) I can’t use the tiny-router package, instead, I’m using a normal tag, which makes slow the switch between languages, but just that, because inside each theme I’m using the tiny-router package. Is there any way to fix this, or it has to be like that because of the 2 different themes?

Hope you can help me with this. Thank you in advance.

[mburridge]

Hi @alex.fernando.801

I think if you have two different REST endpoints then the approach you’re using makes some sense. However you might be able to use the same theme package for both sub-domains, and just change the wp-source endpoint. That would avoid having to maintain two identical copies of your theme. TBH I haven’t actually tried this, but I don’t see why it shouldn’t work.

Check this thread which might point you towards your ideal solution.

If you have any further questions it would be useful for us if you could provide a link to a repo so we can look at/clone your code.

[alex.fernando.801]

Hello @mburridge , thanks for your answer.

Well, I tried using two different package themes, everything seemed two work ok in localhost until I deployed to Vercel. This is my settings file. If I replace https://andes.alexfernando.vercel.app/ by http://localhost:3000/ everthing works in my localhost, but I understand that I need to change the matching URL when I deploy. This is my trial deployment link: https://andes.alexfernando.vercel.app/ where you can see that the Spanish version doesn’t work.

const settings = [

//english site
{  
  "name": "andes-headless-english",
  "match": ["https://andes.alexfernando.vercel.app/"],
  "state": {
    "frontity": {
      "url": "https://test.frontity.org",
      "title": "Andes Website English",
      "description": "A website for the ONG Andes English Version"
    }
  },
  "packages": [
    {
      "name": "andes-theme",
    },

    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://en.andescusco.info/wp-json/",

          "params": {
            per_page: 100,
          },

          "postTypes": [

            {
              type: "singlesearch",
              endpoint: "singlesearch",
              archive: "/search",
            },

            {
              type: "cardimage",
              endpoint: "cardimage",
              archive: "cardimage"
            },

            {
              type: "toolkitposts",
              endpoint: "toolkitposts",
              archive: "alltoolkit"
            },
          ],

          "taxonomies": [
            {
              taxonomy: "typeofpublication",
              endpoint: "typeofpublication",
              postTypeEndpoint: "singlesearch",
              params: {
	              per_page: 100,
                _embed: true
              }
            }

          ]
        },
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react",
    "frontity-contact-form-7"
  ]
},


//SPANISH SITE
{
  "name": "andes-headless-spanish",
  "match": ["https://andes.alexfernando.vercel.app/es-(.*)?$"],
  "state": {
    "frontity": {
      "url": "https://test.frontity.org",
      "title": "Andes Spanish",
      "description": "Configuration for Spanish Site"
    }
  },
  "packages": [
    {
      "name": "andes-spanish-theme",
    },
    
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://es.andescusco.info/wp-json",

          "params": {
            per_page: 100,
          },


          "postTypes": [

            {
              type: "singlesearch",
              endpoint: "singlesearch",
              archive: "/es-search"
            },
  
            {
              type: "cardimage",
              endpoint: "cardimage",
              archive: "cardimage"
            },

            {
              type: "toolkitposts",
              endpoint: "toolkitposts",
              archive: "alltoolkit"
            },
          ],
  
          "taxonomies": [
            {
              taxonomy: "typeofpublication",
              endpoint: "typeofpublication",
              postTypeEndpoint: "singlesearch",
              params: {
                _embed: true
              }
            }
  
          ]
  
        },      
      }
    },
     "@frontity/tiny-router",
    "@frontity/html2react",
    "frontity-contact-form-7"
  ]
}

];


export default settings;

Thanks in advance.

[alejandro]

Hi @alex.fernando.801

My colleague has managed to add multilanguage effectively, Check out his post, maybe it will help you.

Home in second site returns a 404 in Multisite instalation - Multilanguage

Hi Everyone! We are building a complex website and one of the requeriments for the project is that the site has to be multilingual. In our WordPress instalation, we are using QTranslate XT to add the multilingual options We have configured a test website so you can check our problem. There we have created two sites in the configurations in frontity.settings.js. One for each language: English and Spanish . Production Site: https://multilanguage-frontity.vercel.app/ English (default) → / Sp…

Greetings