This article describes a method of setting up a multi-language website, based on this forum thread.
Table of Contents
- General idea
- Advantages
- Basic Steps
- Template example
- Switching languages
- Does this work for Member Profile Templates?
- Advanced Template example
- Removing Index.php using .htaccess
- Tips and Tricks
General idea
The general idea is to create subdirectories for each country, and use Path.php Global Variables to hold the country code and/or language variable.
Because these variables are parsed very early (see: Parse Order), we can use them almost anywhere in our templates.
Advantages
- No PHP needed
- No need to keep track of which segment holds the language variable
- Elegant URL structure
URLs will look like this:
http://www.domain.com/fr/index.php/template_group/template/
http://www.domain.com/nl/index.php/template_group/template/
Basic Steps
Step 1
Create a new directory in the root of your EE install and name it after the country code of the language you want to add.
example:
/fr/ for French
/en/ for English
Step 2
Put a copy of your “index.php” and “path.php” inside this new directory.
Step 3
Open the “path.php” file that is now inside your new country directory ("fr" in this example)
- change the $system_path variable to: $system_path = “../system/”; (2 dots instead of one)
- change the $site_url variable to: $site_url = “http://www.domain.com/fr/”; (make sure the country code matches the directory!)
- add a “country_code” variable to the $global_vars array.
- add a “language” variable to the $global_vars array.
The path.php file inside my “fr” directory now looks like this:
<?php
// ------------------------------------------------------
// DO NOT ALTER THIS FILE UNLESS YOU HAVE A REASON TO
// ------------------------------------------------------
// Path to the directory containing your backend files
$system_path = "../system/";
// ------------------------------------------------------
// MANUALLY CONFIGURABLE VARIABLES
// See user guide for more information
// ------------------------------------------------------
$template = "";
$site_url = "http://www.domain.com/fr/";
$site_index = "";
$site_404 = "";
$global_vars = array(
"country_code" => "fr",
"language" => "french"
); // This array must be associative
?>
The {country_code} and {language} variables can now be used to tell EE which language it needs to show.
You will need two languages for this to work properly, so duplicate your “fr” directory and change its name to your default country code (en).
Also change the $global_vars array to:
$global_vars = array(
"country_code" => "en",
"language" => "english"
);
To make sure the default language also works on the index page (without any country code added to the URL) you should also update the $global_vars array in your default path.php file.
To add more languages, just repeat step 1 - 4.
Step 4
Create custom fields for your new language and add the country_code to the Field Name.
You should end up with Field Names like this:
- title (default title field)
- fr_title (french title field)
- en_summary
- fr_summary
- en_body
- fr_body
Step 5
In your templates you can now replace {summary} with {{country_code}_summary} and {body} with {{country_code}_body}.
Pointing your browser to http://www.domain.com/fr/index.php/template_group/template/ should now take the {country_code} variable from your “path.php”, parse it, and use it to change {{country_code}_body} into {fr_body} and display the fr_body field.
The only field that needs some extra treatment is the {title} field.
This code checks if the current country_code is your default (en), if so it will show the default {title} field, if not it will prefix it with the country_code.
<h2 class="title">{if country_code != "en"}{{country_code}_title}{if:else}{title}{/if}</h2>
Template example
This is an example of a simple template:
{exp:weblog:entries weblog="default_site"}
<h2 class="title">{if country_code != "en"}{{country_code}_title}{if:else}{title}{/if}</h2>
{{country_code}_summary}
{{country_code}_body}
{/exp:weblog:entries}
Switching languages
To switch languages, place this Javascript in the <head> tag of your html document.
< script type="text/JavaScript">
<!--
function switchLanguage(lang) {
u = location.href.split('/');
u[3] = lang;
location.href = u.join('/');
}
//-->
< /script>
(please remove the spaces from the ‘script’ tag)
place this code inside the ‘body’ tag.
<a href="/en/" onclick="switchLanguage('en');return false;" title="English">EN</a> |
<a href="/fr/" onclick="switchLanguage('fr');return false;" title="Français">FR</a>
Or, if you prefer PHP (thanks yout):
<?php
function switchLanguage($lang) {
$u = explode('/', $_SERVER['REQUEST_URI']);
$u[1] = $lang;
return implode('/', $u);
}
?>
<a href="<? echo switchLanguage('en'); ?>" title="English">EN</a> |
<a href="<? echo switchLanguage('fr'); ?>" title="Français">FR</a>
Does this work for Member Profile Templates?
Yes!
Anonymous users
There is this wonderful plugin by MF, called the Template Language Plugin.
Using this plugin you can change the language for your templates, the Advanced Search page, even Member Profile Templates.
If you use the {exp:template_language:future ...} tag, it will remember the language choice for anonymous users througout your site.
This tag has to be added to all your templates where users can switch languages, this is where the ‘language’ variable comes in!
It will be used like this: {exp:template_language:future language="{language}"}
Make sure your ‘language’ variables matches the names of the languages inside /system/language/ exactly!
Logged In Members
The Language Switcher Extension will change a member’s Localization Settings based on the ‘language’ variable set in your path.php.
FYI, it will do this by updating the current member’s settings in the database using a query.
Drop the extension file in /system/extensions/ and don’t forget to ‘enable’ it in the Extensions Manager.
The extension expects your path variable to be named ‘language’, a different name will not work!
Advanced Template example
{exp:template_language:future language="{language}"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{country_code}">
<head>
<title>Language Switcher Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< script type="text/JavaScript">
<!--
function switchLanguage(lang) {
u = location.href.split('/');
u[3] = lang;
location.href = u.join('/');
}
//-->
< /script>
<!-- (please remove the spaces from the 'script' tag) -->
</head>
<body>
<div id="navigation">
<a href="/en/" onclick="switchLanguage('en');return false;" title="English">EN</a> |
<a href="/fr/" onclick="switchLanguage('fr');return false;" title="Français">FR</a>
</div>
{exp:weblog:entries weblog="default_site"}
<h2 class="title">{if country_code != "en"}{{country_code}_title}{if:else}{title}{/if}</h2>
{{country_code}_summary}
{{country_code}_body}
{/exp:weblog:entries}
</body>
</html>
Removing Index.php using .htaccess
If you want to remove index.php from your URL please read this first.
I am using the “File and Directory Check” method myself and my .htaccess file looks like this:
# rewrite rules
RewriteEngine On
# ditch index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
To make this work with this multi-language method you must put the same .htaccess file in each language directory and add the country code to the RewriteRule.
# rewrite rules
RewriteEngine On
# ditch index.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /fr/index.php/$1 [L]
Tips and Tricks
You can use the same method you used for your custom fields on User Defined Global Variables.
If you create these variables:
- copyright_en (this variable holds your English copyright text)
- copyright_fr (this variable holds your French copyright text)
you can use them in your template like this:
{copyright_{country_code}}
Why “copyright_fr” instead of “fr_copyright”?
Global Variables are listed alphabetically in EE’s Control Panel, this way they will be grouped together.
The same goes for embedding templates: (like navigation)
{embed=includes/nav_{country_code}}
More interesting tips can also be found here.
---