Creating a Multilingual Website with Thesis

A member asked how to create a multilingual website using WordPress and Thesis. He wants the site to be a single site rather than several linked sites or a Multi Site installation. We discuss how to organize a multilingual site and then look at code that creates custom post meta that allows the administrator to identify the language for each post and page and provides links for each of the corresponding language pages. We also look at the language switching function. Look for an extended blog post on the subject in the not too distant future.

Video Transcript

Rick: Okay so now, Allen asks, “I have a project that requires the same static content in various languages. I would like the Navigation menu and the content to be in the language the visitor selects.” So Allen, I’m going to unmute you. Can you chime in here? I’ve unmuted your microphone, it might be that you don’t have a microphone and if that’s the case, that’s okay. But if you do have a microphone, please feel free to jump in here now.

Allen: Okay well, I’m just going to assume for a moment. I’m going to leave your microphone unmuted so if you can say hello, feel free. But I’m going to show you a couple of things here.

Rick: First off, I actually worked on a site just recently like this and I just got hired today to do another something similar to this. So I’m going to show you one version of how to do this. I heard a funny noise in the background there. Does that mean you’re with us, Allen?

Allen: I plugged my mic in.

Rick: Oh, perfect. Okay so how many different languages do you have?

Allen: 7.

Rick: And you want to keep each of the…anyone… all of these within the same website?

Allen: Yeah, ideally.

Rick: Okay. So that’s how this website here is done. This website is a members’ website, her name is Catherine Darr and she’s in Switzerland. And her principal… the principal language of this site is French. So you know, if you don’t switch to English, all of these different pages take you to French versions of the site. And then if you… oh look at that. That’s interesting. For some reason or another, this page doesn’t actually have that navigation. I wonder how I did that. Or did I just entirely lose all that navigation? What the heck. Oh, I did. For some reason or another…

Allen: It showed up on the initial page.

Rick: Yeah, it showed up but then it stopped showing up. I think maybe my… let’s assume this browser is flipping out for a second and let’s go back to Chrome which turns out, wasn’t flipping out after all. Anyway, the way this site is laid out is it has a French navigation bar and an English navigation bar. It has French pages and English pages and these little flags flip you back and forth between those pages. So now we’re at the English homepage which is where we were and if you go to the Public Relations page for example in English, here it is in English and we can click on François and it takes us to the exact French counterpart. So it doesn’t just take you to the homepage. It takes you to the French version of that page. If you select English, it takes you to the English page. And what I wanted to show you up here is that the English version has the English designation in front of it in the URL. So all of the English pages have EN services. All of the French pages don’t have that. We chose… because French was the principal language of the site, we chose not to put FR in front of it. But any other subsequent languages would have this as well. So is that what you’re looking for?

Allen: Okay. Exactly.

Rick: Okay so then I’m going to show you the code and talk to you about the code that I used for this. And because we have a variety of bits of code here… let’s see, let’s open that file. It’s not a particularly difficult code by the way. It’s actually you know, pretty simple but let’s see… My Computer. So maybe it’s my My Computer that’s flipping out here, I guess. That must be what it is. Nothing I can do about that now. Okay so go to websites and then… and custom functions php. Actually, we’re also going to open tailoring meta boxes. Now you know, I just went through this little description or this to show how to create those meta boxes using Verve meta boxes. I don’t actually use that on sites when I program. I actually just create the meta boxes from scratch and that’s what’s going on here and in this file. This file creates the meta boxes so we have a prefix for the meta boxes and then you know, I’ve got a meta box where you select the language for the post or the page and also where you insert the post id for the corresponding languages page. So if you had 7 of these or 7 languages, what you’d have is 6 post ids for the corresponding page and you’d put your you know, French one here, English one here, Mexican one here or Spanish one here… you know, Catalan one here… whatever the other languages are. You would put the post id that corresponds to that in the meta box for each of these. And that’s the data that the flags interrogate, right? So back in this case, this little flag here…

Back up one second.

Rick: Sure.

Allen: I just need to be clear on what a meta box is because I seem to have missed that detail.

Rick: Well, let’s see if I can still log in to her site. You know, I don’t think I can anymore actually. Oh no, I do. I set up my own… I did. I set up my own log in for it so I don’t think she’ll mind if I use this.

Allen: Alright.

Rick: Okay so if we take a look at a page, now let’s change this green options so I can see lots of them under pages. I hate navigating through lists of pages so I just make this really long. That way, I can scroll down through all kinds of them. And so, if we look at… well, okay. We’ll look at the English version of this page here. So we’ll look, we’ll just go to Edit this. This is the meta box, this thing right here. And in that meta box, I gave her the choice of either English or French. So you set the language for this page and then you put the post id in for the corresponding page and if you had 7 different languages then you would have 6 boxes to fill out. You’ve got post id for French, post id for English, and so on and so forth if you use this system. So that’s what a meta box is. You know this Thesis SEO details and additional style, that is a meta box.

Allen: Oh okay.

Rick: And so Verve meta boxes was the plugin that we just installed in the last you know, 15 minutes ago that created this meta box system for the library website. So if we went to the catalog and we looked at one of the pages in the catalog, we created this meta box using that plugin that has these fields in it. And so you could do the same thing. Use Verve meta boxes to create a meta box that would have you know, select the language and then a post id for each of the corresponding pages. Or you can hard code it like I generally do. But once you’re capturing the meta, that’s the first thing you do is capture the meta.

Once you’ve captured that post meta then you have this relatively simple code for dealing with it. And so, in here in the select the nav menu, we have… oh and I should just… well, okay. So it gets the meta value, the language, and if the meta value is English then it’s going to show the English navigation menu. Otherwise, it shows the Thesis navigation menu and the Thesis navigation menu we built in French, right? So you’ve got this simple little bit of code that determines which nav menu is displayed. And then what you would do here on Catherine’s site is… oh, that’s not Catherine’s site. Yeah no, I’m sorry. There’s Catherine’s site. Under Appearance and Menus, you create a menu for each language and assign the pages to that menu. And so, this is our English language menu and we put all the English language pages on the menu. And you just create you know, a new menu for each language and then you would drag the pages over to that new menu and then you would use that simple you know, get the post meta. If it’s English, show the English language. If it’s French, show the French language. If it’s Spanish, show the Spanish language, you know.

So that’s the first part – how you show the right navigation menu.And then 2nd part of that is….oh I forgot. Actually, we also this dynamic content gallery as different versions, either English language version or French language versions. And so…but that’s just a level of complexity. You know, you could do that too, right? You can have all kinds of different things that are going to swap out. You could swap out sidebars the same way if this meta… if this piece of post meta is English, show the English sidebar. If it’s Spanish, show the Spanish sidebar. And then what we did here was this is the little menu that does the flags where what it does is it gets the meta value which is the corresponding post id and it gets that meta value and then the French language one creates a permalink out of that post id.

So this is the post id number and so it says “get permalink” with the post id number in there and then that is the permalink for the French version which allows it to be dynamic, right? And then the same thing is true with the English version. If you push this English button, it is…or even if you don’t push the English button, it gets the meta value and assigns the post id to this link, even if it’s not… even if you’re not pushing the button. So it doesn’t require you to push the button to create it. It just does it automatically. And then we just hook this into a you know, another place. And so you can see the code is actually quite simple and I will cut… I’ll put this code in the forum so you can see what this code looks like. And you know, we are going to have an extended conversation in the not too distant future about how to create meta boxes and then how to deal with custom post meta because it’s my opinion that the single most… well, one of the most important skills for being able to really take advantage of WordPress’ customization in Thesis’ customization is mastering this custom post meta and I’m going to show you one example of that from my website. Just because I’m so friggin’ proud of it and this is this Live Answers. You know, if we go to the Live Answers posts… well actually, if we come over here to Live Answers and we’re just starting this process right now where we’re making a mobile version of the videos and we’re making download links for the videos.

And so, we have actually a fairly minimal amount of stuff done this way but if you come to one that I did do and I think it’s… okay, here we go. It says Premium. If you edit this, you can see I’ve added meta boxes to this. So these are my Live Answer video options. And so, this is the video that shows to the general public. I’m making the mobile videos for this one in particular, available only to members so I don’t have a mobile version here. And then this is the version that shows up to a member who’s logged in and this the mobile version that shows up to a member who is logged in. And then in terms of the download, this is the download link for the… I’m making this download available only to annual and founding members.

And so this the download link that shows up on the page. And so if you… which one was that? This was Community Library Case Study Part 1. So Case Study Part 1 and so, since I’m the administrator here, I’m therefore, an appropriate level of member and I see this download the video by right-clicking this link here. But if I was logged out and a guest, I would not see that. And if I was browsing this page from an iPhone or an iPad, what I would see is…if I wasn’t logged in, I would say…I would see the thing that’s saying, “I’m sorry this video is only available in the mobile version for members.” And if I was logged in, it would be displaying the mobile version of the video. And that is all possible because I have these different meta boxes that I created, that I use for deciding you know, which video goes where. And this custom taxonomy that I use for assigning a value for video availability…some are you know, premium videos. Some are free videos and some are public videos. So on my site, a public video is open and available to anybody no matter what they’re a member or not. A free video is open to free members of the site and a premium video is only available to premium members.

So anyway, that’s all possible because of this meta box idea. And there’s really a billion uses then for being able to mash into this custom meta box. So I said all that to say that that’s I think, probably, a very good way of dealing with this question about how to have a site with the same… or with the same site with several different languages in it. Now, I was just hired today to do something different which is to create a plugin that will link to different sites. So this guy’s got an English language and a Spanish language site and it’s the same… they’re 2 different sites. And one of them has the English language you know, .com and the Spanish one has a you know, a Mexican domain name. And so, you know, it clearly appears to be localized to Mexico. And so, he wants both of those to be connected and so what we’re doing in that case is, essentially creating a meta box that allows him to put the URL of the corresponding page in it and then that little switcher… flag switcher that will grab that URL out of that post meta and write it to the permalink so that if you click the Mexican flag then you go to the Mexican site. If you click the English flag then you’d go to the English site. And that’s 2 different sites entirely.

Allen: Okay.

Rick: So do you have any questions about that? I mean, I know I kind of ran through it fast but…

Allen: Yeah, there’s a lot of stuff that I’m not quite sure I have a grip on but if you could share like a code that I could use..

Rick: Absolutely.

Allen: With a couple of instructions that would be awesome. Because I think if I could use your code and get 2 languages up and it looks like I could just add languages as I’m ready, that would ideally make my customer happy.

Rick: Why not? Yeah. I mean, I think… you know, I’m happy to answer follow up questions on this. I mean, this is a really you know, this a really interesting question. I had fun figuring this out and I’d be delighted to you know, work through the problems set with you.

Allen: Right.

Rick: Beyond just this brief description of it.

Allen: Yeah, that would be very, very helpful.

Rick: Okay. Well, I will post the code on the forum and this video will hopefully be up by Monday. Feel free to ask me follow up questions on the forum and then we’ll just you know, maybe we’ll even make it a little case study. You know, a way of sort of you know, systematically considering the options of kind of working through them. I’m totally psyched about doing that with these call-ins so…

Allen: Okay, good.

Rick: Okay well so, anyway, like I said, make sure that you ask follow up questions with this and then you know, follow with them on the forum or personally and we’ll just… we’ll keep on working on this problem until you get where you want to be. Because I think it is… you know, I don’t know. Maybe it becomes a blog post or something. We’ll figure something out. Okay? Okay.

Allen: That’s huge. Thank you.

Rick: You’re welcome. I’m happy to do it.