Add Google translate to your pages · Wordpress

Add Google translate to wordpress without plugin

If you want to add Google translate functionality to your wordpress site without using a plugin, here are the steps:

Note: Please note that to be able to add google translate on your site, you need to have a self-hosted wordpress installation (wordpress.org instead of wordpess.com).

Is your website address companyname.wordpress.com? Then you are using a wordpress.com installation and you can not install the widget on your site.

Go to Google translate pages and click “Add to your website now”:

google

Log in with your Gmail account (Create one if you don’t have it) and once you have logged in, add your website’s URL, for example: name.synology.me/wpTutorial and click “Next”:

google translate website URL

Configure the settings:

  • Choose the languages you want to have translated
  • The layout of the translation bar
  • and choose if you want to have the banner that normally appears when you access a site in another language, like this:

banner"

and click “Get the code”:

google

We are almost done, go to wordpress admin and click on “Appearance” and “Widget” and add a TEXT widget to your side bar:

add

Add a title, for example: Translate this page and copy the code you got from the google site:

add

and if you done everything correct, you will see the following on your page:

translated"

Enjoy!!

NOTE: If you want to remove you site from this Google Translate:

Simply Click on here, go to “Tools” > “Translation Memories” >> Remove your site reference…

39 thoughts on “Add Google translate to wordpress without plugin

  1. Hello Ruth,

    When I go into Widgets I dont see the “Main Sidebar” title. I see “Primary Widget Area” also I can not add a new text under this.

    In Google I have two sets of codes. One “Meta tag” and one called “Snippet”. I think the snippet is the one you use.

    Like

    1. Hi Magnus,
      Every theme has a unique layout and set of widgets. Every “widget area”, points to a different place in your page. For example in theme “Twenty eleven” if your put new widgets in the “main sidebar” area, they will appear to the right of your page and below the picture. Choose any widget area you have available in your theme, paste a text widget with the google code and view your results. If the placing is wrong, move the text widget to a new area until you find the right place.
      Let me know if you have more questions. /Ruth

      Like

  2. Hello again Ruth,
    A “Curve Ball” from Google Translate ? In the text on my WP site I have a name – which should be identical in all languages, however Google translate also translates the name. Is there a possibility to “protect” specific word combinations from translation ?

    Like

      1. Does not work to put in the widget – depending on where you put it – it either removes the function or have no effect. Is it in the Editor and header.php you should place the program lines ()
        ? At the beginning of the file there is a line defining the file for language attributes before the part with blog info. Should you paste the lines after this and before ?

        Like

    1. Hi Magnus, if it is certain words that you want google to not translate, you just write:(example): “contact me:()span class=”notranslate”>name of your company<span(). By doing this, Google will translate contact me, but not whatever you put between the brackets. In the example, it will not translate “name of your company”. You write the “no translate” span code in the text editor, not in the visual where you normally write. There is a tab on the right hand corner of the text editor, that will let you do the switch.
      Let me know if you still are having problems. /Ruth

      Replace the last bracket () with > and the first one with <. If I wrote it correctly wordpress would read it as code and suppress it.

      Like

  3. Hey woulɗ you mind letting mе know wɦich wеbhost you’re working
    with? I’ve loaded your blog іn 3 completely different web browserѕ and I muѕt say this
    blog loads a lot qսicкer then most. Can you suggest a good hosting providеr at a honest
    price? Cheers, I appreciate it!

    Like

    1. Hi, I am hosting my webpage on my synology NAS (my own server) so I can’t recommend a webhost as I don’t have any experience with them. I can recommend to buy your own Synology and give it a try, a new world of opportunities will open up!

      Like

  4. Hi there,

    I’m using WordPress.com template, and following your tips. Unfortunately, when i copy content into the Text widget and save – it removes the part after …
    Effectively it doesn’t work.
    I cannot add anything to meta section of header.php, as i’m only using wordpress.com layouts.
    Will this not work here, only wp.org?

    Like

  5. Hey! Quick question that’s totally off topic. Do you
    know how to make your site mobile friendly?
    My web site looks weird when viewing from my iphone 4. I’m trying to find a theme or plugin that might
    be able to fix this problem. If you have any suggestions, please share.
    Appreciate it!

    Like

  6. Hi Ruth.

    When i “Copy and Paste” the Code into my sidebar.
    it was only display the code and wont display as logo dropdown.
    the code was like this :

    function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: ‘en’, includedLanguages: ‘ar,cs,de,el,en,es,fr,hi,id,it,ja,kn,ko,ms,nl,pt,ro,ru,th,tl,uk,vi,zh-CN’, layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, ‘google_translate_element’);
    }

    can you resolve it brother ?
    sorry ,my english is poor (bad)

    Like

      1. Hi there! Unfortunately that only works on WordPress.org, where you have your site self hosted. WordPress.com doesn’t allow some type of coding, when you try to save the Text Widget the content is changed to only what is allowed.

        Like

  7. Hi Ruth, mi trying everything and the widget doesnt reconigze the code. It keeps showing me this: function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: ‘es’, includedLanguages: ‘de,en,fr,ru,zh-CN’, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, ‘google_translate_element’); } //translate.google.com/translate_a/element.js?cb=googleTranslateElementInit

    Like

    1. Hi,

      Is mochileando.wordpress.com the site you want to add the widget to? You need to host your own website before you can add widgets to your site. WordPress.com wont allow you to do it.

      Tienes una pagina web muy bonita!
      /Ruth

      Like

  8. Thanks for the tutorial. Using your tutorial, I almost implemented the step by step process.

    However, there is a minor glitch. The G translator widget is not in the center ?

    Is it becasue of CSS ? Do I need to edit CSS ? or something else ?

    Like

    1. Hi Vikas,

      My guess is that you need to change the CSS on the widget area you have placed your Google Translator. Test and let me know! /Ruth

      Like

      1. Hi again,

        You need to use your browser’s developer tools to see which css element you would need to change. What is your site URL?
        /Ruth

        Like

    1. Hi again,

      When I check your site CSS, if you change your body css to center, it will align the google translate widget, but I wouldnt recommend doing that as it will change everything your have in your body. You should create a separate css class for your widgets.
      Developer tools css

      /Ruth

      Liked by 1 person

      1. My pleasure Vikas!
        If you have google analytics installed in your site, you can check out my other website: curbal.com.
        Tons of useful resources there: Google analytics guides, glossary, dashboards….
        And best of luck with your site🙂
        /Ruth

        Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s