sinanisler logo

Easy JS WordPress Multilanguage Translation with Javascript Array JSON

This JavaScript code toggles between two languages (English and Turkish) on a webpage:

  • Array elementsListEN: Contains elements and their English text.
  • detectBrowserLanguage: Checks browser language to switch to English if not Turkish.
  • checkURLAndUpdateLanguage: Checks if the URL has a parameter to switch to English.
  • Event Listener: A button toggles #en between the two languages on click.

const elementsListEN = [
  { selector: '#brxe-pdjhlt', text: 'CHAPTERS' },
  { selector: '#brxe-lchmrm', text: 'CONTACT' },
  { selector: '#en', text: 'TR' }, 
  { selector: '#brxe-htvhiq', text: 'INFO: This book is published in 2012. The contents are still valid but it does not include modern WordPress Block Theme programming.' },
  { selector: '#brxe-xcynco', text: 'WordPress Theme Design and Programming' },
  { selector: '#brxe-wltsgh', text: 'With this book, you will discover how you can create news sites, blogs, corporate websites and more with WordPress, one of the most popular content management systems in the world!' },
  { selector: '#brxe-hbyiel', text: 'BUY BOOK' }, 
  { selector: '#brxe-kcrvnc', text: 'BUY E-BOOK' }, 
  { selector: '#brxe-zgtgiz', text: 'DOWNLOAD PDF' }, 
  { selector: '#brxe-yjachr', text: 'DOWNLOAD FILES.zip' }, 
  { selector: '#brxe-kqhrrf p', text: 'PAGES' }, 
  { selector: '#brxe-rmanok p', text: 'CHAPTERS' }, 
  { selector: '#brxe-czdaha', text: 'Contents of the book and main chapters' }, 
  { selector: '#brxe-qputth p', text: 'SALES' }, 
  { selector: '#brxe-oiubqd', text: 'CHAPTERS' }, 
  { selector: '#brxe-trgkvj h2', text: 'Login to WordPress' },
  { selector: '#brxe-trgkvj p', text: 'What is a Content Management System?\nWhat is WordPress?\nA Brief History of WordPress\nWhere Does WordPress Get Its Power From?\nWhat Can We Do With WordPress' }, 
  { selector: '#brxe-zuddso h2', text: 'How to Install WordPress?' },
  { selector: '#brxe-zuddso p', text: 'Free WordPress Site: WordPress.com\nPreparing for a Paid WordPress SiteInstallation' },
  { selector: '#brxe-jurmrl h2', text: 'Preparation for Design and Programming' },
  { selector: '#brxe-jurmrl p', text: 'Design Program SelectionWhich Program Do I Recommend?\nIDE Program Selection (Coding Tool)' },
  { selector: '#brxe-cjkrlp h2', text: 'WordPress Theme Design Structure' },
  { selector: '#brxe-cjkrlp p', text: 'WordPress Theme Hierarchy (Structure)\nIncoming Requests and Responding PHP Pages\nThings to Know About Index.php\nAdding Features to Functions.php Theme\nConclusion and Important Details' },
  { selector: '#brxe-koppad h2', text: 'WordPress Theme Functions' },
  { selector: '#brxe-koppad p', text: 'Function Reference\nThe Loop\nContent Functions Used in the Loop\nAdding Component Support to the Theme\nAdding Menu Support to the Theme\nAdding Comment Section to Inner Pages' },
  { selector: '#brxe-ppvewd h2', text: 'Advanced WordPress Theme Functions' },
  { selector: '#brxe-ppvewd p', text: 'Featured Image\nCustom Fields\nTaxonomy\nCustom Post Type \nShowing Content by Category \n Posts by Query (Showing Content by Filtering Query Posts) \n Checking Whether the Site is Logged In' },
  { selector: '#brxe-yszubk h2', text: 'Blog Design' },
  { selector: '#brxe-smxdlh h2', text: 'Coding Blog Design' },
  { selector: '#brxe-zamlxw h2', text: 'Corporate Site Design' },
  { selector: '#brxe-shufcw h2', text: 'Coding of Corporate Site Design' },
  { selector: '#brxe-djltak h2', text: 'Portal Design' },
  { selector: '#brxe-dxehpe h2', text: 'Coding of Portal Design' },
  { selector: '#brxe-hfthde h2', text: 'WordPress and SEO' },
  { selector: '#brxe-geiplk h2', text: 'WordPress and Security' },
  { selector: '#iletisim', text: 'CONTACT' },
  { selector: '#brxe-jrmerk .bricks-button .text', text: 'SEND' },
  { selector: '#brxe-uebtzr', text: 'If you have anything on your mind, you can ask.' }
];

// Temporary array to store the original (Turkish or current) text values
let originalTextList = [];

// Function to save the original text content before changing it
function saveOriginalTextContent() {
  originalTextList = elementsListEN.map(item => {
    const element = document.querySelector(item.selector);
    if (element) {
      return { selector: item.selector, text: element.textContent };
    }
    return null;
  }).filter(item => item !== null); // Filter out any null values (if elements were not found)
}

// Function to update text content of multiple elements based on the provided list
function updateTextContent(languageList) {
  languageList.forEach(item => {
    const element = document.querySelector(item.selector);
    if (element) {
      // If element has an SVG (like #brxe-hbyiel), only change the text and leave the SVG intact
      if (element.querySelector('svg')) {
        element.childNodes.forEach(child => {
          if (child.nodeType === Node.TEXT_NODE) {
            child.nodeValue = item.text; // Update only the text node, keeping SVG intact
          }
        });
      } else {
        // If the text includes \n, replace it with <br> and use innerHTML
        const updatedText = item.text.replace(/\n/g, '<br>');
        element.innerHTML = updatedText;
      }
    }
  });
}

// Variable to keep track of the current language (starting with Turkish)
let isEnglish = false;

// Function to detect the browser language and switch to English if needed
function detectBrowserLanguage() {
  const browserLanguage = navigator.language || navigator.userLanguage;
  if (browserLanguage.startsWith('tr')) {
    isEnglish = false; // If the language is Turkish, keep it as Turkish
  } else {
    isEnglish = true; // For all other languages, switch to English
    saveOriginalTextContent(); // Save original (Turkish) texts
    updateTextContent(elementsListEN); // Switch to English texts
  }
}

// Function to check URL parameter and update language accordingly
function checkURLAndUpdateLanguage() {
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('en') !== null) {
    isEnglish = true;
    saveOriginalTextContent(); // Save original (Turkish) texts
    updateTextContent(elementsListEN); // Switch to English texts
  }
}

// Call functions on page load
document.addEventListener('DOMContentLoaded', function() {
  detectBrowserLanguage(); // Detect the browser's language
  checkURLAndUpdateLanguage(); // Check URL parameter and update language if needed
  
  // Add event listener to the #en button
  document.querySelector('#en').addEventListener('click', function() {
    // If switching to English, save the original text content first
    if (!isEnglish) {
      saveOriginalTextContent(); // Save original (Turkish) texts
      updateTextContent(elementsListEN); // Switch to English texts
    } else {
      updateTextContent(originalTextList); // Restore the original texts from memory
    }

    // Toggle the current language flag
    isEnglish = !isEnglish;
  });
});

Leave the first comment