Using jQuery To Translate Websites

mtes_translated

If you would permit me a wholly web development-related post, I recently finished a translate jQuery script for my friends’ charity site, Mission to El Salvador. Technically, the script doesn’t translate the English to Spanish, but it replaces the English text and (sometimes) HTML markup.

I was forced to do it this way because WordPress isn’t really set up for different “versions” its pages. I’m sure there may be a plugin to help with that but I’m sure this was easier. The main advantage is that there’s no page reload—when you click on the language flag the translation is instant. Since the theme we use, DonateNow, already calls in jQuery, I didn’t have to worry about adding more load time. The file itself adds 65k.

I also added a cookie for the translation preference, so that your selection is remembered as you navigate through the site, and if you close the browser out. I’ve never used cookies before but the cookie scripts I found at Quirksmode worked very well for my purposes.

There was some schlepping I had to do with the content, and I probably could’ve leveraged a unique class that’s given to every page. In order to do that I would have to use regEx and I generally avoid that when I can. To save time, if you’re going from English to Spanish, in some cases I could grab the English content before switching to Spanish, set a variable, and redeploy the variable value if the user switches back over to English. The variable value is then switched out with the Spanish content.

There’s no upkeep except for updating the “Recent Blog Post” content on the lower left of the index page. Whenever a new blog post is added I would just have to change a few numbers and a whole line. Nothing huge. The blog posts, by the way, are translated with Google Translate, so there’s no script updates needed in that area. There are probably some bugs in there still but the majority of the site passes.

For those interested, the .js file is here: translate_MTES.js.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.