Today our clients in support need to translate an website logo in two languages English and French. The default website language is in English. The logo it 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 an WordPress site its easy, if you use WPML Plugin that is the best for this purpose. This plugin need to be compatible with theme installed to works ok. So first of all you have to check that your Theme is compatible with this plugin.
I will explain you how to do that with our theme Specular WordPress Theme but you can do this customization with any other WordPress Theme that its compatible with WPML Plugin.
Now after you have installed 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 make possible to translate the logo.
You have only to create and new logo for the french version “french_logo.png” and upload in 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: