qtranslate-tips

HOWTO: Display content based on current language using qtranslate

on April 25, 2012 | 22,122 views

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"]
ADVERTISEMENT
ADVERTISEMENT

About Shailan.com Staff

Shailan.com is a design blog about WordPress and web design. We regularly write about wordpress, plugins, themes, web design resources, php, css, jquery, adsense and more.. If you want to get notified about our posts, be sure to subscribe to our feed or follow us on facebook.

Share Your Thoughts

Your email address will not be published.

11 thoughts on “HOWTO: Display content based on current language using qtranslate”

  1. Hi there, thank you so much for this helpful article.

    Sorry for my ignorance, regarding “Display a different menu for each language
    ” part, in which files I have to put the snippets? functions.php? front-page.php?

    Thank you so much!

    Valerio

  2. very thanks for u help!

    1. You are welcome. I’m glad it helped.

  3. Gilberto says:

    Excelente. Explicado con claridad y muy Ăștil.

  4. Alexei says:

    For translation of your multilingual websites I recommend https://poeditor.com/. You can do a great job with it.

  5. cendana says:

    Wow, finally found some clue in here.. thanks a lot

  6. Anonymous says:

    Thanks, very useful!

  7. Anonymous says:

    That simple. Thanks.

  8. min says:

    thanks simplest solution.

  9. Harun says:

    wow!….single most useful How-To page in a long time. Thanks!