Language switcher - link changes URL

Question

I am using the Transposh Wordpress plugin to make a site bilingual.

The plugin comes with a dropdown language selector, but I would like to instead place a link in the navigation that toggles the site between the two languages.

The default site is in English, and an example page might be xxx.com/page

The other language is Portuguese, with the translated page at xxx.com/pt/page

So I would like the link to toggle between these two values:

<a href="example.com/pt/page">Português</a>

and

<a href="example.com/page">English</a>

Would jQuery be best to do this?

Thanks in advance!

score 2 · Accepted Answer · edited Mar 22 '14 at 11:28

2

When you load your page with this "example.com/pt/page" link, change the href and text of the link to English. And when you load the page with "example.com/page", change the href and text to Português.

<a id="lang" href="example.com/pt/page">Português</a>

$(document).ready(function() {
    var winLocation = window.location;
    var loc = winLocation + "";
    if(loc.indexOf("example.com/pt/page") != -1) {
       $("#lang").prop("href", "example.com/page");
       $("#lang").text("English");
    }
    else {
       $("#lang").prop("href", "example.com/pt/page");
       $("#lang").text("Português");
    }
});

Update: If you want to add this link to all pages to your site, then:

1) set class for all the links. Like this:

<a class="lang" href="anything">anything</a>

2) Now modify the jQuery handler like this :

$(document).ready(function() {
    var winLocation = window.location;
    var loc = winLocation + "";
    if(loc.indexOf("/example.com/pt/") != -1) {
       $(".lang").prop("href", loc.replace("/example.com/pt/", "/example.com/"));
       $(".lang").text("English");
    }
    else {
       $(".lang").prop("href", loc.replace("/example.com/", "/example.com/pt/"));
       $(".lang").text("Português");
    }
});

Assuming, your Português pages comes under "example.com/pt/" urls and English pages comes under "example.com/"

edited Mar 22 '14 at 11:28

saravankg

909
1
10
21

answered Mar 20 '12 at 04:41

tusar

3,364
6
37
60

Thanks tusar! How might I get this to work site wide? i.e. add/remove 'pt/' no matter what the page? – Caroline Elisa Mar 20 '12 at 14:01
I have updated the answer, but use it very cautiously (I didn't test). Make sure you check all the links before giving to your boss ... don't blame me if anything breaks :) – tusar Mar 20 '12 at 15:20
Thanks again tusar, but I am getting an error on the following line: `$(".lang").prop("href", loc.replace("/xxx.com/pt/", "/xxx.com/");`. Also, excuse me if I am being stupid, but should I wrap the if statement in a `.click` function? – Caroline Elisa Mar 22 '12 at 01:06
Hi Caroline, I missed a parenthesis. It is updated now. And no need to wrap it under a click handler. We are preparing all the links when the page loads. – tusar Mar 22 '12 at 05:13
Thanks tusar! Just swapped the "English" and "Português" around and it works a charm. – Caroline Elisa Mar 22 '12 at 19:29

score 1 · Answer 2 · answered Mar 20 '12 at 20:00

1

Since I wrote that plugin (Transposh) I think that your best way would be to write a simple widget to do as you wish, this will probably be a single line of code. Properly run at your backend, and do as you wished.

The guide is here: http://trac.transposh.org/wiki/WidgetWritingGuide

You can check the is_active of the structure sent there to provide what you wanted.

Have fun

answered Mar 20 '12 at 20:00

oferwald

91
1

Thanks oferwald, I'm sure you know best! But before I commit innumerable hours to this (I am not the greatest coder) could you tell me if I will be able to use the widget code to create a link that toggles the languages, that I can add to the WP menu? – Caroline Elisa Mar 22 '12 at 01:09

Language switcher - link changes URL

2 Answers2

Linked