I was looking for a solution to make custom header image for multi-language WordPress website by using some plug-in solutions and came across a problem since the theme I was using wasn’t supporting the custom headers, hence those plug-ins showed no header image whatsoever.
Read how I did it and learn how to make Polylang show the custom header image string ready for translation in other languages.
Thanks to the great developers of the best multilingual WordPress plug-in, this issue is already documented on the Polylang website. However, before that step I needed to make a change in header.php theme file to enable the custom header option available.
After that I could use the WPML config file feature to customize the Polylang in order to display the custom header image string. Here are the steps I performed.
1. Enable custom headers if your theme does not support it already.
In your theme’s functions.php file add the following line:
add_theme_support( 'custom-header' );2. Change the header.php file
In your theme’s header.php file add the following pice of code just after the opening header tag (if you need the header image to be displayed on the very top of the page and above the main navigation menu):
<?php if ( get_header_image() ) : ?>
<center><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" style="margin-top:10px" /></a></center>
<?php endif; ?>3. Customize the Polylang
As described in the post on the official Polylang website, create a directory named ‘polylang’ in ‘wp-content’ folder (this is a place where you can store Polylang cutomizations which will not be overwritten when updating Polylang).
Use your text editor to create a blank .xml file and paste the following code in it:
<wpml-config>
<admin-texts>
<key name='theme_mods_twentytwelve'>
<key name='header_image' />
</key>
</admin-texts>
</wpml-config>
Note: You need to replace twentytwelve with the name of your theme’s folder.
Save it as wpml-config.xml and upload it in your ‘wp-content/polylang’ directory.
4. Set the header image
Go to Dashboard > Appearance > Header and set the header image you wish.
Then go to Settings > Languages > Strings translations. You can now choose one header image url per language!
This is how I solved the issue of having different header images for multiple language website. Feel free to leave a comment with plug-in suggestion regarding this topic.
Thank you very much.
You’re welcome 🙂
I’m glad you found it useful.
Hi. It does what it is supposed to do, but I’m unable to change the image dimensions, and also I can’t even crop it – WP reports there was an error cropping your image. Even force the tag attributes as height and width seems not to work.
Hello,
Did you try to pre-crop the image that you want to use? I rarely rely on WP crop tool to do the job for me but rather use external image processing tool to prepare my images for the website. I hope this helps.
Thanks for this post. I have been looking for this for over a month. I almost completed the process but I get stock in the last step: Settings > Languages > Strings translations. I have upload both images for the main language en-US and for the second language es-ES. However, when I look into the string translations, I do not see where I can select the logo.
What Can I do?
Hi, thanks for the comment.
You should see the new line with head title string in it where you can paste the URLs of your header images (see my image example below):
Hi there. What about if I do not wont to change head image, but wile selecting in them option for randomize showing of uploaded head pictures, those will disappear for second language when selected.
Hello, I followed the steps of your solution and I don’t see the field of url in Settings> Languages> String translations
Can you help solve this?