HOWTO: Display content based on current language using qtranslate

QTranslate is a flexible and simple blog translation plugin. Using QTranslate you can easily convert your blog to a multilingual site. However to use it fully functional, you need a few modifications in your theme. Here I will show you how to fix your links and content based on current language on Qtranslate.

Adding language selector using php

After you set up a multilingual site, you will have to put a language selector to your site. You can either use selector widget, or you can manually add this code snippet to your header to display it:

<?php if(function_exists('qtrans_generateLanguageSelectCode')){ ?>
<div id="language-selector" class="xsmall lightblue">
	<?php echo qtrans_generateLanguageSelectCode('image'); // You can use image, text or both as an argument here ?>
</div>
<?php } ?>

If you add selector manually, you need to style it yourself. Here is an example css code:

.qtrans_language_chooser { list-style-type:none }
.qtrans_language_chooser li { float:left; margin-left:4px }
.qtrans_flag { border:1px solid #000} 

Qtranslate handles most translation job using wordpress filters and hacks. One thing it can’t translate is a handwritten in-site link in your theme header or footer. For example if you embed a homepage link in your template using bloginfo:

<a href="<?php bloginfo('url'); ?>">My Awesome Blog Homepage</a>

This link won’t have language string at the end. And if you change language and then click this link, your site language will revert back to original language. To prevent this issue, you can wrap your links using convertURL core function like this:

<a href="<?php qtrans_convertURL( bloginfo('url') ); ?>">My Awesome Blog Homepage</a>

Your link will now have current language added at the end (E.g. : http://mysite.com/en ). This will prevent language changes when a user clicks a hand-written link.

Displaying content based on current language

If you want to display different menus, images or text based on current language you can test current language like this:

<?php
if( qtrans_getLanguage() == 'en' ){ ?>
    <!-- English content here -->
<?php }else { ?>
    <!-- Other language content here -->
<?php } ?>

Display images based on current language

For images i suggest using this style:

<img src="http://mysite.com/logo-<?php echo qtrans_getLanguage(); ?>.png" />

For this to work you need to add language to image filename like this logo-en.png

Display a different menu for each language

To display a different menu depending on current language, first you need to define menus for each language.

<?php 
if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
		  'menu-header-en' => 'Main Menu EN',
		  'menu-header-tr' => 'Main Menu TR',
		  'menu-footer-en' => 'Footer menu EN',
		  'menu-footer-tr' => 'Footer menu TR',
		)
	);
} ?>

Then you need to update code where you insert that location:

<?php wp_nav_menu( array(  'theme_location' => 'menu-header-' . qtrans_getLanguage() , 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
<?php wp_nav_menu( array(  'theme_location' => 'menu-footer-' . qtrans_getLanguage() , 'sort_column' => 'menu_order', 'container_class' => 'menu-footer' ) ); ?>

Now you can go to Appearance->Menus and add different menus for other languages.


I hope you liked my guide on Qtranslate. If you don’t have that plugin you can download qtranslate here.

[contact-form-7 404 "Not Found"]
  • Ping: gestion des liens avec qtranslate « Support HBM

Reply



Free Newsletter

Subscribe to our newsletter for awesome tips about Wordpress and Web Design
* = required field

powered by MailChimp!

Keywords Sponsorship

Powered by WordPress and Shailan