 It's not just about the words that you're going to use in your page content. It's also things like if you're having e-commerce website, currency is shown differently in different languages. In English, we say a dollar sign with a number, thousands are separated by commerce, and the dollars and cents are separated by a period. In French, the thousands are separated by a space, and the cents are separated by a comma, and the dollar sign comes after the number. I like using this example because if you look at the French value here, $1,234, there's a space between the one and the two. You can imagine that accidentally word wrapping and having the one on the end of one line and the two, three, four, five, six down on the next one. So you'd want to wrap that in CSS that makes it not break. It's one of the things you have to account for. Dates. Depending where you are in the world, we display dates differently. In the US, you use month, day, and then year. In Canada, we use day, month, and then year. In other places, we'll use the ISO standard, which is year, month, and day. So you want to think about how those are going to get displayed same with time. 4.30pm. In English, we separate with a colon between the hours and the minutes, and we use hey and we're here. In French, you use the 24-hour clock and divide the hours and the minutes with the letter H. Gender. While modern English grabbers essentially will be gender neutral, other languages do not share this trait. So when you're translating, other languages don't have gender neutral versions, and you're going to have to work on the translation specific to a user profile, things like that. There's a track ticket here. This was submitted during WordCamp, or discussed during WordCamp US this year in Nashville, about making changes to some WordPress 4 to support better use of gender neutral words in the localization process. Script direction. So in English, we read words starting from top of the page, from left to the right, going down each line of the go. And this is the same with any language that has its base in Latin-based languages. So English, Spanish, French, Greek, Latin, they're all left to right. But when you get into some languages like Arabic, Persian, Hebrew, Yiddish, Western, Punjabi, these languages are read from right to left. So you have to think about how you're going to lay out your theme to support that. Because not only is it the words, but it's the priority of things. The reason that we put our sidebars on the right-hand side is because when you're reading from right to left, what's on the right-hand side is the least important thing. Therefore, your sidebar. In your primary navigation menu, your most important menu item, like, for example, home, is located on the left-hand side, the first menu item. So if you're converting your site to support Hebrew, you're going to want to flip all of that around so that your sidebar is on the left, your most important menu items are on the right. So it's not just the placement of the words, it's the entire layout of the site. This is a an old version of the site. This was a Government of Canada website. But if you're doing business with Canada, you're going to be in the area of Jordan. Jordan is an Arabic country. And so, if we click on the language switching button, the second menu item from the left at the top, it flips over to the Arabic version of the site. You will notice that the sidebar that had been on the left in this case, the primary navigation menu, has now moved over to the right. And the main navigation bar at the top are the language switching options, the French and the Arabic button on the left-hand side. English and French are now on the right-hand side. So this template has everything entirely rearranged to support right-to-left languages. You also need to do a text length. So this was a real look in WordPress 3.9, I believe, that when you install the fresh WordPress install on the dashboard, there's a button here that says customize your site. Looks great in English. German words are much, much longer. So when you activate your site in German, this happened. The button went off the end into the text. So what we had to do and a little bit of humble bragging here, this was my first WordPress patch, was fixing this button so that it didn't over, right over the text and it was wrapped properly. This is very common. So when I'm working on French dates in Canada, I can assume that the French text is going to take up about 50% more space than the English text does. So that's something to consider when you're laying out buttons and forms and things like that, is that you need to allow for longer strings languages that have longer words. How do you want to have your URLs structured on your site? You might have example.com forward slash question mark lane equals and the language though. You might have each language in its own folder. You might have it as a subdomain, so jp.example.com for the Japanese version of example.com. Or you might have entirely separate domain names mywebsite.com versus mostcweb.com being pointing to the same WordPress inspiration but in two different languages. These are all valid options. It just depends, really, which one of your preferences. How do you want to switch languages between websites? Do you want to include a language switcher like this one shown here that has the names of languages with the flags? Do you want to maybe put that in a drop-down menu instead? Do you want to include the flags at all, you know, even just a visual thing? And in fact, that's one of the considerations we use a lot in Canada because the French flag for French that's flag of France. So we don't want to use that for Canadian French. So a lot of times we'll just remove the flags entirely and just have the language names listed. Do you want to put in your language or in the widget area? You might maybe decide that when you go to your domain name you get a page and you choose which language you want to start with. So what's your default language going to be then? What if you're looking at a post on your site that you don't have a translation for? What happens when you hit that language switcher? You don't want it to go to a 404 page. So do you just remove the language switcher? Do you just send them to the homepage in the other language? You have to decide what to do in that case if you're not going to be translating absolutely everything. Query string parameters. Query string parameters are everything that goes after the question mark in the URL that might modify how the pages display. Some of those parameters might need to be translated as well. Some of them that control site behavior may do the same regardless of what language you're looking at. So you have to consider what's going to happen with those if you're developing a plugin for it. So those are general considerations that you need to think about with mostly go-ups. For example WordPress, another CMS or even creating static pages. But now let's look at WordPress itself. So WordPress and these stats are up to date as of this morning I checked WordPress is now available in 179 different locales. That shocked me. Last time I gave this talk was in December and it was 110 locales at that time. Last, the multi-lingual support in WordPress is broken. There's 56 of those translations are 100% up to date with the latest version of WordPress. The other locales between 57 and 179 are in various states of being complete as the volunteer translators get time to update all of those strings. One good thing to note is that 51.918% of WordPress sites installed now are using language other than U.S. English. So this is not a fringe topic when you're looking at WordPress on a global scale. There are more non-English sites than there are English. So when you install WordPress you see a drop-down like this. This is where you pick from those 179 locales. It tells you which one you're going to install. This is what your dashboard is going to show. This is what the theme is going to show is going to be in one of these languages. So although WordPress supports these 179 locales now that's all about the WordPress structure and the site but it doesn't allow you to actually enter the content in more than one language. For that there's a couple of different approaches that we can look at. The first approach we're going to explore are multi-lingual plugins. And there are a couple of options for these plugins that will help us actually create our content in multiple languages The first one is called WPML. And this is a premium plugin that's created by a company called Amigo Systems. It supports translating of your pages, your posts, your custom post types, your taxonomies, your manual items, the text in your themes and the text in your plugins. You can manage all of that right through the dashboard. It also provides you services to help hook up to third-party translation services that we'll look at later. WPML is the plugin that I personally use most often because it supports a wide range of features and it's quite a mature product so this is the one that I tend to use. So when you're using WPML this is the list of pages on my site and you will see right now I'm looking at the Hindi versions. Along the top you'll see each language installed on this site. You'll see the page title here and then you'll see buttons that allow you to edit the translations in the other languages. Or if there's a plus sign it means there is no translation available for that page in that locale and you can click on plus to start the translation. When you're in the post editor it looks almost identical to the regular post editor except in the sidebar you're going to have a new language section and this says that I'm editing a French Canadian version of a page called Terms of Use Agreement and so I can now go and modify all this text separately from the English version but it knows that they're linked which allows the language to kick in and drop back and forth between the same content just in the curriculum palette. Now when you're using WPML what it does is actually creates a separate post ID. So if you're looking in the WP Posts table in your database there is a separate entry for every locale, for every post. So that's how it's doing its navigation back and forth and therefore using the default post editor because it is really just its own post. WPML allows you to choose your URL format like we were talking about earlier. You can pick whether you want from different directories, different domains whether you want to pass it as an argument in the query screen so you can set that up right from the plugin. You can choose which custom post types you want to translate. So there are reasons why you would not want to translate a post type. Obviously your pages, your blog posts those make sense to translate. If you're running WooCommerce your orders are a post type. But you don't want to translate, you don't have the same order translated into multiple languages. An order is a thing regardless of language. So you would turn off translations for your orders. Same with taxonomies. You can choose which taxonomies should be translated along the site and which ones are not. When you are modifying your taxonomies this is the modified taxonomy editor that allows you to enter the translation. So saying this term in English is this word in French. So it can make that association again. So for example your post categories it knows which ones are which. If you are using WPML a little tip I have is there is a setting in the plugin settings called Make Themes Work Multilingual and what this does is it takes, remember a few minutes ago that it creates a separate post ID for every locale. So if you were working in your CSS or working on your theme and you had a selector that was for a specific post ID you would have to manage every variation of that. It doesn't make your theme very maintainable. The feature of adjusting IDs goes in and adjusts the post ID that is displayed in the HTML to be the same as the original post for all the locale. Really handy if you need it. However it's also very compute intensive to do that. I was working on a site and the home page I was doing a performance on it. It was doing 750 some queries against the database to load the home page. It's a ridiculous amount of load against the database for loading one page. I turned off this feature because they didn't need it and it reduced the number of queries down to about 250. Because it's doing those post IDs on every menu item on the post itself. It ends up saving you a lot of computing from turning off that feature. Another plugin we're going to look at is QTranslate X. It supports pages and posts and has some post pages and tags on them using menus and your settings and your widgets. This is a free plugin. So you don't have to pay for it. When you are working in the post editor instead of having those columns with the pencils and the plus icon you just have a language switcher that shows the slides that pop and when you click on any of those it changes the list that you're seeing to be the language that you think. The post editor works a little differently in that above the title and down by the custom fields and down by the meta boxes you have those language switchers again. So you can click on those languages and on the fly it will change the content of those meta boxes or of the title box to show you that content in that language. So unlike WPML the way QTranslate X works is it is using the same post and it's using hidden short codes to separate every locap. So if I were to disable this plugin and look at post content you would see a short code for whatever the short code is to start in a language for English and you can see all the content. You can see another short code with all the French another short code with all the Spanish same thing in the title, same thing in meta boxes so if you turn this plugin off you end up with short codes but it does make the editing experience nice in that you're staying within one screen and just toggling which language you want to view as you edit. So here's the example of what it looks like if I turn that plugin off after working with the site it has every translation lumped into the same post just separated by short codes. Here's what the widget editor looks like with QTranslate X So again you have the flags at the top pick which language you want and on the fly it changes the content to that widget area so you can modify it in that language. The menu editor, again same thing pick which language you want work on your menu layout In WPML you create separate menus and then you associate them to the locality you want QTranslate X also supports URL modification so choose which URL structure you want and it also supports general settings so if you go in WPML settings in general your site name and your tagline are things that you would want to be able to translate so it puts in those same language and you can go and name your site in each language change your tagline another free plugin and they also have a pro version as well this also supports your media library Polylang supports tags on these menus and widgets so more like the WPML style Polylang gives you the different languages and the editor buttons as columns in the page list and in the editor it shows you the available translations for that post it does treat every post as a separate post id so it doesn't rely on short codes so you can translate X use your tags on the editor so you can put in your translations in the different languages for the different terms same with the menu editor so you would create your menu now this is using the 2017 theme and the theme usually would have two menus and a social links menu and what this has done now is taken every language that you have installed at your site have a locale and duplicated those menus in every one of those languages so when you create a menu you can then attach it to the right menu location in the right locale or locale if all your wording was the same and the locale was the same you could attach the same one that would be really useful for any social media links menu where you might point to the same social media this is the language settings where you can have locales name them choose the text direction which flag you're going to associate with each language and which order you want those languages to appear in in your language selected and there's also a screen translator so this is where you can do it to modify your site name and your tag line the date formats that you're going to use they just do this in this table format that you have installed and every screen that's available you can just go through and modify the settings finally this is a this is a polylang you have the url format as well for picking how you want WordPress to link the url you can also choose your synchronization settings this is how polylang is managed so there are certain fields that when you are duplicating a post working on a translation of it for example, taxonomies because this is treating every post as a separate every locale as a separate post if you go and add your English post to a category that's called wordcamps you want it to take the French version of that post and also add it to the French equivalent of the wordcamps category you don't want to have to modify each one of the separate same thing maybe with your featured image you want the same image to be synchronized with all versions that image doesn't have words in it because then you would have to do those separately choosing the page template would be another great example you're not going to use different templates for different locales we'll use the same one but you want to if you change that template you want to change across all versions so that's what the synchronization setting is in polylang you can choose depending on your use case what you need to synchronize and what you don't this is just an example of their own language switcher we have the operating hand corner of the two languages so that covers the most legal plugins there are others out there and there's one that I recently that I've yet to investigate and see how they work with the ones that we've just gone through the WPML, QTranslate X and Polylang have been around for a while they're well established plugins and there's lots of support for them the other way of doing this is to use WordPress multi-site that's a perfectly fine approach doing multiple languages on the website and there's two ways you can do this you can install a separate version of WordPress for every local and just build separate sites and link them all together that would seem a little messy for me but it would work the other way is to use WordPress multi-site with a sub-site for each language so this is the the main WordPress install the network and we have sub-sites for each language how many of you here have used WordPress multi-site? so WordPress multi-site allows you to have a single WordPress install but then have sub-sites in those sites that share the same plugins share the same user accounts and you can just tweak the permissions and things like that but what it allows is that you can use every site in the network and in a similar way look at WordPress.com is essentially a massive multi-site network because you can log in with one set of credentials and have multiple sites that you're managing within that network so there's two plugins that I've played with the multi-site language switcher or multilingual press which are plugins that allow you to link back and forth between translations in a multi-site network you know, post-ID 20 in site one is the same as post-ID 43 in site two and allow you to switch back and forth between those so looking at the different ways that we've done WPunality Translate, Volodyne and multi-site I have this comparison chart which is in my slides which I'll share the link with later but it's kind of a little cheat sheet for the pros and cons of each one so that's why I'm translating all of your content in site B they allow you to switch back and forth and allow the post-ID to work in these different languages but you also have to think about your themes and your plugin translation so in order for plugins to work in multiple languages they have to be internationalized and this goes, this is the theme that I'm playing WordPress provides functions to retrieve these strings in the right look app so if you're theme designers or plugin developers for example, this little clip of HTML would just print out the words this is my string in a paragraph so instead of doing that in a multilingual approach you would have to wrap this is my string in the escape HTML function as in the text domain this allows when PHP renders this page to say, oh, this is the string that is translatable I now need to go look this up find the translation for it and return that in the language that we're requesting right now so instead of just spitting up static text it's actually now rendering this through the PHP engine to go and find the translation and there are a whole pile of functions to do this kind of thing in JavaScript for example you use the WP localized script function to pass in an array of all your translated strings and then in the JavaScript code you reference that object and that string key to display the text you want so here I'm passing in a translation array of some string saying it's some string to be translated localizing it and queuing it and then in the JavaScript I can reference object named on some string and it would display some string to be translated in whichever of the current languages we're doing and we're having to write separate JavaScript through those with our language there is a whole pile of documentation if you are a developer or a theme designer on how that internationalization process works in the WordPress developer's handbook so I'll look it there now actually creating the translations for all of these strings and your themes in your language these are banned by a set of files this is using the getText translation system which consists of POT files which are your templates PO files which are the localized version of all the text that's found in that template into each specific locale so you would have a PO file for each locale and animal files which are machine object files those are compiled versions of the PO files which are run faster many popular themes and plugins come with the translations already provided and if not you can manage your own translations in third-party applications POEdit is the third-party application that I like to use when managing translations it's a premium product available for Windows, Mac OS X and Linux and when you open up your template file it lists all the strings that are found and then you can go in and enter your translations and save that as a new PO file and drop that into your plugin where you're keen for when you get the pro version of POEdit it also gives you some interesting things like statistics so how many words there are in that template that need translation this is really useful because if you're working with professional translators they're usually charged by the word so you can use this to guess how much your build is going to be before you ask them to do the work the other great thing about the pro version is it will read a WordPress plugin or theme and make a POT template file out of it so you don't have to create that file yourself now, content translation so we've talked about themes for plugins by actually writing WordPress admin to manage your posts but what about actually writing these words there's my one request please stop using automatic translation Google Translate is not your friend it's pretty good at giving you here's what this word is in another language but when it gets down to doing here's a sentence here's an entire blog post it makes pretty good mess of things if you ever want to test that open up Google Translate put in a sentence or two in English translate it to another language and then translate it back you are not going to get your original phrase back it can create quite a mess of things so what you want to do is work with professional translators as I said earlier they usually try to find the word but they are not only experts in translating to that language but they may be an expert in a specific local where you want someone who knows a specific variant of English or Spanish or French and they may also be a subject matter expert in your field if you're writing about website development you probably want a translator who understands the terms that we use on a day-to-day basis and what those terms are in that web app you can get to the point where there are the official words that are used for certain terms but that nobody actually uses in day-to-day life you want your translator to be able to know the difference and pick the right terms that they are going to use in that trend one tip when hiring a professional translator I like to use the same translator again and again if I'm working on a project over a long period of time find a translator you work well with and keep using them because their choice in words that they use or their writing style you want that to be consistent throughout your website if you start changing translators you're going to start seeing one word used here for something and another word used for the same thing in a newer part of the site WPML has built in a service called I Can Localize and Polylang uses a service called Lingotin to hold to a similar thing in that when you've finished writing and changed your post you can say this is ready for translation and it will submit your post through your I Can Localize or your Lingotin account to your translator so that they know there's content ready to be translated they'll automatically do the translation for you, this is a real person on a machine and when they're done translating that translated content goes right back into your WordPress dashboard for you to approve and then post through so it's really streamline that process of writing a post and getting translated into multiple locales the last thing I wanted to say was contributing as I said WordPress has found 179 different locales how did that happen? well just like every other piece of the WordPress ecosystem whether it's core development, themes, plugins, documentation work camp speaking it's all done by volunteers and the WordPress translation is done by a team called the calling team and their job is to ensure that as all these new versions of WordPress come out with new features and changes that all the strings that appear in every screen are translated into the 179 different locales you end up with different roles within that community whether you are just entered at a string in a certain language because you've spotted the state whether you're an improved editor for a specific language or maybe you've just been approved as a string translator for an individual plugin because you're working for the company that developed that plugin those are all roles that are available in the calling box team this is a photo of just a few of that team working at Europe at their contributor day in 2016 I say these are just a few of them because there are currently 544 global translation members 2,384 plugin translator plugin translation members and 23,099 contributors to the translation team so those 23,000 plus people have maybe just submitted a fix to one string in a certain language but that is a massive number of people helping make WordPress available in all of these different languages and you can do one of them looking at Glotpress this is a program developed by the WordPress community it's available at translate.wordpress.org and it allows you to pick any version of WordPress any theme that is in the WordPress repository any plugin WordPress repository the WordPress meta sites WordPress.org the WordCamp website any of those as well as the apps so the official WordPress apps to manage your site with and you can go to any of these sites and help translate those right through the website so you don't need PoEdit you don't need to know the PoT files working on that you can submit translation suggestions right through this website for any plugin available then if you are a theme author or a theme author you can then sign up to say this is my plugin and you can then go and take all of those translations provided by the community and use them as part of your plugin thank you very much I hope this talk is giving you some insight and how to create your website in WordPress I will put these slides on my website at www.shonhooper.ca and I'm available for any questions so I think we've got a couple minutes for questions right now so I know that you don't represent the plugin makers from early on in my talk but I have a list of questions I'm not going to ask all of them because that would be weird can I override the flags in any of those plugins so that I'm showing language codes instead of flags I think in most of those cases those flags are shown as CSS background images so you can override those in CSS one of the plugins I also believe you can pick the flag from the media library so I don't have to necessarily hack the plugin no you can probably do a CSS override in most cases I know I have clients if I showed them a a Brazilian if I showed them a Portuguese flag it's probably on Canada using the France flag you probably don't like being stabbed either and then I have but this one I do want to know you didn't talk about inline my different languages inline in the code and that might not have been within the scope of your talk which is totally fine but are there tools out there to make it easier for authors who are writing in one language to switch in the middle of their page so for example if you wanted to quote that was in another language in that case really you're looking at going into the post editor and the HTML and wrapping that block in any HTML block you can do a lang equals and that way screen readers and things like that will know to pronounce the words in those inline strings which is the technique I have to use but if there is a plugin where my authors could just say no this section is now French and they just click the button not that I'm aware of however my brain is going this is a perfect this is a plugin for Gutenberg blocks so with Gutenberg coming out I can very well see a text block being created that would have a language drop down that would allow you to say this is not the default language and pick your appropriate language that would be an interesting approach to doing that haven't tried it it's a good thought to have I agree the plugins don't support it but that is one of those cases where you have to figure out even in your they probably only do the inline language switching in your language switcher so that it would know how to read the code and it knows but for the post-content you'd be back to doing it again any other questions? I started my blog in English I had a number of followers requesting translate impressions so I ended up trying to put it online my problem was that my followers emailed four times for four different language translations every time I had a new translation they emailed again and posted this is a fully live problem I switched to WTML identical problem works with WTML people they investigated pretty much everything it's not their problem it was problem-resistant because I have a big problem so they're being emailed are you using Jetpack what's sending out these notifications? I have Jetpack and I don't know whether there is a promotional tool by default every time there is a new post because it is reported as a new post by the translation how about it? Jetpack does have a feature that sends out those notifications so that could definitely be the source of this and if you're using plugins for WTML that stores every translation as a separate post ID I could see why that's happening so you might have to that would really be the situation depending on the combination of plugins and stuff that you're using but the other thing there is you would want your subscribers to actually be signing up to a specific language because even the text around the subject line of that email that you get you would want it to be in the right language most of my subscribers are English speakers but they have family members or friends that speak another language and they would be interested in the specific post but most of them are non-safety so whoever finds it appropriately would forward it to the post so in that case I would probably and there again very plug independent but I would look at filtering the notifications that you send in so that it only sends them out on one local account I can't do that I'm on .com and I can't afford it so right now I have access to these yeah and so right now I don't have a great solution and there again we can figure something out for sure on .org .com I don't know of a solution for that plug it in and support that we have two people from automatic here who are actually working on support at .com Kristi and Sam so you can go to the registration table that's enough thank you thank you much I'm paying attention to accessibility I'm building a site that's quite available which is French are there any tips about accessibility maybe maybe WPML is finding what we used by language already but I hadn't thought about it until I saw the accessibility talk this afternoon so you would want the language switcher to be somewhere in your navigation menu so it would be findable when you are reading your headers you can find the navigation section so that you can find those if you were using just the flags and not putting the words in the languages you would want to make sure that the alt text on the flag was there it should be a plugin that should be handled on that but that would be a good consideration for accessibility yeah that's true I'm using flags that are four times bigger than usual flags and for the English flag I have Happy, Jack and Heather the American flag too sliced up to a good extent so the question is what is the alt text for that image if you're on a screen reader other than that everything that we talk about all the elements on the page all the theme layers should all be the same it's really that language switcher that is one of the triggers in my life something we want to offer that's a good question the other good comment I wanted to make was I was pleasantly surprised why I stole the WooCommerce recently and WPML supplies a blue plugin for the currency switcher which is really cool because it solved that problem right over at that it's one of the things I like with WPML I generally don't care to promote paid plugins I don't work for all of the PlayWooCommerce where those things are going how am I going to handle it they've already bought it that's why I like using WPML ok well we've got a couple minutes left until the next talk starts so we can do a stretch and one more session to go thank you very much again for coming