A fresh mix of code snippets and tutorials

Google Translate in 2 Steps

Follow this simple two-step tutorial to enable users to translate your web pages into many different languages. Great way to increase exposure and traffic.

Step 1

Add this code to the <head> section of your web pages (e.g., header.php):

<meta name="google-translate-customization" content="9b11c7489e624f84-411a55f0de6fb89f-gd1a550bade4ac0c2-11"></meta>

Step 2

Next, add this code to the location in your web page(s) where you would like to display the Google translation box (e.g., sidebar.php):

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

That’s all there is to it. Visit your page(s) to see the translation box displayed wherever you put it. Try it out by translating a few pages into Swahili or something :)


If you want to add some tuff styles to your translate widget, you can target the container in your stylesheet with the following CSS:

#google_translate_element {}

For more CSS hooks, examine the HTML markup in your browser. Then after you get things dialed in, you may want to display the Google Translate box only for visitors from another language. To do so, remove the autoDisplay:false parameter from the previous code:

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

No editing is needed for any of these code snippets, but there are a number of options and parameters available via your Google account. After logging in, the URL is (currently) https://translate.google.com/manager/website/

★ Pro Tip:

The Tao of WordPress