This article describes how i created a new way to have a two-language Wordpress installation, using a little Wordpress hack, based upon the Wordpress Custom Fields.
Well, after some months of blogging in italian, i wanted to translate my best posts in the english language, in order to have more visitors and share my ideas with others.
I wanted to do this thing without having a mixed-language blog, where no-one (even me) wasn’t able to see what was that weird thing.
I wanted a smooth way to link an article that had a translation to that translation, and i wanted my categories in both languages, my tags in both languages and so on.
For example, in this blog i use Ultimate Tag Warrior to manage the post tags and the tag cloud, how do i keep two tag clouds for two different languages? It’s impossible with a single Wordpress installation, without modifying the plugins.
Let’s make a summary of what i will explain: we will create a new Wordpress installation that will be identical to the existing one, except it will be in a different language. Then we’ll create a new database, that will host our data. In the end we’ll modify the template to use two Custom Fields that we’ll use to link the different versions of the same article.
Creating a new Blog in another language
It’s better to work in a local installation, rather than using a remote internet web server, in order to speed up the process.
I assume you have a directory structure like this:
site
|-> blog_english
Assuming you want to translate the blog in spanish, we’ll modify that structure like this:
site
|-> blog_english
|-> blog_spanish
Copy the entire directory blog_english and rename it blog_spanish.
Modify the file blog_spanish/wp_config.php to point our Wordpress installation to a new database, modifying
define('DB_NAME', 'database_english');
with
define('DB_NAME', 'database_spanish');
Or whatever the name of the spanish database will be. Modify also the login and password fields, if they have changed.
Now create a new empty database, named database_spanish.
To copy the database we’ll make a dump of the old one and than we’ll copy that dump over the new spanish db:
mysqldump -u utente_db -p database_english > db.dump
mysql -u utente database_spanish < db.dump
You can do the same using phpMyAdmin, if installed.
Now point your browser to http://localhost/site/blog_spanish/wp_admin and modify the directory where is located wordpress: open the panel Options, in the General tab modify Wordpress Address (URL) and Blog Address (URL), inserting the new blog address (replace blog_english with blog_spanish).
Now we have a new blog that is based upon a new database.
Now we modify the template of the new blog so that it will “speak spanish”. To do this - if you haven’t got already a translated version of the template - you have to edit the code by hand, and translate it so that it’ll appear as a spanish blog.
To do this go to the directory site/blog_spanish/wp_content/themes/template_used/ and modify it.
You’ll also need to translate the plugins you use. For example i use Ultimate Tag Warrior and Sociable, and i had to translate them in order to have a completely translated blog.
Using the Custom Fields to link two posts together
The Custom Fields are a way offered by Wordpress to assign metadata to the posts, directly from the Administration panel.
How can we use them? In our case, assuming your original blog has a hundred articles, you can’t stay a month in your office just to translate all of them. You’ll translate only the best articles you wrote, for example. Then in the future you’ll translate every article in two languages.
How can we link the posts to their translation, so that if we don’t have a translation than there will not be a link? We’ll use the Custom Fields.
Let’s search on Google Images for two little flags, an English flag and a Spanish one, and copy them to site/images/
Now let’s think about the english blog. Open the files archive.php, index.php, page.php, search.php, single.php (and if we use UTW, also tag.php).
The code to insert in the template is
<?php
$spanish_translation = get_post_meta($id, 'spanish_translation', true);
if ($spanish_translation != '') {
echo "<a href='".$spanish_translation."' class='spanish_translation' alt='Spanish Version' title='Spanish Version'></a>";
}
?>
We’ll put these lines of code at the beginning of each post, into the while(have_posts()), inside the <div id=”post-<??>”. Before the title of the post is a good place to put our flag.
This piece of code checks if we have a spanish translation of this post, and if we have it, we add a little spanish flag at the beginning of the post, which is a link to the translation.
We do the same thing for the Spanish template, the code is the following:
<?php
$english_translation = get_post_meta($id, 'english_translation', true);
if ($english_translation != '') {
echo "<a href='".$english_translation."' class='english_translation' alt='English Version' title='English Version'></a>";
}
?>
Now we modify the CSS that we use, inserting the following rules
.box.default a.english_translation {
width: 30px;
height: 20px;
display: inline;
float: right;
background-image: url(images/english.gif);
}
.box.default a.spanish_translation {
width: 30px;
height: 20px;
display: inline;
float: right;
background-image: url(images/spanish.jpg);
}
When we translate an english post, we add a custom field named “spanish_translation” with as value the URL of the spanish translation. We’ll do the same with the spanish translation, linking it to the english version with the Custom Field “english_translation”.
This way we have ha multilanguage blog that separates content but keep it correlated.
P.S. I noticed that using Camino and Safari the little flag is not visible, so i changed the code to
<?php
$english_translation = get_post_meta($id, 'english_translation', true);
if ($english_translation != '') {
echo "<a href='".$english_translation."' class='english_translation' alt='English Version' title='English Version'><img src='http://www.copesflavio.com/images/english.gif' /></a>";
}
?>
The CSS will be
a.english_translation {
width: 30px;
height: 20px;
display: inline;
float: right;
}
April 10th, 2008 at 2:03 pm
[...] Performancing published a great article featuring 28 ways to use the WordPress Custom Fields. I did something with Custom Fields, here’s how to use them to translate your blog. [...]