I have just finished translating my personal website into French, English and Greek using the Polylang plugin in Wordpress, following this method described here:

I initially attempted to translate the header templates so that I could use a single header, dynamically displaying the translated values of custom Polylang strings based on the page's language. However, I encountered several issues and ultimately decided to duplicate the header and manually translate it without using the Polylang plugin.

I modified the page templates to exclude the header and footer, as they were always displayed in Greek. Instead, I copied the templates, made templated parts and used them independently. For each language, I created a corresponding translated header part. The main page template contained only the content, and I inserted the appropriate header part at the top, ensuring that everything appeared as intended.

That said, my goal is still to have a single header template that automatically translates using custom strings. So, my question is: How can this be achieved?

At first, I thought I could do this:

functions.php:

// Register custom string in Polylang

add_action('init', function() {
  pll_register_string('mytheme-homepage', 'Home');
});

// Add custom CSS with translated string
function add_custom_css() {
    ?>
    <style>
        :root {
            --homepage-text: "<?php echo pll__('Home'); ?>";
            
        }
    </style>
    <?php
}
add_action('wp_head', 'add_custom_css');

Then, in Additional CSS:

.nav_home::before {
    content: var(--homepage-text);
}

And then in the HTML of the navigation MENU:

<!-- Translated Navigation Link -->
<!-- wp:navigation-link {"label":nav_home,"url":"https://myurl","kind":"custom"} /-->

However, everytime, the navigation option "Homepage" and its HTML were automatically deleted.

Do you know why that happens and what to do instead?

Thank you for your time,

Let me know if you need any additional details.

I have just finished translating my personal website into French, English and Greek using the Polylang plugin in Wordpress., following this method described here: https://stackoverflow/beta/discussions/79524310/translating-custom-strings-in-wordpress-html-and-css-using-polylang

I initially attempted to translate the header templates so that I could use a single header, dynamically displaying the translated values of custom Polylang strings based on the page's language. However, I encountered several issues and ultimately decided to duplicate the header and manually translate it without using the Polylang plugin.

I modified the page templates to exclude the header and footer, as they were always displayed in Greek. Instead, I copied the templates, made templated parts and used them independently. For each language, I created a corresponding translated header part. The main page template contained only the content, and I inserted the appropriate header part at the top, ensuring that everything appeared as intended.

That said, my goal is still to have a single header template that automatically translates using custom strings. So, my question is: How can this be achieved?

At first, I thought I could do this:

functions.php:

// Register custom string in Polylang

add_action('init', function() {
  pll_register_string('mytheme-homepage', 'Home');
});

// Add custom CSS with translated string
function add_custom_css() {
    ?>
    <style>
        :root {
            --homepage-text: "<?php echo pll__('Home'); ?>";
            
        }
    </style>
    <?php
}
add_action('wp_head', 'add_custom_css');

Then, in Additional CSS:

.nav_home::before {
    content: var(--homepage-text);
}

And then in the HTML of the navigation MENU:

<!-- Translated Navigation Link -->
<!-- wp:navigation-link {"label":nav_home,"url":"https://myurl","kind":"custom"} /-->

However, everytime, the navigation option "Homepage" and its HTML were automatically deleted.

Do you know why that happens and what to do instead?

Thank you for your time,

Let me know if you need any additional details.

• php
• wordpress
• header
• translate
• polylang

Share Improve this question Follow asked Mar 25 at 12:39 Em DmEm Dm 1122 bronze badges 1

• Please also see these related questions – Richard Commented Mar 25 at 16:49

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I use this way:

1- add custom class to body by language:

<body class="<?php echo(ICL_LANGUAGE_CODE) ?>">

or use

add_filter( 'body_class', 'custom_class' );
function custom_class( $classes ) {
    $classes[] = ICL_LANGUAGE_CODE;
    return $classes;
}

2- then in css :

body.en .nav_home::before {
    content: 'en val';
}
body.fr .nav_home::before {
    content: 'fr val';
}

The most reliable way to dynamically translate navigation menu items is to use the wp_nav_menu_items filter.

function translate_nav_menu_items($items, $args) {
    foreach ($items as &$item) {
        if ($item->title == 'Home') { // Match the original title
            $item->title = pll__('Home'); // Translate the title
        }
        //Add more translation logic for other menu items here.
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'translate_nav_menu_items', 10, 2);