Today our clients in support need to translate a website logo into two languages English and French.
The default website language is English. The logo is an image and can’t be translated normally like other strings.
So you have to create 2 logo images one for the English version and another one for the french.
Translate a WordPress site it’s easy if you use WPML Plugin that is the best for this purpose.
This plugin needs to be compatible with the theme installed to works ok.
So first of all you have to check that your Theme is compatible with this plugin.
I will explain to you how to do that with our theme Specular WordPress Theme but you can do this customization with any other WordPress Theme that is compatible with WPML Plugin.
Now after you have installed the WPML plugin go to Appearance > Editor > Theme Header (header.php) file. Now we have to find the lines:
<!-- Logo --> <?php if(!isset($css_class)) $css_class=''; ?> <div id="logo" class="<?php echo esc_attr($css_class) ?>"> <?php echo codeless_logo() ?> </div> <!-- #logo END -->
You can see that function codeless_logo() that call the default language logo.
We have to set the logo for the French language:
<!-- Logo --> <?php if(!isset($css_class)) $css_class=''; ?> <div id="logo" class="<?php echo esc_attr($css_class) ?>"> <?php if(ICL_LANGUAGE_CODE=='fr') echo "/img/french_logo.png"; else echo codeless_logo() ; ?> </div> <!-- #logo END -->
I have added this line if(ICL_LANGUAGE_CODE == ‘fr’) the conditional that makes it possible to translate the logo.
You have only to create and new logo for the french version “french_logo.png” and upload it in the images folder.
If you will try to change the language from English to french the logo will change automatically.
Check the page below for more information: