How to Prevent Auto-Translation of Specific Text in WordPress

				
					// No-Translate Protection for WordPress
// Prevents auto-translation of elements with 'notranslate' class
// Compatible with all translation services and page builders

(function() {
    'use strict';
    
    // Function to apply translation protection
    function applyNoTranslate() {
        // Select all elements with 'notranslate' class
        const noTranslateElements = document.querySelectorAll('.notranslate');
        
        noTranslateElements.forEach(function(element) {
            // Add multiple protection attributes for maximum compatibility
            element.setAttribute('translate', 'no');           // HTML5 standard
            element.setAttribute('lang', 'x-no-translate');    // Language override
            element.setAttribute('data-no-translate', 'true'); // Custom attribute
            element.classList.add('notranslate');             // Google Translate class
            
            // Additional protection for specific translation services
            element.setAttribute('data-translate', 'no');
            element.setAttribute('data-gtranslate', 'no');
        });
        
        // Debug info (remove in production if needed)
        if (noTranslateElements.length > 0) {
            console.log('✅ No-translate protection applied to ' + noTranslateElements.length + ' elements');
        }
    }
    
    // Apply protection when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyNoTranslate);
    } else {
        applyNoTranslate(); // DOM already loaded
    }
    
    // Watch for dynamically added content (AJAX, page builders, etc.)
    const observer = new MutationObserver(function(mutations) {
        let shouldReapply = false;
        
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        // Check if new node or its children have notranslate class
                        if ((node.classList && node.classList.contains('notranslate')) || 
                            (node.querySelector && node.querySelector('.notranslate'))) {
                            shouldReapply = true;
                        }
                    }
                });
            }
        });
        
        if (shouldReapply) {
            // Small delay to let DOM stabilize
            setTimeout(applyNoTranslate, 100);
        }
    });
    
    // Start observing the entire document
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
    
    // Additional triggers for better compatibility
    window.addEventListener('load', applyNoTranslate);
    
    // Elementor compatibility
    if (typeof elementorFrontend !== 'undefined') {
        elementorFrontend.hooks.addAction('frontend/element_ready/global', applyNoTranslate);
    }
    
    // Divi compatibility  
    if (typeof ET_Builder !== 'undefined') {
        document.addEventListener('et_pb_after_init_modules', applyNoTranslate);
    }
    
})();