Quantcast
Viewing all articles
Browse latest Browse all 10

Multilingual Website Case Study Part 6 – Add the Language Specific Menus

This is the sixth in a series of live lessons on using WordPress and Thesis as a Multilingual Content Management System (CMS). In this lesson we create the function that allows us to switch between different languages. We get the new post meta, we use the new WordPress 3.1 function called “meta_query” and we create a custom loop that creates links to the other language pages.

[This post contains video, click to play]
Image may be NSFW.
Clik here to view.

Video Transcript

Okay so then let’s move on to the next part, Part 6 which is adding the multiple menus and so the first step in adding these multiple menus is actually creating them. And that’s what we’ll do first and I’ve created 3 of them already so we’re just going to create the 4th one but if we come down here to appearance and menus, you can see I’ve got an English language menu, a French menu, and a Spanish menu. And so, we’re just going to create an Italian menu. Italian menu, create a new menu then with that menu, we’re going to add the Italian pages to it. And so, that’s an Italian page and that’s an Italian page and that’s an Italian page. So we’ll add those to the menu and then I want the homepage to be first and I want the Consider Building Your Own Site to be last so we’ll move that. And then we want to change these names a bit and I’m going to pick… actually you know, what I’m really going to do is I’m going to pick these 5 reasons from here. I can see that the translation was different but I just want to say 5 reasons. So I’m going to paste 5 reasons there and that’s going to change this title to this and it’ll still have the original title down here. And then this one is going to be Consider Building Your Own Site. So let’s see…we’re going to cut that out, paste that back in and okay, and then save that menu. Okay, so now we have all 4 menus.

And now what we need is the function for selecting those menus. So let’s go back to our custom functions php file and let’s create a brand new function. Okay, so this function selects the appropriate menu. Okay and then let’s say function and then byob menu switcher. Open and closing parentheses, open and closing brackets, what did I do wrong here? F U N…

And so then, the next thing we want to do is we want to test what the page language is so that is we’re going to get the global post and we’re going to a get post meta… page… yeah, get post meta. So we’ll just copy that and come back down here. So now we’ve got global post and then we’re going to say byob page language = get post meta and the post meta that we’re using is page language. Okay and then we’re going to say if byob page language = French… if $byob_pagelanguage…just let it fill that out for me… page language equals and the comparative operator for this is a double equal sign. If you have a single equal sign, what it would do is it would take the value on the right and place it in the variable on the left. So you need a double equal sign in this case. So if byob_pagelanguage =… and then we’ll say f r e n c h…then we want to do a specific task. Pardon me… that’s got to be in… there we go. It’s got to be in parenthesis. So if byob_pagelanguage = French then we’re going to get this navigation menu.

So we need to go back and just take a look really quickly at WP navmenu.We go to the function reference for WP nav menu and this is a function in WordPress 3.0 that is new to WordPress or it’s new to WordPress 3.0 and essentially what this does is this calls a specific menu with a series of potential arguments. The only argument you were going to use at this point is the menu name so we’re going to call WP nav menu and the arguments are going to be menu and then the menu name. So let’s just grab this little piece of code here and come back to custom functions php file. And okay so then we’ll just paste that here and then we need to replace args with our menu name here so let’s just… let’s see, array and then pair of parentheses and then a pair of single quotes and then menu. And then a space equals greater than sign space single quotes and then that is French menu. Okay so this is the name of our menu so if it’s the French menu then we’re going to call WP nav menu and it’s going to display the menu with a menu name of French menu.

Okay so the next thing we do is we’ll copy this… else, paste that so that else if the byob language… the page language is Spanish then use the Spanish menu and copy that again and paste it. Else if it’s the Italian language then use the Italian menu. And then finally, else…we’re going to get rid of the condition here because we’re not using the condition anymore. Else WP nav menu array menu = English language menu which is what I called that menu. So if the byob page language is equal to French then it’s going to serve the menu with the name of French. Otherwise, if it’s Spanish, it will serve the menu with the name of Spanish. If it’s Italian… if it isn’t that then if it’s Italian, it will serve the Italian language and otherwise, if it’s none of those 3 conditions then it will return to English language menu.

So the next thing we need to do is add that to our Thesis hook before header. So let’s go ahead and add this, copy that, use exactly the same language… Thesis hook before header except now what we’re going to do is the menu switcher. And so now what’s going to happen…because the order of these things are being called, now that little language switcher is going to be above the menu which is really where I want it anyway. And then we’re calling our menu… I guess there’s one last thing we have to do here and that is remove the existing Thesis nav menu.

So we’re going to say remove action parenthesis single quotes and then the hook, Thesis hook before header and comma… single quotes…Thesis hook before header and then the function removing this Thesis nav menu. Okay and then semi colon… and so now, we’re going to remove the Thesis hook before header, Thesis nav menu and then we’re going to add the language switch and then we’re going to add the byob menu switcher. So let’s save this document, let’s upload the document, and let’s test it on the site.

Okay so we got the relationship that we want so let’s see if it switches the French menu. Oops, it does not, neither the Spanish nor the Italian. Okay, I think the problem here is that… I think we need to reset the query.

So if we come back over to our custom functions php file, I think what’s happening here is that this query is messing up the main query. And the way to fix that is to add a little handy dandy code called WP reset query. This is a WordPress function and what it does is it takes the query variable and it resets it to the original query variable. So you know, generally speaking, when you create a custom query and use WP query, you know, you don’t have to redo that. So I’m not exactly sure what… but every once in a while, it happens. So there’s obviously something I have to learn about how WP query interacts with query posts but in any case, I think this is going to solve the problem. Return it back to the base query and so then what happens is this is always… this get post meta page language is going to return the right results. So let’s go ahead and save that document and let’s try that. I could be wrong but… upload and then go to our page and refresh it. Okay, let’s go to French. There we go, now it’s changing the language. If we go to Spanish, we go to the 5 reasons… if we go to the Italian version, it switches. Go to the Consider Building Your Own Site in Italian, switch back to French, switch back to English. Perfect, okay so it’s working.

Okay and so I guess that’s the end of Part 6 of the Multilingual Website Demonstration but next week, what we’re going to do is we are going to use the same language switching idea and switch out the header so that the header is on the right language. We’re also going to switch out the sidebars so that sidebars end up you know, they’re being a different language sidebar for each language.


Viewing all articles
Browse latest Browse all 10

Trending Articles