A Solution for a Bilingual WordPress
In: , , , , ,
On: 2004 / 05 / 11
Shorter URL for this post: http://ozh.in/10

Bilingual ?The ability to maintain a weblog in two (or more) languages is an often requested feature, especially by people like me who just can't make up their mind between French and English :)
I've come up with a very easy way to implement this in an existing website, as you can see by yourself if you click on the tiny flags. I've also added cookie support, so you just need to chose a language once. This may not be *the* perfect solution, it's just one way, and a very simple one to add in an existing site.


The trick : you have two div's, one with attribute "lang=fr", one with "lang=en". A small javascript hides every divs with a particular "lang" and shows the others.

The javascript part

First, put the following code in your index.php, or in an external javascript file :

< View plain text >
js

  1. function createCookie(name,value,days) {
  2.   if (days) {
  3.     var date = new Date();
  4.     date.setTime(date.getTime()+(days*24*60*60*1000));
  5.     var expires = "; expires="+date.toGMTString();
  6.   }
  7.   else expires = "";
  8.   document.cookie = name+"="+value+expires+"; path=/";
  9. }
  10.  
  11. function readCookie(name) {
  12.   var nameEQ = name + "=";
  13.   var ca = document.cookie.split(';');
  14.   for(var i=0;i < ca.length;i++) {
  15.     var c = ca[i];
  16.     while (c.charAt(0)==' ') c = c.substring(1,c.length);
  17.     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  18.   }
  19.   return null;
  20. }
  21.  
  22. function language(lang_on, lang_off) {
  23.   createCookie("langue_on",lang_on,365);
  24.   createCookie("langue_off",lang_off,365);
  25.     for (var i=0; i<document.getElementsByTagName("div").length; i++ ) {
  26.       if (document.getElementsByTagName("div")[i].lang == lang_on) {
  27.         document.getElementsByTagName("div")[i].style.display="block";
  28.       }
  29.       if (document.getElementsByTagName("div")[i].lang == lang_off) {
  30.         document.getElementsByTagName("div")[i].style.display="none";
  31.       }
  32.     }
  33. }
  34.  
  35. function startlanguage() {
  36.   var notdefined;
  37.   var lang_on = readCookie("langue_on");
  38.   var lang_off = readCookie("langue_off");
  39.   if (lang_on == notdefined) {lang_on = "fr";}
  40.   if (lang_off == notdefined) {lang_off = "en";}
  41.   language(lang_on,lang_off);
  42. }
  43.  
  44. window.onload = function () {startlanguage();} [/js]
  45.  
  46. <h2>A few explanations</h2>
  47.  
  48. The first two functions, <strong>createCookie()</strong> and <strong>readCookie()</strong>, store cookies and read cookies so the user can set for once a preferred language. If you are already using a rather lengthy javascript file, chances are you already have cookie functions. In this case, no need to duplicate things, just modify the lines above to use your functions.
  49.  
  50. The next function, <strong>language()</strong>, is the core of the thingie. First, when called, it creates two cookies : one for language to display, one for language to hide. Then, it "loops" through all <em>div</em> elements of the pages, and toggle their display according to the parameters.
  51. (You're wondering, Why not a simpler function with just one parameter ? Well, first, I suck at javascript, and second, so it is simpler to extend the script to support three or more languages)
  52.  
  53. Next is <strong>startlanguage()</strong> : thanks to the last line, this function is called when the page loads, and its purpose is to set the language preferences : either there is cookies, or a default value is set (here, default is "display french and hide english")
  54.  
  55. <h2>Embed in your site</h2>
  56.  
  57. Add two links with the following code :
  58.  
  59. [js]<a href="javascript:language('fr','en')" title="Version Francaise">En Fran&ccedil;ais</a>
  60. <a href="javascript:language('en','fr')" title="English Version">In English</a>

And, for example, two divs :

< View plain text >
HTML

  1. <div lang="en">Hello World !</div>
  2. <div lang="fr">Salut Poupoule !</div>

And that's it.

Use this in WordPress

To use this in WordPress, you simply have to write your posts with the div's. If XHTML validation is an important matter to you, you'll have to write a bit of HTML tags so that when WP automatically adds

and so on, you still validate. A validating example is following :

< View plain text >
HTML

  1. <div lang="en"><p>Include an opening "p" tag in the first line from first paragraph.
  2.  
  3. Another line goes here. And as paragraphs as you want.
  4.  
  5. And don't forget to close the "p" it at the end.</p></div>
  6. <div lang="fr"><p>A la premiere ligne du premier paragraphe, incluez un tag "p".
  7.  
  8. Autant de lignes et de paragraphes que vous le souhaitez, bien s&ucirc;r.
  9.  
  10. Et avant de terminer la div, fermez le "p" que vous avez ouvert.</p></div>

The only real difficulty is that long posts become pretty huge when you type them twice to translate :)

Improvements ?

Instead of a simple default value for lang_on and lang_off, I think I'll add a language guess function. It could be guessed from referrer IP, or user's remote address, or maybe with browser's information, I still have to think a bit about this :)

You could also add loops to the main javascript function, so it will not toggle only div elements, but anything you'd need : p, img, span. Actually, working with span elements could be much more simple than with div's.

Shorter URL

Want to share or tweet this post? Please use this short URL: http://ozh.in/10

Metastuff

This entry "A Solution for a Bilingual WordPress" was posted on 11/05/2004 at 8:49 pm and is tagged with , , , , ,
Watch this discussion : Comments RSS 2.0.

33 Blablas

  1. arya » construindo o wordpress says:
    2004/06/04 at 5:37 pm

    […] ipertexto — site admin @ 2:37 pm este link ensina um hack para ter um site bi-lingual http://planetozh.com/blog//archives/2004/05/11/a-solution-for-a-bilingual-wordpress/ –> Comments […]

  2. Sidney's Blog » Give respect where it’s due says:
    2004/10/30 at 2:11 pm

    […] nalang The language switcher is a combination of hacks by Stephanie Booth (once again),

    rail-flex says:
    2004/05/13 at 9:40 pm

    An interesting way, instead of making your reader reloading the page with an attribute like "index.php?lang=en" if you use this method in order to translate your pages.
    It's faster, so totally user-friendly, well done Ozh !!! :D

  3. aletheia says:
    2004/05/14 at 1:00 pm

    I have the same problem, but do you translate each post or just write in whatever language you feel like? Maybe I'm a bit lazzy, but I haven't been able to bring myself to translate each post I write.
    The only thing I see with your method is that you would be loading double each time. If posts are long, loading is longer. Good solution though!

  4. RaiL-FleX says:
    2004/05/14 at 7:34 pm

    Yeah, that's true you have to load both languages but I still believe it's a good solution as you make your reader reload the posts (in the other language) if you use the method i described further up (and which is widely used). Then it's the same, but The Ozh's system is extremely pleasant and if you have a fast sql server (here it is the case … look at the benchmark at the bottom …) and a great internet connection, the "double-load" is almost transparent !

  5. Ozh says:
    2004/05/29 at 1:43 pm

    Yes actually it loads both languages, but even on rather lengthy posts, say 5K for example, it's still a lot less than any .gif in this page, so load time is unseen

  6. Thunderbyrd says:
    2004/06/02 at 6:02 pm

    I think you did a great job at tackling a problem that most people wouldn't have dreamed of taking on. Well done!

    Je pense que vous avez fait un grand travail à aborder un problème que la plupart des personnes wouldn't ont rêvé de la prise dessus. Puits fait !

  7. piou says:
    2004/06/28 at 6:38 pm

    pas mal mais :
    Рcela pose-t-il des probl̬mes de r̩f̩rencement (google.fr/google.com)
    – est-ce blind-people friendly ?
    – un exemple de site bilingue (mais beauf) : http://no-pasaran.blogspot.com/

  8. RaiL-FleX says:
    2004/08/31 at 3:32 pm

    J'ai besoin de ton script pour mon site.
    C'est facile à mettre en place, et c'est rapide, mais j'ai trouvé un défaut: l'attribut lang de

    n'est plus valide avec xhtml 1.1 .
    J'ai essayé de modifier ton code js pour qu'il parse les attributs class et non plus lang, mais sans succès (je suis une vraie quiche en js).

    Une idée ? :)

  9. Ozh says:
    2004/08/31 at 10:20 pm

    Pour utiliser "class" à la place de "lang" dans l'HTML, remplace dans le javascript "lang" par "className" (regarde l'exemple)

    Mais bon. Caisse t'as n'a fout' du XHTML 1.1 …

  10. RaiL-FleX says:
    2004/09/01 at 9:49 am

    Merci beaucoup Ozh, ça marche nickel !! :o)
    Je changeais 'lang' par 'class', ça ne pouvait pas marcher …
    Pourquoi XHTML 1.1 ? Parce que pour se la pét… enfin pour jouer à fond le jeu des validations w3c, autant le faire jusqu'au bout et respecter leur dernière norme (en attendant xhtml 2.0 :P).

  11. » Language switching for Basic Bilingual freshlabs says:
    2005/05/28 at 2:57 pm

    […] efore you start Get the BasicBilingual plugin for WordPress. Make sure you have checked Ozh's solution for a bilingual WordPress which is also […]

  12. nathan says:
    2005/06/15 at 11:19 am

    bravo pour ce petit guide, je viens de l'installer chez moi sans aucun problème ! :-)

  13. Ozh says:
    2005/06/15 at 12:34 pm

    Merci :)

  14. Petit says:
    2005/12/08 at 2:43 pm

    Hi!
    Seems like a great idea. I was just googling for langauage and cookies, as I thought that would be the proper solution. However, for some reason I can't get your tiny flags to work either in firefox or MSIE.
    Strange!

  15. Petit says:
    2005/12/08 at 3:17 pm

    Wow!
    Somthing else worked. You presented my flag.
    How did you do that?
    Deeply impressed :-)

  16. Ozh says:
    2005/12/08 at 3:40 pm

    Petit » it works in both browsers. It's just that this page in english only :) Try the next post for a live example.
    As for guessing your country, it's a plugin for WordPress I wrote, IP to Nation.

  17. Daniel says:
    2006/04/10 at 8:29 pm

    Hi, I really want to use your method, but I can´t get the javascript to validate! I´m trying to put your functions in my-hacks.php but I keep getting a parse error:

    Parse error: parse error, unexpected T_STRING, expecting ')' in … on line 13

  18. Ozh says:
    2006/04/10 at 9:59 pm

    Daniel » my-hacks.php is for PHP. This is javascript.

  19. Triqui says:
    2006/05/29 at 3:19 am

    I managed to solve the problem of having WordPress in two (or more) languages in a rather new way, check it out if you think it can be useful
    http://www.emanueleferonato.com/2006/05/26/wordpress-in-two-or-more-languages/

  20. Rodrigo says:
    2006/08/25 at 6:41 pm

    Hi,

    I didn't understand where to put "Embed in your site" section code… Can somebody tell me where I should put that portion of code?

    Thanks

  21. namakemono » Archiwum » DwujÄ™zyczny blog? Bilingual blog? says:
    2007/01/25 at 6:52 am

    […] RozwiÄ…zanie znalazÅ‚em bardzo szybko, a jego prostota byÅ‚a dla mnie na tyle wystarczajÄ…ca by nie szukać dalej. […]

  22. Urls Sinistras » Blog Archive » del.icio.us entre 23/10/2007 e 03/11/2007 says:
    2007/11/05 at 11:08 am

    […] A Solution for a Bilingual WordPressThe ability to maintain a weblog in two (or more) languages is an often requested feature, especially by people like me who just can't make up their mind between French and English […]

  23. Mr Surbade says:
    2007/12/18 at 3:03 pm

    "Instead of a simple default value for lang_on and lang_off, I think I'll add a language guess function. It could be guessed from referrer IP, or user's remote address, or maybe with browser's information, I still have to think a bit about this :)"

    I found this : http://erik.range-it.de/wordpress/plugins/getbrowserlanguage/

  24. Pup says:
    2008/02/09 at 8:20 am

    Genius! A lot of people having trouble with multi-lang-posting around the web and waiting for development of complex plugins. This simple solution worked sweet for me.

  25. Frank says:
    2009/09/23 at 10:53 am

    Very nice, but one drawback surely remains – the interface itself stays in the original language? Or is there any way to get all the headings, etc translated too?

  26. Ozh says:
    2009/09/23 at 11:08 am

    Frank » boy, that's a 5+ year old solution, when there were no translation plugins. There are much more advanced stuff now.

  27. nikolas says:
    2011/09/27 at 8:42 am

    Hello Ozh,

    I am a new wordpress user and I have a question (it may sound stupid). The two links and the two divs you mention in the section "Embed in your site" where do I embed them in each post?

    thanx

  28. Karibou says:
    2011/10/13 at 4:02 am

    Hey Ozh!
    thanks a million for this script! I spent all night trying to figure out how to switch between french and english on my blogger, so you saved the day!
    Twas so much better and easier than the other scripts I tried

  29. Karibou says:
    2011/10/13 at 5:20 am

    arg, juste un petit hic :
    quand je poste un message en bilingue sur mon blog, il apparait dans les deux langues l'une après l'autre, dès que je clique sur un de mes drapeaux le toggle prend le relais et c'est bien soit l'un soit l'autre…

    n'auriez vous pas une technique pour l'afficher par défaut en français?

  30. Ozh says:
    2011/10/13 at 10:04 am

    Karibou » c'est normalement activé par la dernière ligne du script ici (le windows.onload). C'est peut-etre a affiner en fonction d'autres scripts qui pourraient interagir

  31. tom says:
    2013/01/16 at 9:23 pm

    this works perfect ! However: in a bilangual blog you will also need bilingual labels: did you by any chance develop a solution for this problem ?

  32. Ozh says:
    2013/01/16 at 10:38 pm

    tom » No. This said, that solution is 8 year old now. Nowadays, there are WordPress plugins to do this, you should consider using modern techniques :)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar and sign for a free account
Spam: Various spam plugins may be activated. I'll put pins in a Voodoo doll if you spam me.

Read more ?

 « Apache and the trailing slash problem 
 Two weeks offline »