Disable Automatic Translation of WordPress Theme Elements
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 thenotranslate
class. - Content: It uses the
the_content
filter to automatically add thenotranslate
class to all paragraph tags (<p>
) in your posts and pages. - Menus: The
wp_nav_menu_items
filter is used to add thenotranslate
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 adiv
with thenotranslate
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:
- Access your WordPress admin dashboard.
- Navigate to Appearance > Theme Editor. If you see a warning about editing files directly, proceed with caution.
- In the right sidebar, locate and click on
functions.php
to open it for editing. - Scroll to the bottom of the
functions.php
file and paste the provided code snippet. - Click the Update File button to save your changes.
- 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.