On today’s episode we are going to talk about how to translate WordPress themes and plugins right here on Your Website Engineer Podcast Episode number 283.

Hello everybody. Welcome back to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler and today is the 283rd episode of the Your Website Engineer Podcast. I’m saying that today because I have officially reached as of last week the one million download mark. It was very, very, close last week and now I’ve surpassed it. It’s one million, 1000, some hundred and you know, some odd number of downloads and listens to each and every episode. I did a little calculation and it turns out that that’s like thousands of hours of people listening to my voice and I just wanna say from the bottom of my heart, I appreciate it. Thank you so much for tuning in each week or just listening to episodes when you find topics that are interesting to you.

Whatever the case may be, my goal is just to inspire you to create a high quality website for yourself. Create a great resource for you or your company or your personal blog or whatever that is. And I’m just trying to be a voice of WordPress and do a little research. Figure out what’s going on in the community and what’s going on in the space and then just bring that to you on a weekly basis. And so today, we’re gonna continue the streak of 283 episodes in a row. In just a few minutes we’ll talk about how to translate WordPress themes and plugins.

Another thing I wanna let you know about, and this is another thing that almost happened by last week was WordPress 4.5.1 actually came out. I know that last week I said it’s almost ready to come out. Well, it came out. It has fixed 12 bugs and basically one of the biggest ones was a class issue that was breaking things on the 2011 theme and some incompatibilities with Chrome and some other things. So if you’ve got WordPress 4.5 installed, be sure to update that to the point release and in most cases, your sites have automatically done that for you already to WordPress 4.5.1.

Another thing that I wanna talk about in the news is there is a WordPress premium themes company called Templatic. They were hacked recently and they basically – it sounds like from the founder of Templatic that the data is being held for ransom. So they hacked into the system to get usernames and passwords and stuff like that to get into the internal workings of the company and they’re holding it for ransom. And so they’re not going to submit to the ransom but if you have ever purchased anything from them or shared any credentials like CPanel or FDP or WPadmin login information or anything like that while they’re trying to troubleshoot or help you with some sort of customer support, be sure to change that immediately. And it also says the customer should be advised to ignore emails sent from Templatic because it will be – it can be the people that have hacked it and taken all that data and contact. So just think about that if you’ve used them in any way, shape or form. This is one of the first things in the news that I’ve seen recently or even at all that a theme company has been hacked and all of the user’s data that has been purchased has been compromised. So that is something to keep in consideration if you use a theme from Templatic.

Okay, is there a plugin for that? Yes. There’s always a plugin for that. There’s more than 44,000 free plugins in the WordPress repository. It’s hard to find the perfect one. But today we’re going to be talking about a plugin called Simple Cache. And this is one of many caching plugins that’s out there. It’s very simple to make your site run lightning fast with caching. And I mean, one of the biggest frustrations about using a caching plugin is the configuration in the setup. You have to go through all of these different pages and what do you want to cache and what don’t you wanna cache and it just is kind of a hassle.

Simple Cache promises to do the following. They promise to be extremely simple with one-click installation. There is an on or off switch. That’s it. No reason to wade through different complicated setting. It makes your site run very fast so you can handle lots of traffic. It’s easy to delete. If you don’t like the plugin you just remove it and your website won’t break. And if you ever need to clear the cache there’s a button to do that. You can enable gzip compression which will help to make your files download faster and download into web browsers faster and it looks really cool. It looks like it’s a great plugin. It doesn’t have a lot active installs. It’s just created a few days ago. It’s got 400 plus active installs. But the plugin developer has 14 plugins that he’s created and released on the WordPress repository.

So if you are just frustrated with using W3 Total Cache or Super Cache, then go ahead and check out Simple Cache. That is another one that you can check out. It’s in the WordPress repository but you can also find it in the Show Notes for Episode number 283.

Okay, so today I wanted to just dive in and talk a little about WordPress themes and plugins and how to translate them, how to make your plugins and your themes translatable and this topic is probably gonna be a little more geared towards developers or people who are working on creating either plugins or themes for the WordPress Repository or even for your own clients. And it’s just a great discussion because I’ve seen this happen a lot and I guess I never really thought through and why would you wanna translate WordPress? I only ever use WordPress in English but the case is when I do a lot of support on WooCommerce, even though I’m speaking back and forth with people in English, a lot of times their sites have been set up to have some sort of different language as their default language, whether that be French or Spanish or English or German or whatever the case may be. And I log into those site and it’s interesting to see that all of the WordPress dashboard menu items are translated in those languages and so it doesn’t say “appearance” it says whatever in those different languages.

But then it’s interesting to note that a lot of the plugins will still be in the native English tongue because that’s probably how they were developed. Because that means that they weren’t able to be translated and so it just makes this disjointed experience for people who do not speak English as their native tongue and they have to have some of their menu items in French and some of them are in English. So I thought I would just expand on this and just do a little research for myself. I actually am going to be taking all of this into consideration. The whole show that we’re talking about today, I’m actually going to be doing it for the plugin that I created a few years ago called, As Heard On. I was just making some updates to it the other day and I’m like huh, I wonder what it takes to translate this. And now I’m learning a little bit. I found a great article over on WPMUDeve.org and so we’re gonna be running over some of that and just give you a high-level overview. Of course I’ll link to this post in the Show Notes and kind of highlight and take the big pieces from it and whatnot. But basically we just want to kind of wrap our heads around how it works and then we can slowly take our time and start implementing these changes and make our text translatable.

When I say “make our text translatable,” these are mainly just like all of the text that’s displayed on the front end or inside the dashboard of WordPress. So like for example, things like Jetpack. I’m gonna just take that plugin for example. Like Jetpack, there’s different settings that appear inside the dashboard and all of that should be able to be translated. Now, we’ll talk a little bit about how you can actually translate once all the strings are translatable but the big thing is to make sure they’re wrapped in a special nomenclature so that if somebody wants to go in and create their own language for their own native tongue, then they can do that.

The cool part is; say I have everything translatable for assert on my plugin and then somebody says oh, here’s all the strings translated into Spanish. Then what I can do is I can add that file inside the plugin itself. And then when somebody switches inside the WordPress settings and then underneath the general setting, when they change their language from English to Spanish, then every string that has been translated into Spanish will automatically just work. Which is really neat. It’s a cool concept that all you have to do is make it easily accessible for – add this functionality, which we’ll talk about, I promise. And then it allows people to easily to in and they can generate what’s called an MO file which is a file and we’ll talk about that in a second. But it basically allows you to easily translate the entire contents of your theme or your plugin.

Alright, so let’s cut to the chase and talk about how to internationalize a plugin. And I apologize that this is going to be a much – it’s a visual topic or it makes a lot more sense when you visually look at this so I’m gonna try my best to kind of figure out what I’m gonna say and do a high-level overview so you can just kind of grasp the concept. But to internationalize a plugin means that you’re basically – you’re making it ready for translations and you’re wrapping translatable strings into special functions which we can use later to load and auto-load the correct translations.

So there’s handful of different functions that we can do but for our example today, we’re going to use the function underscore, underscore, open parentheses, close parentheses. So it’s underscore, underscore parentheses, parentheses. And it basically takes two arguments. It takes a text to translate and the text domain. And so what that means is that any time that you have text that’s going to appear on the dashboard, then what you want to do is you will put that – you’ll do underscore, underscore, open parentheses and then we’ll do a single quote and we’ll say; hello there and then we’ll do single quote to close and then a comma and then it takes the second argument which is a text domain. And so that’s basically like the same domain as what your URL is for the WordPress plugin section.

So for example, the “As Heard On” plugin is As-Heard-on and so after I would do “Hello World,” I would do comma and then inside of single quotes again I would do As-Heard-On and I’ll get to the reason why we do that in just a second.

So that basically is the function. We just wrap all of our text that needs to be done. So in theory, to make your plugin translatable is very simple. All you have to do is add that nomenclature around each piece of text and you’re done. Granted, there’s more than that but that means that now your text is translatable and so the function means that if there is a translation for that string it will return that. If not, it will just return the normal text that’s there. And so it uses the current language that was set in the WordPress dashboards to determine the needed translation. So if you want to – you change the words to the Spanish location, then it’s going to change to Spanish. If the Spanish translation file is inside the plugin, then it will translate into those files as well.

So the text domain, the part that is; As-Heard-On, is the final missing piece of the puzzle and this is basically a way to group translations that belong together. So the theme that you’re running will have its own text domain, your plugins will have its text domain and it just makes it easy to differentiate between what – it just makes it easy to keep them separate so you know what translations are for what plugin or what theme.

Okay, so now we have to implement translations. Like what do we do to actually – we’re ready for translations, now we have to do something. We won’t see any translations anywhere on our site because we haven’t actually translated anything. Now we have to tell WordPress where our translations for our plugins reside. There’s a standard lang directory within our plugin; so that’s l-a-n-g, and so you can create that and then there’s a bit of code that you can do that basically says when your plugin loads, use this function to load the translation files. So that’s basically all it is. It’s nothing really too standard. There’s just four lines of code that you actually have to do that. And that’s going to let the plugin know that hey, we have a translation file somewhere in the plugin directory that you can go and load depending on what language is selected for your website. So that’s all WordPress-driven. There’s no really – you can copy and paste this code to use it on your website.

So once we’ve got that set up, now we have to actually create the translation. So there’s a number of ways do this. The end result will always be that we have two files and one is called the PO file and one is an MO file. So a PO file is a human -readable translation file so you can open it in any text editor and you can work through it and that’s where we’re gonna put all of our translations. And then the other one is called an MO file and this is the same file but it’s just been converted to be machine readable. So it’s just really crunching out a bunch of the spaces, compressing a lot of things, it’s unreadable. It’s what WordPress uses though, to generate the translation file so that everything can be translated inside of your site.

Inside this PO file, there’s some standard boilerplate stuff that goes to the top. Kind of like the header of a CSS file to display the theme information or the information that goes to the top of plugin file. So we’ve got some standard stuff there but then basically what we do is we go in and we start translating our different strings. And it usually follows this template of three lines. The first line highlights what line of code this text is on. The second line is what the English translation is or the English word, like hello. And then the next line is the translation. And so in this case, it would be hola if we were going to Spanish. And so for every line of text, you have these three lines of code. And the lines are there mainly just to give reference for people so they can go in and take a look if you’re translating this for a different language so you can kind of go in and see the context behind this string. So you don’t necessarily have to keep those line items updated every single time you make an update to the post or to your plugin or your theme. But it’s kind of a general reference point of; here’s where you can go find this text in your code.

So that’s the hard way to do it. You basically will open up a document, you’ll start documenting where all the translatable text is and then you’ll be looking at that window next to your code and kind of going from there.

Another way you can do it is there’s a free program called PO Edit, and you can basically go in there and fill in the boilerplate documentation on the very beginning and then you give it a path. You know, it’s a program that you download to your computer and then it will go in and it will generate this file for you which is really nice. And then once you do that it just goes in and it does all of the work for you so I highly recommend working on that and using this program. And then once it’s got all the strings it goes in, it scans for them and then it gives you a nice UI interface that you can go and you can actually translate the text. Plus, it gives you the ability, if the text is already translated somewhere, that PO Edit will automatically just pull that information in as well which is super nice.

Once we’re happy with the translation, we’ve got the PO files all set, we’re ready to go, now we have to package this up into a dot MO file. And that dot MO file can actually be generated right inside of the PO Edit program. And what we do is once we save it, it’s going to save it as the text default. Which isn’t helpful whatsoever. We need to be able to tell WordPress what languages is inside of this file so that in knows how to go and get it and go fetch it.

So for example if we’re using the, As-Heard-On plugin, we’re gonna name this file “As-Heard-On”. You’re gonna use the slug of the plug in or the slug of the theme and then you’re gonna say dash and then we’re gonna use two-letter country code and language code to translate. So an example is; Hungarian is hu_hu. And there’s different countries – there’s different countries that have different dialects or different languages, then you’ll make reference inside this name of the plugin. I’ll have a link highlighting where you can find this information so if you’re translating to a different country, you know how to rename this file.

Alright, so that’s going to be a wrap. Thanks for sticking with me. Thanks for trying to listen through this mumbo jumbo of me talking some code and talking how to name files in these things. Honestly, I’ve been putting this show off for a while because I didn’t know how well I could record it via audio and I didn’t fully understand it myself. And so I’m learning more and more. But the main concept here I guess is; 1) that if plugins and themes are written correctly, then then can be easily translated into native tongues of people that are not using English as their main setting. And I think – I don’t know what the statistic is but only a very small percentage of people are using English as their native language on the WordPress dashboard. So we wanna make sure – it’s almost like making our sites accessible and easy for people that may be using screen readers or different ways to consume the front end of our website. This is going to make it that much easier for people to navigate around the backend of the dashboard side of thing.

And so the overall concept is, let’s go in and any text string that we’re displaying somewhere on our website, let’s wrap them in the underscore, underscore, parentheses tags, and then that way, that’s the first step in getting our plugins and our themes translated for WordPress to make that experience that much better.

So I know that I’ve got some work to do. I’ve got a little bit more for me to really understand and figure out how this works and be sure to check out the Show Notes for this episode because I’ll link to this post from WPNU.org. They do a great job of highlighting it and you’ll be able to really see how things work with visual concepts. I’ll pull it in and make some examples on the Show Notes page for this episode as well. But that’s what I want to share with you and let’s start translating our themes and plugins.

We’ll talk to you next week. Take care. Bye-bye.