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. In this post, I will show you how to change your links and content based on current language using qTranslate core functions.

[toc type=”regular”]

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}

Fix Embedded Links in Your Theme Templates

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 the 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 qtrans_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 (Eg. : http://mysite.com/en ). This will prevent language changes when a user clicks a hand-written link.

Displaying Any Content Based on the Current Language

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

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

See Also

Display Images Based on the Current Language

For displaying language specific images, for example, a logo, I suggest using this style:

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

For this example to work as intended, you will then need to append language string 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 for WordPress. Don’t forget to follow me on twitter for more tips on WordPress Theme Development. Enjoy!

Deal Notice: We are using A2 hosting for all of our websites, and we are really happy with their service. So we wanted to share you this discount link for you to try it out. If you get a hosting using this link, you will also help us build better content for you: SSD Hosting - 300% Faster Than Standard Hard Drives