How to Add Google Translator in Header of Thesis Theme

In this tutorial I will show you how to add Google translator in header of thesis theme. Previous tutorial I explained how to add banner ads in header. In thesis we know we can customize the theme as our own wish. You can place any widgets in header like search box, Google translator, Google custom search etc…

Watch the full video here:

If you can’t watch this video, follow this step below.

1. To add this into header Login to your word press admin.

  • Choose ‘custom file editor’ under thesis options in left sidebar of the word press dashboard.
  • Select custom_function.php file and click on edit selected file.
  • Paste the below code and save it then visit your site.
/************paste it in custom_function.css*******/

//CODE For Google Translator

add_action('thesis_hook_header', 'header_ad');
function header_ad() { ?>

<div id="google_translator">

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
</script><script src=""></script>

2. Instead of the above method you can also use FTP.

  • Select the path public_html/Yourdomainname here/wp_content/themes/thesis_16/custom/custom_function.php
  • Open the file by right clicking on the file.
  • Paste the above code and save it then visit your site.

Use any one method either 1 or 2. If your site is other than English language visit the Googletranslate. Select Tools and resources and choose your website language it will give one code. Find the line page language: ‘ ‘ replace the above code with your site language.

For eg: If your site is in Spanish

Then, you will see this page language: ‘es’ in Google translator code. Then replace the above code page language: ‘en’ with ‘es ‘

After you done the above step you see this screen shot below:

Google Translator

3. Next, copy and paste the below code into custom.css and click save.

/******paste it in custom.css******/
/***** code for google translator*/

.custom #google_translator {

float: right;
margin-top: -3em;
margin-right: 19em; }

Now you will see the Google translator in your website.

Google Translator

If you want the Google reader in some other places in header you have to do few changes only in custom.css.

Share your experience in below comment section. For more checkout our all Thesis theme tutorials..

{ 3 comments… add one }

Leave a Comment