Disable Automatic Translation of WordPress Theme Elements

How to stop automatic translation on wordpress; Disable translation for specific wordpress elements; Prevent google translate on wordpress site; Exclude parts of wordpress site from translation; Stop automatic translation of wordpress theme elements; How to prevent browser translation on wordpress; Wordpress disable translation for certain content; How to exclude wordpress pages from translation; Prevent automatic translation on wordpress; Wordpress stop google translate from activating;

Explanation

If you want to stop certain parts of your WordPress site from being automatically translated by services like Google Translate, this code snippet is your friend. It adds a special class called notranslate to specific elements, telling translation services to skip them.

Here's how it works:

  • Custom CSS: The code hooks into the wp_head action to add a bit of CSS that tells browsers not to translate anything with the notranslate class.
  • Content: It uses the the_content filter to automatically add the notranslate class to all paragraph tags (<p>) in your posts and pages.
  • Menus: The wp_nav_menu_items filter is used to add the notranslate class to all menu items, ensuring your navigation stays as you intended.
  • Widgets: By using the widget_text filter, the code wraps all widget text in a div with the notranslate class, keeping your sidebar content untouched by translation.

This approach is handy if you have specific content that should remain in its original language, like brand names or technical terms. Just pop this code into your theme's functions.php file, and you're good to go!

Code

<?php
/**
 * Prevent automatic translation for specific WordPress elements.
 * This snippet adds a 'notranslate' class to specified elements to stop translation services like Google Translate.
 */

// Hook into 'wp_head' to add custom CSS for disabling translation
add_action('wp_head', 'wp_dudecom_add_no_translate_css');

function wp_dudecom_add_no_translate_css() {
    echo '<style>
        .notranslate {
            translate: no;
        }
    </style>';
}

// Add 'notranslate' class to specific elements using 'the_content' filter
add_filter('the_content', 'wp_dudecom_add_no_translate_class_to_content');

function wp_dudecom_add_no_translate_class_to_content($content) {
    // Example: Add 'notranslate' class to all <p> tags
    $content = preg_replace('/<p>/', '<p class="notranslate">', $content);
    return $content;
}

// Add 'notranslate' class to specific elements using 'wp_nav_menu_items' filter
add_filter('wp_nav_menu_items', 'wp_dudecom_add_no_translate_class_to_menu_items', 10, 2);

function wp_dudecom_add_no_translate_class_to_menu_items($items, $args) {
    // Example: Add 'notranslate' class to all menu items
    $items = preg_replace('/<li/', '<li class="notranslate"', $items);
    return $items;
}

// Add 'notranslate' class to specific widgets using 'widget_text' filter
add_filter('widget_text', 'wp_dudecom_add_no_translate_class_to_widgets');

function wp_dudecom_add_no_translate_class_to_widgets($text) {
    // Example: Add 'notranslate' class to all widget text
    $text = '<div class="notranslate">' . $text . '</div>';
    return $text;
}
?>

Instructions

File Location: Add the code to your theme's functions.php file.

Prerequisites: None required.

Implementation Steps:

  1. Access your WordPress admin dashboard.
  2. Navigate to Appearance > Theme Editor. If you see a warning about editing files directly, proceed with caution.
  3. In the right sidebar, locate and click on functions.php to open it for editing.
  4. Scroll to the bottom of the functions.php file and paste the provided code snippet.
  5. Click the Update File button to save your changes.
  6. Visit your website to ensure that the specified elements are no longer automatically translated.

If you encounter any issues or need further assistance with this implementation or more advanced functionality, consider reaching out to wp-dude.com for expert help.