2

I have a multi language site and people come in via links WITH a url suffix (/lang/en for instance) or WITHOUT a suffix (just the page url).

Now I want to create the language switch function with a link (with a class to trigger the javascript).

My link class will be "english" for instance and in the JS I first need to check if there isn't a language suffix to the url already before I append it.

Here's what I have right now (from another thread):

<a class="english" href="">English</a>
<script>

$('.datalink').attr('href', function() {
return this.href + '/lang/en';

});

</script>

This adds the suffix but Without checking if it already exists, how do I check if it is already there and not append it? or change it to another language (/lang/nl)?

UPDATE

Actually my class is not on the href but on the <li> around it, it looks like:

<li class="english"><a title="English">English</a></li>

so now I have

$('.english >a').attr('href', function() { 
  var suffix = this.href.match(/lang\/en\/?$/i) ? "" : "/lang/en"; 
  return this.href + suffix; 
}); 

NOTE Wat I want to achieve is two links on each page of my website that will consist of the basic page url with a

lang/en 

or

lang/nl

suffix to them. When clicked those links will load the same page but with the language suffix in the url, my language plugin will pick that up an present the language.

1
  • Will the language always be en, or should it be related to the language specified in the title of the element? May 12, 2013 at 16:35

3 Answers 3

0

You can use a regular expression to check if the URL contains the suffix:

if (this.href.match(/lang\/en\/?$/i)) {
    /* CONTAINS THE SUFFIX */
} else {
    /* DOESN'T CONTAIN IT */
}

The way that I'd probably do it is as follows:

$('.datalink').attr('href', function() {
    // suffix is blank if the URL already contains the language portion
    var suffix = this.href.match(/lang\/en\/?$/i) ? "" : "/lang/en";
    return this.href + suffix;
});
3
  • Hi Dave, Thanks for the reply! Valuable piece of code! Heres what I made of it: $('.english').attr('href', function() { // suffix is blank if the URL already contains the language portion var suffix = this.href.match(/lang\/en\/?$/i) ? "" : "/lang/en"; return this.href + suffix; }); and the same piece for the ".dutch" class menu url. My link looks like <a class="english" href="">English</a> but on page load with the code in the header it doesn't rewrite the link to the url+suffix. Any idea how this comes?
    – Mvd
    May 12, 2013 at 9:23
  • Ok, I found out wat the problem is: my class is not on the href but on the <li> around it, it looks like: <li class="english"><a title="English">English</a></li> how would I have to adress the a href inside the <li> ?
    – Mvd
    May 12, 2013 at 9:44
  • Much simpler - I'll get back to you asap
    – mplungjan
    May 12, 2013 at 11:57
0

Somehow the none of the above javascript worked for me, I don't know what I was doing wrong but finayl I decided to resort to php cause I understand that much better. I use this on a wordpress site and I came up with the following code (in theme functions.php) that worked for me:

// add languages to menu
add_filter('wp_nav_menu_items','add_langs', 10, 2);

function add_langs($items, $args) 
{

    if( $args->theme_location == 'primary-menu')

$current_url = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] .     $_SERVER['REQUEST_URI'];
$href = str_replace(array('/lang/en','/lang/nl'),'',$current_url);

    $english = '<li class="english"><a href="'.$href.'/lang/en">EN</a></li>';
    $nederlands = '<li class="nederlands"><a href="'.$href.'/lang/nl">NL</a></li>';
    return $items . $english . $nederlands ;

}

This finds my menu called "primary-menu" and adds two items to this menu consisting of $english and $nederlands links.

I had to get the page url with $_server['HTTP_HOST'] instead of get_permalink() cause that one returned a random url somehow. the first one always works and with the str_replace I replace the language additions first if they exist (str_replace doesn't need an if statement, it always checks if it exists before replacing)

Hope this helps someone else out, still wondering why the javascript didn't work for me!

0

if it is a suffix that always starts with /lang, try this

Live Demo

$('.english a').each(function() {
    $(this).attr('href', this.href.split("/lang")[0] + '/lang/en');
});

or if you want to keep one if there

$('.english a').each(function() {
  var href = this.href;
  var pos = href.indexOf("/lang/");
  if (pos == -1) $(this).attr('href', href.substring(0,pos)+'/lang/en');
});
3
  • Hi mplungjan, thanks for the reply! I found out that wordpress adds the class that I want to adress to the <li> instead of the <a> tag, it looks like: <li class="english"><a href="">English</a></li>. How would I adress this a inside li tag on page load?
    – Mvd
    May 12, 2013 at 10:22
  • The class ".datalink" is in my code actually class ".english" (the datalink is from the thread I got the code from). So I was more thinking of something like: '$('.english >a').attr('href', function() { ` is that sound coding? (the ".english >a" part?). I want to adress the a inside the li class english. Strangely enough this doesn't rewrite my a href on page load.... I'm a bit puzzeled!! What I got now is: $('.english >a').attr('href', function() { var suffix = this.href.match(/lang\/en\/?$/i) ? "" : "/lang/en"; return this.href + suffix; });
    – Mvd
    May 12, 2013 at 15:56
  • Hi mplungjan, Thanks for trying to solve this, I think the .each will not work for me cause with this one snippet I only want to rewrite or write one href url(i'll add another snippet for the other language link). The thing is that I would be able to just grab the url and ad the suffix but the url MIGHT have a suffix of the wrong language, the right language or no suffix at all. So I got this code I added above but it just doesn't do anything in my page. first I thought because I adressed the li instead of the a but now that I have .english a that can't be the thing, any ideas?
    – Mvd
    May 13, 2013 at 16:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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