For many sites, a unilingual setup is fine as you are marketing to a defined body of readers who primarily communicate in one language, their mother tongue. Occasionally, though, you need a website that markets in two languages (or potentially more) to a more disparate group of readers. That’s when the limitations of WordPress can be frustrating: you either end up creating two totally different blogs that reside in different places or one side that is somehow hacked together (as ours was).
However, with a few tweaks of your themes, a couple of plugins and a bit of work, you can easily create a site that is functionally bilingual. How? Well, that’s the purpose of this post.
Ingredients:
- A WordPress blog with your own domain, hosting and FTP access;
- A selected theme;
- The theme switcher reloaded plugin;
- And a dash of guts; and
- (if applicable, turn off any caching software).
Stage 1: Setting up the bilingual site theme
Step 1: Install the plugin as usual. Activate it, too.
Step 2: Set the theme you want to use as your default. Then copy the entire contents into a new folder renamed as your ‘language 2’ – L2 – folder. (in my case this was ‘English’. To reset the name, go to the CSS file of the theme and edit the text in the first two lines: Theme Name: L2.
Step 3: Activate your theme to the new language L2.
Repeat the steps 2 and 3 for your primary language or L1.
Go back to your Appearance >> Themes window inside WordPress. Check that you have two themes: one is clearly named L1 and the other L2.
Step 4: Then create the code or widget you need in the appearance >> widgets box. I ended up just writing the code by hand and pasting the resulting code into a text widget box. Ugly, but functional.
The code looked like this but it was hidden in regular HTML.
Sample
<a href=”http://domain.com/index.php?wptheme=L1″>L1</a>
and similarly for L2. Once this is put in the sidebar, you’re at the end of stage 1. You can now switch between two identical themes that are differentiated only by their name.
Stage 2: Differentiating the themes
Page Structure
Now you need to create some additional structures inside wordpress to hold your pages. I had a number of pages that I wanted to create in two languages. So I created a page structure to make management a little easier, using the ‘page parent’ setting. So the L1 about page was under the L1 page header. L2 about page under L2 and so on. Since each page has a unique number, making the pages appear at the top of the site as many blogs do was simply a matter of calling the page number in the <header> file for each theme.
Thus L1 about page with page number 71 would be called as
<?php wp_list_pages(‘include=pagenumber&sort_column=post_title&title_li=’);?>
You will need to edit this line in your header for both L1 replacing pagenumber with the number you want. You can edit the header in Appearance >> Themes.
Rinse and repeat for each page you want to use in each language.
Sidebar Structure
Set up your Sidebar as you wish, then open the page in your browser, and copy the Sidebar HTML into your notepad.
Clear all the widgets you used. Since you can’t call different widgets in each theme, sidestep the problem. Go to your theme, and edit the ‘sidebar.php’. Replace the content with the code you want to use. Remember to do this with both L1 and L2 theme language, changing the items and translating as you go. Initially, you won’t be able to change the sidebar once you save that… you will have to edit the sidebar.php files by hand.
Theme pages/post pages/etc.
You will need to go through the theme page by page and translate the output comments into your target language. This will take time and you will likely have to check everything several times to make sure things are changed. You will also need to translate the output comments in the header and footer files as well.
It’s possible to go further than this in a number of ways, but once you complete Stage 2: you will have a fully functional bilingual website on the outside, and a mono-lingual site on the admin side. You can’t change the sidebar (yet) with widgets as easily as before. To see what I did on my site, go to NozKidz dot com and click on the English and Chinese buttons at the top. You should see things change smoothly.
Posts aren’t translated yet, either. As there is only one stream of posts so both languages will be presented on each language page. For my site, this may be okay because parents want to see stuff in English written by their kids, they may read them, too. I know there are automated translation tools but I don’t particularly trust them to turn out good quality translations so I’m not implementing them on my site yet. There may be good SEO reasons to do so, but the translations are awkward at best and misleading at worst. I cannot put such translations in front of my group of customers.
Post Structures
I can see a way to create a category for posts in each language, then simply call posts from one category or other depending on the language you want to show. That shouldn’t be difficult. I’m not sure that is something I want to do yet. It would be straightforward to create single languages by editing the PHP in the posts or index.html in each theme. I don’t have the code for doing that. It couldn’t be hard, could it?
Have you tried this? For me, though it took more work than creating another blog, I didn’t want to use WordPressMU to do this or install another blog, because it was just adding an extra layer of complexity. Both of these solutions would have worked nicely, but this way I can have my cake and eat it. I get differentiated blogs with one stream of posts.
Of course, this is fortuitous because it means I can figure out if people are actually seeing the sign in our target area and visiting our site from the URL or not. But the risk is if you are on the street, and you want to check the details before you call, and your site isn’t mobile you’ll likely discourage the visitors because of what they might see.
