 Bonjour tout le monde. Bienvenue ce matin. C'est mon plaisir de vous parler à créer des sites multi-langue avec WordPress. Okay, did I just troll everyone here? I hope that's not what your customers feel like when they're visiting your site because they don't understand the language in which you've created it. And that's why it's my pleasure to be here in Miami this morning to speak to you about creating multi-lingual WordPress websites. Hi, my name is Sean. I'm the chief technology officer at Actionable Books. I'm based in Ottawa, Canada. And this is my second year here at WordCamp Miami. I've been using WordPress since 2009, both as a blogger, as a freelance developer, and now in a corporate environment. I speak English and French, and according to my friends and family, I also speak nerd. So to start talking about this topic today, there's a lot of words we're going to have to learn. Internationalization, localization, languages, locales, oh my, there's so much stuff. So let's go through a little bit of this. Languages. According to the Oxford dictionary, languages are the method of human communication, either spoken or written, consisting of the use of words in a structured and conventional way. What does this mean? We're talking about English, French, Spanish, Italian, Arabic. Those are languages. Then we get down to locales, which are about the parameters that define a user's language, region, or special preferences that the user might want to see in their user interface. Locales consist of a country code, usually, and a language identifier. Examples of these, if we look Canadian English, would be en-ca. US English would be en-us. If you look at Spanish, you have es-ar, es-co, and several others. These identify the differences even within a single language, and these are called locales. Internationalization, which sometimes goes by the name i18n, is the process of planning and implementing products and services so they can be easily adopted to a specific local language and culture. Then adopting that is actually called localization, the process of taking that internationalized product and making it work for a specific locale. Now, when you're creating multilingual websites, it's not just about translating the words that are on the site. There's a lot of other things you kind of have to keep in mind. For example, currencies. How do you show a money value? In English, we put a dollar sign before the numbers. Thousands are separated by commas, and the dollars and cents are separated by a period. In French, the dollar sign goes after the numbers. Thousands are separated by a space, and dollars and cents are separated by a comma, formatting dates. In US English, you usually go month, day, and then year. In Canadian English, you go day, month, and then year. Time. Canadian English, 4.30pm. French Canadian, 16h30. 24-hour time clock as well as an H separating the hours and minutes. The direction of the language. We're very used to right-to-left languages, all the languages originating in Latin or Greek, so English, Spanish, French, Greek, Latin. But if you get into Arabic, Persian, Hebrew, Yiddish, western Punjabi, those scripts are read from the right to the left. So this page here is a website on the Department of Foreign Affairs and the Canadian government talking about doing business with Canada for people from Jordan. Here's the English website. If you notice in the black menu bar at the top, second link over is the language switch button that's written in Arabic. If you were to click on that, there's the Arabic version of the page. So not only is it written in Arabic, but the sidebar has flipped sides. The breadcrumbs have flipped sides. And all the text itself is also aligned to the right. The other important thing to note is that, just for a best practice in creating multilingual sites, the language switching buttons, so in this case in the top right-hand corner you see English and French. English and French, actually. The important thing here is that those buttons are in the native language that you want to switch to. If I was a French user on this page, having the word French written in Arabic wouldn't do me any good. So you always want your languages to be printed in the native language that you're switching to. Another important thing with multilingual is to consider the length of your text. This screenshot here is an actual bug from wordpress 3.9, I believe it was, where the customize your site button that would show up in your dashboard looked great in English, but loaded up in German and look what happened. The button ran off into the next column. There are languages, French is one of them, German is definitely a culprit, where phrases are typically longer than they are in English. So it's something to consider when you're designing your screens is to make sure that everything is going to fit. So that gives you a little bit of background on what multilingual sort of entails. And now we want to look at how you actually would do this in wordpress. So wordpress itself, the core, is translated into 160 different locales. Now, 60 of these are completely 100% up to date with the most current version of wordpress and are available when you install wordpress core. You can pick any of those 60 locales. Translations like everything else in wordpress, it's part of the open source project, it's managed by volunteers. In this case, it's the Pauley Glotts team that takes care of making sure that wordpress is available to the most number of people in the most number of countries and languages available. So when you install wordpress, you get to pick which language you want it to be installed in. These are the 60 locales I was talking about that are 100% translated. But that just takes care of the interface for wordpress' dashboard itself. It has nothing to do with the front end being multilingual what you want your users to see. So we need to look at some different options to provide your visitors with that multilingual support. First thing that we're going to look at are a couple of plugins that could help you do this. First plugin I'm going to talk about is one called WPML. It is a premium plugin from on the go systems that allows you to manage a multilingual website and it takes care of your posts, your pages, your custom post types, taxonomies, menus, text from your themes, text from your plugins. It really covers everything off. What does that look like? So here we're looking at the screen with the list of pages that are on a website. And you'll notice there's a new column that shows up next to the page title that has the flags representing each of the locales that I have this website available in. And it will show a pencil if you want to go edit the translation of that particular page in that language or the little plus sign if you want to add a translation because there isn't one available for that particular language. Also at the top of the page, you now have a new filter to say just show me my English pages or just show me my Hindi pages and it filters it by that. Once you get into the post editor, it looks very similar to what you see in a regular WordPress installation except there's a new language box that shows up in the right hand sidebar. And this says this particular post is in French Canadian and it's a translation of an English post called Terms of Use Agreement. And it lets you switch back and forth between the translations that are available or to pull in content from the original one if you wanted to redo it. Let's say the English post had been updated and you could pull in that content and work with that. WPML allows you to choose the structure of the URLs, the permalinks that are given to your site. So the options here are put languages into different directories. So you can have example.com slash fr, example.com slash es and so on and so forth for different locales. You could do different domains. So as the screenshot here is showing, I've done subdomains with fr.wpml.dev being my French site, de.wpml.dev being the German site and so on. You can also do it as a parameter. So you can have your website's name with question mark lang equals fr at the end of the URL to get the French site. My personal preference is the first one putting the languages into subfolders. For custom post types, WPML lets you choose which ones you need to have translated and which ones you don't. So if you're using plugins that store data for you, let's say contact forms into a custom post type, you wouldn't want to translate those. So you can turn off all the translation options so it doesn't bother you. Same with custom taxonomies. You can choose which ones are translatable, which ones are not. And if they are translatable, you get a nice screen like this where you can go in and say, well, the English category in this case is called un-categorized. And in English, I'm going to translate it to something else, including picking a new slug that will appear in the URL if you want to look at the archive page for that taxonomy. One of my, just a little pro tip for you here on WPML, there is an option called make themes work multilingual. And this is an option to make some themes that are reliant on specific CSS usually to make sure that they work across all the languages. Most of the time, you do not need this option. So I would try turning it off and see if everything still works. I worked on a website last year that was very multilingual, 14 languages. And the homepage made over 700 calls to the database to check for translation options. It made the homepage load really slowly. Turning this option reduced that down to 250. It was still not great, but it was a heck of a lot better. So I would look at turning that off if you can. So one thing about WPML that I should cover is that each translation that you do, so every language that a page or a post is available in is stored as a separate post. So you manage them separately. If you were to turn off the plug-in, you would see a list of all your posts. And you would see the English one, the French one, the Hindi one, the Spanish one, they all be listed as separate items. This will, the reason I'm pointing this out is as we look at other options, you'll see there's other ways of doing that. The next plug-in I want to show is one called QTranslateX. Now QTranslate has been around for many years. I've been maintained by different authors over the years. QTranslateX is the latest version of it. And when I took a look at this while I was preparing for this talk, I was really quite impressed with the latest redesign of it. So I think it's worth looking at. It is a free plug-in. It's available on the wordpress.org repository. It supports, like WPML did, the post pages, custom post types, taxonomies, menus, and this also has general settings and widgets available in its translations. So here we are looking at another list, in this case it's a list of the categories. And notice at the top you have buttons for the different languages this site's available in. Clicking on those buttons will switch that screen so that you're looking at that language. And it's all kept within the one screen. The post editor, same thing. At the top you've got the flags for each of the locales this site is configured to use. So you can just switch back and forth between them live. As I said with WPML, managing them as separate posts, QTranslateX keeps everything in the one post. Any piece of the screen that has a, in this case it's a red border on the left-hand side. You can see it's circled in blue right now on that screenshot. Anything that has that border is managed in QTranslate so that it can be translated. The only thing on the screen you cannot set specifically by locale is the URL, the permalink, and any custom fields. Those are shared across all translations for that post. The way QTranslate does this is using short codes behind the scenes. If you were to turn off the plug-in you would see content like this on your post. You see short codes separating with the language codes between each phrase. This is what allows it to keep everything self-contained into the one post ID. QTranslateX allows translating of widget areas. So there again you have the flags at the top of your widget configuration and you can click on that to set the content in each locale. Menu structure is the exact same thing. And like WPML in QTranslateX you can set your URL structure for how you want it to be shown on the site. In the general settings this allows you to set your site name and your tag line in each language. So you can set just another WordPress site in every language. I recommend of course you change that one. The next one I'm going to look at, the next plug-in is called Babel. Now Babel is one I don't have that much experience with, but I'm starting to look at it. It's a plug-in that Automatic bought I believe it was about two years ago. And Andrew Nason who's the lead developer for WordPress has said that if they were ever to build multilingual support into WordPress's core they would probably do it the way Babel does. So there may be something to that to check out. Babel's big thing because it needs to support WordPress.com is that it doesn't create any additional tables in the database. It makes use of the structure that comes with WordPress's core. And like WPML translations are kept as separate posts. Babel supports posts, pages, custom post types, taxonomies, menus, widgets, just like the other ones we talked about. But when you're editing your translation, so in this case I'm editing a French page. It's a translation of an English page. You see them side by side. So the English text is there on the right and you have the post editor on the left for the French allowing you to reference the English one as you are writing the new text. So that's, you know, we just covered three plug-ins there. There are some other ones. Paulie Lang is another one that comes to mind that you can use. I haven't tried that one, but those three are a good starting point. The other approach that I wanted to talk about was using WordPress multi-site. If you're not aware, WordPress multi-site is a different way of installing WordPress that allows you to create multiple websites in what's called a network that share themes, they share plug-ins, they share the users that can log into WordPress. So one of the ways you can use multi-site is to set up a site for each language. The reason I say you want to use multi-site to do it is it's much easier than managing installing separate WordPress installations for every language. That would be a management nightmare. So what you want to do is set up a multi-site that has one multi-site for English, one for Spanish, one for French, but then you can log in and switch between them and manage them all together. For language switching, there are a couple of plug-ins that are designed specifically for WordPress multi-site that will allow you to link posts between sites so you still have that language switching capability. Now, on the topic of language switchers, it's always, of course, worth considering if you need one at all. You know, whether you want it to link directly from post to post to get equivalent content or whether you want it just to link to the home page in the other language. That really depends on how your site is designed. If you have the same content translated in every language or if there's only some posts that are available in one language, some available in another, that will sort of determine how you want to set up your language switching. So here's a little comparison chart I made of the methods we just talked about. You know, quickly looking at it, WPML is the only paid one. The others are all free. The way content is stored, WPML is in separate posts, so it's babble. Multi-site, of course, it's in separate tables in the database and QTranslate is all managed in a single post. You know, and I'm not going to go through the whole table. This is available in my slides that are published on my website. You can go through this after if you want to sort of remind yourself of the benefits of each one. I did put that together in case you found that handy. Next thing I want to talk about is the theme and plugin translation. I wanted to talk to you about this briefly just so that you know how this process works. Themes and plugins, of course, have all sorts of text that your users see. And these are all managed with three kinds of files. .pot, .po, and .mo files. These are all part of a system called GetText that WordPress uses to manage translations. .pot files are templates. They have all the original strings, the default values that your site uses. .po files, there is one for every locale that that theme or plugin is translated into that has those translations that map to the template file. And the .mo files are compiled, machine versions of that just to make things run quicker. There are many popular themes and plugins that come with all of these files already created, shipped with it, available in your language. But if it isn't, there's tools available so that you can manage the translation of those products to suit your needs. One of those plugins is called Locotranslate. It's a managed from plugin for themes and plugins that's available in the WordPress repository for free. And it gives you a screen that looks like this. What you see up top is the source text. So those are all the original little bits of text that would show up created by themes and plugins and allows you then in the lower box to put in the translation of that. .po edit is another option for this. This is a desktop application. It's available for Windows, OSX, and Linux. It is a freemium app, and it's the one that I've used the most when working with translations. One of the nice things is it gives you statistics about the status of the translations on your site. The reason these are really important is if you're working with professional translators, they're usually charged by the word. And these statistics allow you very easily to pull up how many words need translating so that you can figure out the appropriate billing. That statistics, as well as a couple of other features, are available in the paid version, which is $20. I find that's quite worth it if you're working on a site that you need all these features for. And this is what PoEdit looks like. So very similar to Locotranslate's web interface, but as I said, this is in the desktop. So you have all the strings in the top box. You have the translation in the bottom. And on the right-hand side, if it recognizes those words, it might offer a suggested translation based on other projects that have submitted translations to their site in the past. GlotPress is a new plugin that the WordPress community is developing. It's still a work in progress, but it's looking to do the same thing, allowing you to translate from within WordPress as a plugin the strings that are appearing on your site. If you want to look more at this tool, it's available at blog.glotpress.org, all the documentation for it. And as we'll see later, it's already in use in a bigger project that's really exciting, and we'll look at that at the end of the talk. Content translation. So this is about... So we've talked about all the tools now that allow you to enter your text in multiple languages. But then there's the issue of actually getting your text translated. Well, that's easy. Google Translate, right? No, no, no, no, please don't. Automatic translation is a big no-no. It is not accurate. Please do not use it. Use a translation service. There are companies out there. You'll find them in every city that this is professionally what they do. Usually they're charged by the word. I think there's other ones that you can get on contract to give you better rates. But that is the way to do it. They will make sure that, you know, your grammar is correct. My other kind of tip that I like, I like working with the same translator in the same language all the time. I don't like, you know, sort of finding a translator, you know, one day to do a couple of pages of different translator, six months later to do different pages. The reason being, every language has different ways of saying the same thing. And if you're using the same translator, they're going to develop a lexicon of words they use for your site so that you'll have consistent wording throughout, you know, different upgrades to your site. And that's definitely something important to pay attention to. The other really neat thing is that there are a couple of translation services that integrate directly into WordPress so that, for example, you write a post, you can say, submit this post for translation and the company gets a notification that example.com has a new page ready for translation. They prepare the translation and they can push it right back to you directly in WordPress. That's kind of cool. So ICANN Localize is one of those services. That one is integrated directly into the WPML plugin. So if you're running that one, you can submit your translations through there. Lingotech is another company that will do this for you. Their plugin is an extension that runs on top of the Polylang plugin if you want to use their service. I'm sure there are other ones, but those are two that I'm aware of. Finally, WordPress is part of this wonderful community that we call open source. So as with every other piece of WordPress, there is a way of contributing in multilingual. If you know languages other than English, there are ways to get involved. The Polyglots team that I referenced earlier are responsible for making sure that WordPress is available in the dozens of languages and many more locales. It's a big job and native speakers really help to make this process easier. All the documentation about getting involved with the Polyglots team is available on the make.wordpress.org website. They're now running a tool called translate.wordpress.org and this site is running Glotpress, that new plugin that I mentioned a little bit earlier. With this website, you can provide translations to WordPress core itself to the meta projects for WordPress. So all the other websites that are on WordPress.org are included here. As well as every theme and every plugin in the repository that has been internationalized. As a user, you can log into this site and provide translations for any of those projects. Helping to eventually make WordPress plugin theme ecosystem available in as many languages as possible. Not leaving that job up to individual authors who usually know one or maybe two languages. This really helps make it a global project and is as easy as logging into a website and typing in the translation if you know it which I think is pretty fantastic. So I encourage you, if you do know another language to start going in and contributing to your favorite projects to make WordPress better for everyone. That's it for me, thank you very much. Yes, my slides as well as links to all of the tools and plugins and everything and documents are all available on my website right now. And if you have any questions, please feel free to reach out. I'd be happy to help you out. Thank you very much and enjoy the rest of WordCat Miami. Does anyone have any questions? We have a few minutes. So the question was he was using Polylang and it manages one page at a time translation and he wanted just to have it like an on and off switch to be available in one language or the other. So are you saying that you wanted it so that some of your content was in one language, some were the other or that you were trying to build a website that was really just in a language other than English? Okay, so in that case you do have to you do have to go with a multilingual setup and you do have to manage them page by page. Just quickly translate everything. It is, as I said you don't want to use automatic translation so you do have to do the content on every side. Let's talk with the doctor I want to grab some other questions. So the question was is there a difference in the speed of your website between using some of the plugins that I spoke about or using WordPress multi-site? I believe WordPress multi-site for a large site would definitely be faster because it's not doing a whole pile of additional queries to look up the translations it's just running a WordPress site almost identically to a single installation. So, yeah, I would say WP multi-site would be the way to go for that. Most of my experience has been with WPML but they're for smaller websites with clients that didn't want to get into multi-site but if I was building anywhere performance was the serious concern I would go with multi-site. Can the what be different from each other story? So the question was if you're doing multi-lingual do they share the same theme and style and everything? Yes, they do. They are. Now, if you're using multi-site you could set up different themes for each of the sub-sites in a multi-site network that is an option available to you. With the plugins we spoke about it's a shared theme for all languages. So the question is with the URL structure either sub-domains or sub-folders what the impact is on Google's ranking of those sites. I'm not an SEO expert I couldn't tell you for sure what the impact is. My personal preference is I like the sub-folders. It's just easier than pointing someone at you have to go to this sub-domain just keeping it all in the one site I prefer that stylistically. So the question is how does Google know in its multi-lingual? What these plugins do is they add another tag in the code that says this page is in language X and Google will read that and it's not going to show a Spanish page on English Google if it knows that it's Spanish it's smart enough to make that association and there's also I know WPML does it it puts additional code into the page that says and there are translations available in these other languages so that any of the bots that are scanning the internet know that oh yeah this is a direct translation of this other page. So there's this comment made about a former version of QTranslate that apparently had a big bug that erased some tables in the database I'm not aware of that particular issue but I do know QTranslate X is being maintained by a different set of authors I think when I looked at it it was being used on something like 70,000 different websites now I would say it's very trustworthy I wouldn't worry about that yes so the question was asked one of my slides referenced that WPML was high on its the impact on the database and where that would come into to be a factor is with performance the way WPML works is every string back to the back to the database and look up that translation unless it's in the PO file system but there's a lot of other strings that you can just enter the translations through the WPML dashboard for example menu translations being a big one so I was working on a website that had I think five menus in the footer and then one big mega menu at the top of the page and for every menu item in there it was making a call back to the database to look up that translated string name so that's where I ended up with that home page that still had over 250 queries on it it was because it was going to look up all of those translations now you can mitigate that with caching solutions that would be one way around that but that's why I said WPML can be a bit harder on the database than some of the other options what's my favorite pick favorite I've had the most experience with WPML I think it is probably the most complete solution if you're looking for something that's all in one I think if I had my choice for a site that I was running myself I'd probably lean it really depends on what the project is different use cases different plugins are better for so I think all I can say is I have the most experience with WPML but I think all of the things I present today are valid options for doing a multilingual website and apparently we are out of time thank you very much everyone if you have any questions I'll be outside later