I wanted to make sure that I was not leaving out a potential international audience. For example, one of the forums I frequent a lot belongs to a French company.
Luckily, WordPress has a plethora of translation plug-ins and two of them caught my eye: Global Translator by Davide Pozza and Transposh by Team Transposh.
Both are excellent plug-ins, but they also suffer from one drawback: it fills your sidebar (widget) with 40-some flags or you have a silly drop down box. I wanted a more elegant option, and this is how I’ve managed to do this.
What does it do?
On your right-hand side, you will find a “Translate this” button. When you click it, a little box pops up with all the available translation options. Simply select one of the flags matching to your country / language of preference and “Presto!”.
When you do not need any translation or it has already been translated into your preferred language, then it’s nicely out of your way and gives me more room for other features.
And How?
It involved a surprisingly minimal amount of modifications to the theme, specifically the sidebar.php file, adding some JavaScript magic and of course some CSS to spruce things up a little.
PHP Portion
The PHP code is as following:
<?php if(function_exists("gltr_build_flags_bar") || function_exists("transposh_widget")) { ?>
<div id="translate_btn">
<span title="<?php _e('Translate this page into another language','monochrome'); ?>">
<?php _e('TRANSLATE THIS','monochrome'); ?>
</span>
</div>
<div style="clear: both;"></div>
<div id="translate_post">
<?php if (function_exists("gltr_build_flags_bar")): gltr_build_flags_bar(); else: transposh_widget(array()); endif;?>
</div>
<div style="clear: both;"></div>
<?php } ?>
This code will work for either the Global Translator or Transposh plugin. It will check if one of the two is installed and render the widget inside <div></div> tags. If neither is installed, nothing will happen. So it’s safe to deactivate the plug-ins, etc.
You can insert this code essentially anywhere you’d like. In my case, I’ve placed it in the sidebar.php file included with the “monochrome” theme from mono-lab. Specifically, it’s located almost immediately after the <ul class=”ext_meta”> tag.
CSS Portion
The CSS portion can be added to your theme’s style.css file and really depends on your own theme with the exception of the following bit:
#translate_post {
display:none;
padding:5px;
position:absolute;
width:200px;
z-index:10;
margin-top:4px;
}
#translate_btn span {
cursor:pointer;
}
As you could see from the previous PHP portion, the rendered code for the flags is wrapped inside a <div> tag with the id of “translate_post”. We don’t want to show this to the user just yet, so set the display:none option.
The other options are to make sure the box does not become freakishly long (200 pixels), doesn’t move other things around when displayed (position:absolute) and doesn’t get covered by embedded items such as videos (z-index:10).
The #translate_btn portion helps clue the end-user in that something can be clicked when the mouse is over your “TRANSLATE THIS” text.
You may wish to add other values as well, for example to add a background color or a border. Again, this depends on your taste and the theme you’re using.
JavaScript Portion
The JavaScript portion requires that jQuery is already loaded by WordPress. In a few instances this is not the case by default, so you will need to include the following in your header.php theme template file, before <?php wp_head(); ?> tag:
wp_enqueue_script('jquery');
Most of the fancier themes already include a JavaScript that initializes a few variables or built-in scripts. Generally they are called init.js or script.js. You can use these to add the required JavaScript for this, or you can create a new file that gets called from the header.php theme template. For example:
On to the actual JavaScript:
jQuery(document).ready(function( $ ){
/* Translate Box */
var _translate_box_vars = {
init_timeout: 3000,
timeout: 1500,
button: '#translate_btn',
window: '#translate_post',
_timer: 0
};
/* What follows does not need editing */
$(_translate_box_vars.button).click(function (e) {
if (!$(_translate_box_vars.window).is(':visible')) {
leftVal=e.pageX-($(_translate_box_vars.window).width()/2)+"px";
topVal=(e.pageY+4)+"px";
$(_translate_box_vars.window).css({left:leftVal,top:topVal}).fadeIn(300);
_translate_box_vars._timer = setTimeout("jQuery(function($){$('"+_translate_box_vars.window+"').css({left:leftVal,top:topVal}).fadeOut(300)});", _translate_box_vars.init_timeout);
}
e.stopPropagation();
});
$(_translate_box_vars.window).hover(
function () {
clearTimeout(_translate_box_vars._timer);
},
function () {
_translate_box_vars._timer = setTimeout("jQuery(function($){$('"+_translate_box_vars.window+"').css({left:leftVal,top:topVal}).fadeOut(300)});", _translate_box_vars.timeout);
}
);
$('body').click(function(e) {
if (!$(e.target).is(_translate_box_vars.window)) {
$(_translate_box_vars.window).fadeOut(300);
clearTimeout(_translate_box_vars._timer);
}
});
});
The code is not highly optimized to help you understand what is happening. If you are not comfortable with JavaScript, you will just need to pay attention to what follows the Translate Box comment, specifically:
/* Translate Box */
var _translate_box_vars = {
init_timeout: 3000,
timeout: 1500,
button: '#translate_btn',
window: '#translate_post',
_timer: 0
};
It sets a small number of variables that will be used by the rest of the script later. The init_timeout variable specifies how long the translation window (containing the flags) should remain open and the user has not yet placed his mouse inside that window. In the example above, this is 3 seconds (3000 milliseconds).
The timeout variable specifies how long the same window should remain open if the user has placed his mouse inside that window (ie, hovered the mouse over one of the flags). In the example above, this is half the time of the initial timeout – 1500 milliseconds or 1.5 seconds. You can change these as you please.
The following two variables, button and window, specify which <div id> contains the button (text) to open the translation window, and the translation window itself. If you have not modified the PHP portion provided earlier, you should not have to change this.
The remainder of the JavaScript handles three things in this order:
- What happens when the user clicks the button (open the window and set a timer for init_timeout milliseconds)
- What will happen when the user moves his mouse inside the window (stop the timer and start it with timeout milliseconds if it has left again)
- What will happen when the user clicks anywhere else (close the open translation window)
You’re almost there
There are a few things that you need to remember on the plug-in side. If you are currently using the Global Translator or Transposh widgets in your sidebar, it is highly recommended to disable these (remove them from the sidebar).
Global Translator only uses flags, which is sufficient for this purpose. However, you should reduce the number of flags per row to a maximum of 10. Alternatively, you can increase the width of the window in the CSS portion.
Transposh uses a drop-down list by default. On the plug-in settings page, you can change this to flags. I recommend disabling the progress bar feature, especially because the user will not see it when you’re implementing this fancy WordPress translation.
I personally recommend enabling the “SEO friendly” options in either of the plugins, which provides URLs such as http://www.myatus.co.uk/ja for translations.
Otherwise, you should be ready to give this a try! Let me know if you’re having any issues – just leave a comment below or contact me directly.
Related posts:
