I am aware of the question What are options are there to implement a multi language site, but the answers there are focused on multi-language support on the backend as well as the frontend.

I am only concerned with offering multi-language viewing of a site's content, not multi-language content creation.

Could it be as simple as putting the Google Translate Tools code on my site? I see that there are at least a couple of plugins that offer this functionality - anyone have experience with those?

3 Answers 3


If your just looking for a way for your site to be viewed in other languages I would defiantly recommend using Google Translate Tools. I just add it to the theme:

<div id="google_translate_element"><span id="trans">Translate: </span></div>

You can hide the Google Logo and funky colors in your css:


Instead of calling the Google Translate js I just copy the return script and add it to my main js file.


Google provides embed code to use on your website:

 <div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

The first line: <div id="google_translate_element"></div> can be placed where you want the translate drop down box to be shown:

alt text

The section between the first set of <script> tags are the language and layout options. The last set of <script> tags call more javascript which Google inserts inline in your html while the dom is loading. To speed up this process and avoid the extra http request and inline script I remove the last call and add the code returned by Google into a "master" js file I use that contains all my custom javascript combined into one file. The code that Google returns is:

(function(){var d=window,e=document;function f(b){var a=e.getElementsByTagName("head")[0];a||(a=e.body.parentNode.appendChild(e.createElement("head")));a.appendChild(b)}function _loadJs(b){var a=e.createElement("script");a.type="text/javascript";a.charset="UTF-8";a.src=b;f(a)}function _loadCss(b){var a=e.createElement("link");a.type="text/css";a.rel="stylesheet";a.charset="UTF-8";a.href=b;f(a)}function _isNS(b){b=b.split(".");for(var a=d,c=0;c<b.length;++c)if(!(a=a[b[c]]))return false;return true}
function _setupNS(b){b=b.split(".");for(var a=d,c=0;c<b.length;++c)a=a[b[c]]||(a[b[c]]={});return a}d.addEventListener&&typeof e.readyState=="undefined"&&d.addEventListener("DOMContentLoaded",function(){e.readyState="complete"},false);
if (_isNS('google.translate.Element')){return}var c=_setupNS('google.translate._const');c._cl='en';c._cuc='googleTranslateElementInit';c._cac='';c._cam='';var h='translate.googleapis.com';var b=(window.location.protocol=='https:'?'https://':'http://')+h;c._pah=h;c._pbi=b+'/translate_static/img/te_banner_bk.gif';c._pci=b+'/translate_static/img/te_ctrl.gif';c._phf=h+'/translate_static/js/element/hrs.swf';c._pli=b+'/translate_static/img/loading.gif';c._plla=h+'/translate_a/l';c._pmi=b+'/translate_static/img/mini_google.png';c._ps=b+'/translate_static/css/translateelement.css';c._puh='translate.google.com';_loadCss(c._ps);_loadJs(b+'/translate_static/js/element/main.js');})();

This is mainly for performance reasons to avoid the extra request and avoids the website having to communicate with Google unless a language is chosen from the drop down box.

The drop down box can be customized using css. For example here is how I display the box on the site I used it on.

alt text

  • Chris_O, can you add a little detail regarding the javascript part of your answer? I'm not very familiar wwith JS, so I'm not sure what you mean by "copy the return script". Sep 19, 2010 at 18:24
  • @tnorthcutt see edits above.
    – Chris_O
    Sep 19, 2010 at 22:49
  • Excellent, thanks for the additions! Very good answer. Sep 20, 2010 at 18:22

please see this question Best practices for localizing WordPress content? maybe you find an solution from this ideas


I'm using qTranslate plugin for a project that i'm developing and i'm really happy with the results..

http://www.qianqin.de/qtranslate/ http://wordpress.org/extend/plugins/qtranslate/


Not the answer you're looking for? Browse other questions tagged or ask your own question.