Multilingual custom header image

Custom header image for WordPress website with Polylang plugin

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="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;"><img class="header-image" src="&lt;?php header_image(); ?&gt;" alt="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" width="&lt;?php echo esc_attr( get_custom_header()-&gt;width ); ?&gt;" height="&lt;?php echo esc_attr( get_custom_header()-&gt;height ); ?&gt;" /></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.

0 comments

Leave a Reply