Categories
Uncategorized

How to use a different logo for each language with Polylang

Every now and then I have some period of times when I feel an urge of giving back to the community and keep an eye on the public forums of wordpress.org. The good part is that this synchronizes with the moments when I’m not that busy with my day-to-day job.

This time I found a pretty interesting question related to the Polylang plugin. I usually recommend using the WPML plugin since it’s a pretty great tool (even if it might not be that easy for new WordPress user) but this time the question was about a different multi-language plugin. Don’t get me wrong: I like that Polylang is a free plugin that can be used for simple websites. However, I found that there’s no option to simply change the logo added through Appearance → Customize → Site identity.

Let’s get to the point: the question raised by a user on the public forums was about how to have a different logo for each language. I checked a couple articles and topics but I couldn’t find an article to present a solution. I always look for new challenged and that’s why I started working on a custom code to do the job. And here’s the solution that came out.

This solution is gonna work for themes that are using the get_custom_logo function for getting the logo set in Appearance → Customize → Site identity.

The code

Here’s the code that need to be added to your website for using different logos when having the English and French languages:

function custom_polylang_multilang_logo( $value ) {
	if ( function_exists( 'pll_current_language' ) ) {
		$logos = array(
			'en' => wp_get_attachment_image('1555', 'full'),
			'fr' => wp_get_attachment_image('1556', 'full'),
		);
		$default_logo = $logos['en'];
		$current_lang = pll_current_language();
		if ( isset( $logos[ $current_lang ] ) )
			$value = $logos[ $current_lang ];
		else
			$value = $default_logo;
	}
	$html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( home_url( '/' ) ),
            $value
        );
	return $html;
}
add_filter( 'get_custom_logo', 'custom_polylang_multilang_logo' );

The logos

Now we have the code, but it cannot know what images to use from the media gallery. Once you uploaded the logos, simply get the ID for each one and replace the 1555 and 1556 in the code above with your values.

How to get the image ID? When opening a logo image in the media library, the link looks something like this:

https://www.example.com/wp-admin/upload.php?item=205

The 205 value is the one that’s needed here. 

Where to add the code?

There are two ways to add the code to the website:

  1. Copy the code that resulted (with the two IDs changed) to the functions.php file of the current theme;
  2. Use a plugin like My Custom Functions. This way, the code will stay there even when changing the theme.

Adding one more logo

If there are more than two languages used, the change is pretty simple. Just simply copy this line of code:

'en' => wp_get_attachment_image('1555', 'full'),

, replace the en part with a new locales (the full list of locales can be found here), and add it right after this line:

'fr' => wp_get_attachment_image('1556', 'full'),

Don’t forget about the logo ID and that’s all. This part of code should look like this:

'en' => wp_get_attachment_image('1555', 'full'),
'fr' => wp_get_attachment_image('1556', 'full'),
'ro' => wp_get_attachment_image('1557', 'full'),

I guess that this solution is needed when a website has some sort of text inside the logo, and it needs to be different in each language. I cannot imagine another situation when someone would have a different logo for different countries ?

Let me know in the comments area if this did the trick for you or you need a little help with it.

47 replies on “How to use a different logo for each language with Polylang”

when i add the PHP code to the child theme function.php and change it to ‘he’ instead of ‘fr’ and it is not working, maybe i did something wrong…

this is the new code :
function custom_polylang_multilang_logo( $value ) {
if ( function_exists( ‘pll_current_language’ ) ) {
$logos = array(
‘en’ => wp_get_attachment_image(‘211’, ‘full’),
‘he’ => wp_get_attachment_image(‘214’, ‘full’),
);
$default_logo = $logos[‘he’];
$current_lang = pll_current_language();
if ( isset( $logos[ $current_lang ] ) )
$value = $logos[ $current_lang ];
else
$value = $default_logo;
}
$html = sprintf( ‘%2$s’,
esc_url( home_url( ‘/’ ) ),
$value
);
return $html;
}
add_filter( ‘get_custom_logo’, ‘custom_polylang_multilang_logo’ );

i find the image ID and insert it, and still i see the same logo for different languages

Hey!

Any chance that you could share a link to your website? Maybe I can find the reason why the code is not working. Or if you managed to sort this out in the meantime, an update about it would be great.

Hey Illy,

Even though you have the image like this: https://www.sharon-nehab.co.il/wp-content/uploads/2019/02/Logo_SN-en.png, you can still go to the Dashboard → Media area and get the ID that I mentioned in the article. Just simply go to this section, look for the Logo_SN-en image, press it, and get the image ID. Here’s a quick video where you can see how to get it: https://www.youtube.com/watch?v=eCBYi14Rkx8

Can you tell me if you manage to do the change this time?

Thanks for your reply.
I have added the code with ‘my custom functions’ and it looks like this:
function custom_polylang_multilang_logo( $value ) {
if ( function_exists( ‘pll_current_language’ ) ) {
$logos = array(
‘he’ => wp_get_attachment_image(‘4661’, ‘full’),
‘en’ => wp_get_attachment_image(‘5429’, ‘full’),
);
$default_logo = $logos[‘en’];
$current_lang = pll_current_language();
if ( isset( $logos[ $current_lang ] ) )
$value = $logos[ $current_lang ];
else
$value = $default_logo;
}
$html = sprintf( ‘%2$s’,
esc_url( home_url( ‘/’ ) ),
$value
);
return $html;
}
add_filter( ‘get_custom_logo’, ‘custom_polylang_multilang_logo’ );

The thing is my website is Hebrew and English
1. I want the main lang to be HEBREW
https://www.sharon-nehab.co.il/he/homepage/
and I dont know why something went wrong :(\
2. When you swap to English it goes likr this
https://www.sharon-nehab.co.il/en/home/
but the logo doesnt chenage 🙁 to the EN one.
Pleae can you help?
Cheers
illy

Hey Illy,

I can see that you’re using a theme called Leader. I had a look at it and I could see that the logo option is different. This code is made to work with the logo option from Dashboard → Appearance → Customize → Site Identity → Logo. However, in your case, the logo is set through a theme option. In this case, you can try to translate the logo by following the steps presented here https://polylang.pro/doc/working-with-media/. Also, reaching out the theme authors would be a great option too. They might’ve had this question from other clients and be able to point you to a solution. It’s worth a try.

Thanks for your help, It’s really working!!.but there is a further question to ask, The Logo’s URL disappear and unclickable, What should I do next step? Could you help me? Thanks a lot!

Hello,my website is chundian.com.tw.
But I’m already fix this issue by other solution, thanks for your reply .

Hi! great solution for the logo change. Thanks!
I also have the problem with the logo’s url dissapered..
can you have a look on? thanks..
tantra-masszazs.hu theme: astra

Hey!

I made a small change to the main code. The last part (the line that starts with $html) is different now. Just replace that on your website and tell me if the link works fine this time. Have a look at the links on both languages.

Regards

Hello, Radu
I noticed you rewrite your code on the last part so I put it on my website and it’s work now!! Thanks for your doing, I deeply appreciate your helping

Hi Radu,
Thanks for the solution. It works but I only have the logo. I lost the url and its unclickable. What can I do? Thanks!

Hey Nelle!

The link issue is a mistake I made on the last part of the code. Please check the code again and tell me if things are working fine now.

Regards

Hi Radu,
Unfortunately did not work for me, I`m using neve theme, added the code to childthemes function file but still getting only logo in main language..

Hey Sandras,

Thank you for telling me what’s the theme that you’re using. I just had a look at it and I could see that it’s not using the get_custom_logo function but it’s building it manually instead. The code that I created is made to work over this filter. I think that you’ll have to reach out the theme authors in this case and see if they have any advice about using a different logo on each language.

Regards

I did everything as you wrote, but there are no changes at all. I have three languages. The code is added to the child theme. And even tried it through the My Custom Functions plugin. But still there is no result. Help me please.

Here is my code:
// Смена логотипа при изменения языка
function custom_polylang_multilang_logo( $value ) {
if ( function_exists( ‘pll_current_language’ ) ) {
$logos = array(
‘ru’ => wp_get_attachment_image(‘6’, ‘full’),
‘en/home/’ => wp_get_attachment_image(‘3516’, ‘full’),
‘kk/basty-bet/’ => wp_get_attachment_image(‘3517’, ‘full’),
);
$default_logo = $logos[‘ru’];
$current_lang = pll_current_language();
if ( isset( $logos[ $current_lang ] ) )
$value = $logos[ $current_lang ];
else
$value = $default_logo;
}
$html = sprintf( ‘%2$s‘,
esc_url( home_url( ‘/’ ) ),
$value
);
return $html;
}
add_filter( ‘get_custom_logo’, ‘custom_polylang_multilang_logo’ );

Website: https://nursultan.interteach.kz/

Hey Salauat,

I could see that you replaced en with en/home, and kk with kk/basty-bet. Could you add back just en and kk (on the lines with wp_get_attachment_image), and tell me if things work fine this time, please?

Regards

Hi Radu,

Similar to Sandras above, this isn’t working for me. I`m using the Astra theme. I’ve added the code to child theme’s function file but I’m only getting the logo in the one language.

Hi Radu

My bad. It works fine. I’d forgotten to activate the child theme.

Great job, works like a dream.

Thanks

Wyn

Hey Wyn,

I’m glad to hear that the code worked for you. I was ready to install the Astra theme on my testing website to check this one 🙂

Regards
Radu

Hi Radu,

It seems that you already helped plenty of people with this nifty piece of code, unfortunately, for me, it’s not working.
I’m using a paid theme, called Kizi Theme (https://myarcadeplugin.com/buy/kizi-theme/).

I have 2 languages, Hebrew and English, I’ve been trying for hours now, to try to have a different logo (instead of the Kizi one) for each of the logos, to no avail;
Maybe you have an idea why?

This is my website:
https://thefreegenie.com/
https://thefreegenie.com/en/
https://thefreegenie.com/he/

Hey Omer,

I think that the Kizi theme is adding the logo using some theme option. The code that I created is working only for the logos added through Appearance → Customize → Site Identity.

In your case, I think that you’ll need to use the string translation from Polylang and translate the value saved on the database. You can find some more details about this option right here:
https://polylang.pro/doc/strings-translation/#translate-strings

Regards,
Radu

True, and it’s one of the first things I tried, but there’s no string with reference to “logo” ?‍♂️

Hey Omer,

I think that you should check point #5 from that article, about the XML configuration file. Basically, you need to create some config to “let Polylang know” about the custom fields from the theme.

In this case, you can try to reach out to the theme authors and ask them for a little help on this one.

I’m would like to do more about this, but I’m more familiar with WPML on this one (since I’m a part of the plugin team). If you ever think about moving to WPML, we can handle this kind of change in no time on the plugin forum.

Regards,
Radu

Yeah, I had to change the theme’s code.
I added:
add_action(‘init’, function() {
pll_register_string(‘custom-logo-url’, ‘https://thefreegenie.com/wp-content/uploads/2020/04/logo-en.png’, ‘Kizi Theme’);
});

and changed this code:

<a href="”><img src="”>

to this:

<a href="”><img src="”>
<!––>

Maybe this code/example will help others in the future.

Hey Atakan,

I had a quick look at the theme that you’re using and I checked the documentation:
http://buddhathemes.com/docs/onelife/

I can see on the 8.2 Layout Options → General section that the Logo is set through an option from the theme options. The logo is saved through the database, using some custom code form the theme.

In this case, I think that the only option to translate the logo is through the String translation:
https://polylang.pro/doc/strings-translation/#translate-strings

This is the area where you can see all the values saved by the theme options (where the logo can be found) and add the translation.

Regards,
Radu

Hey Atakan,

Before looking for the logo URL on the String translation area, you need to create an XML config file to let Polylang know where is the logo in the database.

The article I created is gonna work for the themes that are using the logo added through the Appearance → Customize → Site identity area.

In your case, you can ask for some help from the theme authors.

Regards,
Radu

I have tested it on my computer. The tool is called Local by Flywheel. I have installed only the Polylang plugin and I am using the Twenty Twenty-One theme.

I’m afraid that there’s nothing I can do about this, since the website is on your local computer and I can’t have a look at it. Also, since this is an option from the theme, I think that you should reach out to the authors and ask them to have a look.

Hi Radu I was wondering if I can change the link of the logos to the main domain since I’m working on a sub domain or maybe make them unclickable?

Hey Lynes,

If you want to change the link, you will need to replace the

esc_url( home_url( '/' ) )

part with the same kind of code that was created for the logos: an array of links for each language and an if statement to check the current language and get the right link. Something like:

$links = array(
'en' => 'http://www.example.com/',
'fr' => 'http://www.example.com/fr/',
);

and adapt the if statement like:

if ( isset( $logos[ $current_lang ] ) )
$value = $logos[ $current_lang ];
$custom_link = $links[ $current_lang ];
else
$value = $default_logo;
$custom_link = esc_url( home_url( '/' ) );

Then the last step would be to replace the “esc_url( home_url( ‘/’ ) )” part with “$custom_link” on the “$html = …” line.

This is just a code that I created now, without testing it. But I hope that you got the point and you can make the changes on your website.

If you just want to stop the link on the logo, you can use a CSS snippet like this one:

.site-title > a {
pointer-events: none;
}

Hope it helps 🙂

Hi, I tried using this code, but it’s not working for me. I’m using the Ashe Theme by WP Royal. Is there a specific place I have to insert it in the functions.php file?

Thank you!

Hey Camila,

I had a look at the Ashe theme that you mentioned and I could see that it’s not using `get_custom_logo`. In this case, I’m afraid that the code from the current article won’t work. You’ll need to tweak the theme code in order to have different logo for each language.

Leave a Reply to shuchen chu Cancel reply

Your email address will not be published. Required fields are marked *