[gatsby-source-wordpress] switching languages using WPML

[stefanmomm]

I'm in the process of converting a multi-language WordPress website using WPML to Gatsby.

Unfortunately I'm not quite sure how to get Gatsby to create pages for every post/page/custom post type in all defined languages automatically and how to set a connection between the languages (e.g. when I'm on a specific page and change the language, display that page in the selected language).

I already installed the WPML-REST-API WP-Plugin which lists the existing translations for each post including their ID but I’m just not sure how and if those IDs can be processed by Gatsby automatically.

Is it necessary to adjust the gatsby-source-wordpress plugin in order to achieve this and if yes, which part would I need to change? I’m thinking of extending the plugin using a config-flag like useWpmlRestApi or something like that.

I'm using react-i18next for translating non-WP content and switching languages if that helps.

[pieh]

I'm using Polylang but conceptually this aproach will work with any multi language plugin:
in my project gatsby-node i build wordpress_id => path map before creating pages:

const buildLinkMap = ({ getNodes }) => {
  const linkMap = {};

  const typeMap = {
    wordpress__POST: 'post',
    wordpress__PAGE: 'page',
    wordpress__wp_portfolio: 'portfolio',
  };

  for (let node of getNodes()) {
    if (node.internal.type in typeMap) {
      linkMap[node.wordpress_id] = buildLink({
        lang: node.lang,
        slug: node.slug,
        type: typeMap[node.internal.type],
      });
    }
  }
  return linkMap;
};

buildLink is helper function that constructs path based on lang, slug and content type

and then in exports.createPages for each page I get translations, convert translated pages ids to paths and pass that in context and access that data in page component (this.props.pathContext.translations )

[stefanmomm]

Thank you so much for helping out, I'll try if this works with WPML.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[MartinConde]

@stefan-meier did you get this working by any chance?

[ghost]

Unfortunately, Polylang does expose more information into polylang_translations, which is included within any post on the REST API. WPML does only include the id, link and current language for translations.

It is possible to switch the language by appending a query param like ?lang=en to the endpoint. But gatsby-source-wordpress does not include functionality for adding custom (hidden) routes like this one with query params currently.

I filed a PR that should fix this by allowing to add custom routes at build time. There are more issues like this linked, with more details.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[mlvlester]

Hi @pieh, I'm trying to implement switching languages using Polylang but I can't find documentation about it. Maybe you could share an example of how you implemented it?
Thanks!