Tutorial: Creating a Multilingual WordPress Real Estate Website with wpCasa and WPML

Please note! This tutorial is not up-to-date anymore, because in the meantime, a new plugin-based version of WPCasa has been released. Nevertheless, the basic procedures described here are still current.

In this tutorial, you will learn how to set up a professional, multilingual real estate website including the ability to import OpenImmo based property data. For this, we rely on the following fine components:immonex OpenImmo2wpcasa by inveris - WPML Compatible

System requirements:

  • WordPress compatible webspace
  • PHP >= 5.3
  • a MySQL database (ideally empty)

Installing WordPress

Let’s go! We start with downloading WordPress from the official website.

Screenshot: WordPress.org Front Page

Unzip the WordPress archive file, upload the files to your webspace and start the installation by entering the corresponding URL in the browser’s address bar.

Installing WordPress is pretty straightforward. After selecting the language, you only have to perform two simple steps:

Submit the information on the MySQL database to be used (enter a freely chosen table prefix for security reasons).

Screenshot: WordPress Install Dialog

After a successful database connection check, enter the site title and the admin credentials (don’t use „admin” as username) to finish the installation, then login with these data.

In the WordPress backend, update the permalink settings (Settings > Permalinks) as follows:

Screenshot: Permalink Settings

Installing wpCasa Framework/Themes

If not available already, you can obtain the required wpCasa components (framework, Ushuaia child theme and WPML compatibility plugin) from wpCasa.com.

Switch to the theme overview page under Appearance > Themes, then click Add New > Upload Theme and select the wpCasa ZIP archive to install it. Now return to the theme page, install the child theme Ushuaia the same way and activate it. After installing the wpCasa themes, the default themes (Twenty Fourteen, Twenty Fifteen…) can be deleted to keep the installation clean (Theme Screenshot > Delete). 

Screenshot: Themes Overview Page

Adding Agent Users

Contact persons will be automatically assigned to the property objects during the import process. wpCasa uses regular WordPress users for this purpose, so we add them under Users > Add New as „Listing Agent” or „Listing Admin”.

Screenshot: Adding a Listing Agent

Installing and Configuring WPML

A license of „Multilingual CMS” is required which can be purchased at wpml.org. For this project, we need the two related plugins: „WPML Multilingual CMS” and „WPML String Translation”.

Screenshot: WPML Downloads

After downloading these files, go to Plugins > Add New > Upload Plugin and install and activate them as well as the wpCasa WPML support plugin mentioned above. Following this, click on WPML in the main backend navigation bar to finish the installation:

  • Step 1: Determine the main site language (English in our case).
  • Step 2: Select additional site languages (in this tutorial: German and Spanish).
  • Step 3: We keep all defaults here with one single exception:
    • What to include in the language switcher: „Native language name” only
  • Step 4: Enter the site key, then click register and finish afterwards.

WPML includes many smart features and can now be customized by various options, but we’ll focus on some basic settings in this tutorial:

  • Language URL format
    This option depends on your individual webspace/domain configuration. If you don’t use subdomains for language selection, the option „Different languages in directories” is a good choice here.
  • Browser language redirect
    Before your new real estate website goes live, you should enable„Redirect visitors based on browser language only if translations exist” here.

Let’s have a look at the current state! So far, it’s already possible to display the initial wpCasa front page in three languages.

Installing the immonex Plugins

We use two immonex plugins for importing multilingual contents based on the OpenImmo XML standard for real estate data exchange: OpenImmo2wpCasa (or immonex OpenImmo2WP as an alternative which is also compatible with various other themes) and OpenImmo2WP Multilang. OpenImmo is supported by the majority of real estate agent software products and portals, mostly in the German-speaking countries.

In addition, immonex Energy Scale Pro can be used for transforming building energy efficiency data into nice-looking color scales.

Screenshot: Energy Efficiency Data and Scale

Install and activate the immonex plugins (same procedure as already described above) in the following order:

  1. OpenImmo2wpCasa
  2. OpenImmo2WP Multilang
  3. Energy Scale Pro (optional)

We will configure these plugins later!

Composing the Front Page and the Property Details Page

Creating front and property exposé pages is really easy with wpCasa, basically we just have to select and configure the suitable widgets under Appearance > Widgets. This is the choice we’ve made for our example project:

As you can see, the immonex widget „User-defined Properties” has been added multiple times. This widget displays imported OpenImmo data that are not covered by the wpCasa widgets.

Of course, there are plenty other wpCasa and immonex widgets you can combine and arrange to fit the individual needs of your site.

Creating a Property Listing Page

In this tutorial, we’ll only create one single „real” page (in three languages). It’s used for displaying property listings. The main version is the English one, so click Pages > Add New, enter the page title „Properties”, select „Listings (latest)” as template and hit the Publish button.

Screenshot: New Property Listing Page

Then create the German and Spanish translations. You don’t have to insert any contents except the title in the appropriate language. That’s it!

Screenshot: German Translation of Property List Page

Translating Strings

We still have to translate several text fragments that are not page or post related. This is the point where the extension WPML String Translation comes into play (WPML > String Translation). Select „All contexts” and enter the respective translations one by one.

Screenshot: WPML String Translation

Setting up the Navigation

Under Appearance > Menus we create basic menus, one for each language. Create the English navigation first, after that the German and Spanish versions.

Configuring the OpenImmo Import

WordPress is a great system for presenting real estate data, but it’s not the best tool for managing them. Therefore, using a specialized software for this is a better solution. If this software supports the export/transfer of real estate data in the OpenImmo XML format, these contents can be easily imported into the WordPress/wpCasa website.

For this purpose, we’ve already installed two plugins. Let’s quickly configure them under Settings > OpenImmo Import:

  • General Options Tab
    This is the place for setting some basic options, most of them self-explanatory. „Mapping Type” defines the CSV file that includes the mapping table for assigning OpenImmo XML contents to the respective WordPress/wpCasa fields.
    A ready-to-use mapping table suitable to the default wpCasa configuration is included with the plugin. Mapping tables can be easily edited and exported with OpenOffice/LibreOffice Calc.
  • Script Resources Tab
    This tab includes special settings for optimizing the import process in hosting environments with limited resources.
  • Directories / Manual Import Tab
    This one includes the directories used to store import (see next section), archive and log files. Moreover, the import process can be manually started from here.
  • License Tab
    Insert the site license key here and activate the license to receive all the latest plugin updates.
  • Multilingual Imports
    Select „WPML Multilingual CMS“ to enable the translation support during the OpenImmo import process. Please also insert the license key for the extension plugin (immonex OpenImmo2WP Multilang) and activate this license.

Screenshot: immonex OpenImmo2wpCasa Settings

Setting up the Export Software

Now that the WordPress website is ready for importing OpenImmo data, the export system has to be configured. In Detail, this is dependent on the concrete solution used for managing the property data. Luckily, in most cases selecting the export format and specifying FTP data is all that has to be done.

Speaking of FTP, an existing account can be used for transferring the OpenImmo ZIP archives (including XML and image files) to the webspace. In this case, the destination directory has to be given in the export configuration (…/wp-content/uploads/immonex-openimmo-import). It’s also possible to create a separate FTP account that points to this folder.

Each property record in the XML file represents one single language version, this means that – in our case – three records have to be transferred per property (English, German and Spanish version). These records can either be included in a single file or split into multiple files (e.g. one export archive per language). Each XML property record should contain a language definition like this one (as child element of ...immobilie->verwaltung_techn):

<sprache>en-US</sprache>

If the exporting software does not support this definition, it can be added during the import process via a hooked filter function based on other data (immonex OpenImmo2wpCasa provides various hooks for manipulating the import data).

Here’s an example configuration dialog of an OpenImmo export interface (OpenEstate-ImmoTool):

Screenshot: OpenImmo Export Dialog

Now it gets exciting… We’ve started a first transfer and wait for the data to be processed automatically (if the related option is enabled in the import plugin configuration). Alternatively, we can also start the process manually (Settings > OpenImmo Import > Directories / Manual Transfer).

Screenshot: Directories / Manual Import Tab

The Result

Ok, here comes the fabulous result of our efforts: We have created a fully functional, professional looking, multilingual real estate website with automatic data import in less than one hour!

Ein Kommentar

  1. Catverse

    Hello! If you’re working on building multilingual WP websites, I think the localization management app https://poeditor.com/ would prove useful. It’s good for working on collaborative software translation projects, and it can speed up the process a lot, being equipped with API and translation memory. Give it a go, it’s worth it.