Linking to language of a multilang site

Backlight 4, 5 & 6 Support
#1

Hi all,

I am driving a 3 languages KKburra site En, Es, De and a WP site with WP Booking Calendar.
It is no problem to link from e.g. spanish to the spanish translated (Polylang) WP site.
But how can I link back to the spanish KKburra site???
This doesn’t work: (Raum - THE RAUM PHOTOGRAPHY)

I would be very happy for any help!

Best regards,
Oliver

#2

when I click that link it goes to the Spanish language site

#3

Hi Rod, thank you for trying!
works, after clearing the cache :wink:

thx again

#4

This came up a while ago, and I can’t remember whether it was something we were able to fix, or a technical limitation we couldn’t do anything about.

@Ben Do you remember where we ended up with that investigation?

#5

Hi all,

I would like to explain my problem again.
The Homepage is build with Kkburra, 3 languages EN, ES, DE.
The WP Booking Calendar is on a WP site, 3 languages EN, ES, DE, translated by the Polylang plug-in.
Question:
Is it possible to link from the Kkburra “running head navigation” lang to the WP Pangolin pallet_top_nav menu lang which is build up with the WP menu builder?
EN to EN, ES to ES, DE to DE

https://theraumphotography.com - The Raum Photography – Booking

Thank you for any solution or idea.

Best regards,
Oliver

#6

Looking at your Wp page, it uses lang="de-DE", while Backlight uses lang="de".

Does the language setting work among the two themes when you disable the Polylang plug-in?

#7

Hi Daniel,

doesn’t work, even the wp menu bar is gone.
in Polylang the Locale is de-DE, es-ES, en-EN

The easiest would be to link from the german translated <div data-lang="de"> homepage to:
https://theraumphotography.com/booking/de/pricing-2025-deutsch/
from the spanish translated <div data-lang="es"> hp to:
https://theraumphotography.com/booking/es/pricing-2025-espanol/
…
obviously it works with direct links in the homepage but how to get it to work with the menu?

#8

This might indicate that the menu is not provided by your Pangolin template.

Some javascript magic should do the trick:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const lang = document.documentElement.lang.toLowerCase();

  // Map languages to URLs
  const urlMap = {
    'de': 'https://theraumphotography.com/booking/de/pricing-2025-deutsch/',
    'en': 'https://theraumphotography.com/booking/',
    'es': 'https://theraumphotography.com/booking/es/pricing-2025-espanol/'
  };

  // Determine target URL (fallback to 'en')
  const targetUrl = urlMap[lang] || urlMap['en'];

  // Find the specific <a> by its original href
  const bookingLink = document.querySelector(
    'a[href="https://theraumphotography.com/booking/"]'
  );

  if (bookingLink) {
    bookingLink.href = targetUrl;
  }
});
</script>

I should add that I haven’t verified if the script works as expected!

#9

Hi Daniel,

thank you!
Where to put it - phplugins or functions.php?

#10

phplugins. It modifies your Booking links according to your selected language.

#11

Thank you Daniel,

I got your script working with the help of chatgpt:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const lang = (document.documentElement.lang || '').toLowerCase();

  const urlMap = {
    'de': 'https://theraumphotography.com/booking/de/pricing-2025-deutsch/',
    'en': 'https://theraumphotography.com/booking/',
    'es': 'https://theraumphotography.com/booking/es/pricing-2025-espanol/'
  };

  const targetUrl = urlMap[lang] || urlMap['en'];

  const originalUrlPattern = /^https?:\/\/theraumphotography\.com\/booking\/?$/i;

  function updateLinks() {
    document.querySelectorAll('a[href]').forEach(link => {
      if (originalUrlPattern.test(link.href)) {
        link.href = targetUrl;
      }
    });
  }

  // Initial Update
  updateLinks();

  // Beobachte DOM-Änderungen (z. B. durch Lazy-Loading)
  const observer = new MutationObserver(updateLinks);
  observer.observe(document.body, { childList: true, subtree: true });
});
</script>

:+1: :+1: :+1:

2 Likes
#12

@Matthew the issue we had previously was that setting a language expected the request to come from a click within Backlight (it used the Backlight ‘referer’ to redirect back to where the click came from). That meant it failed if a user browsed directly to a URL like https://yoursite.com/?language=de. This was fixed in Backlight 6.0.3 released in December 2024.

#14

SOLVED!
Block search indexing with ‘noindex’ was active.

Hello everyone,
When I link back to https://theraumphotography.com/?language=de from my WordPress site – Menu Polylang – (de, es, en), it doesn’t work; the WordPress home page is always reloaded. However, when I enter https://theraumphotography.com/?language=de in the browser, the page loads.
Where should I look for the error?

Thank you and best regards,
Oliver