Building a fully multilingual real estate site can be challenging. In this post, we teach how you can do it using Toolset plugins. You can start from scratch, or by using a complete reference design to speed up development.

What our multilingual real estate site will include

“Real estate” is anything that you build on the ground, including just land (without anything built on it). Apartments, buildings, open land and offices have different fields and display differently. For this reason, we’ve decided to create a separate custom post type for each of them.

real-estate-home-600

Each section in the site includes its own slider, with featured items and custom search. The custom search allows to find items according to their attributes (like size, price and features). It displays the results as a grid (textual list) and as markers on a Google Map.

custom-search-houses-600

Each item displays with full details, including the listing agent, features and location on map.

single-house-600

So, if you’re going to build such a site yourself, you should:

  • Create the custom post types and their fields and taxonomy
  • Find how to implement a custom search (which is a major part of the project)
  • Find how to display items on a Google Map
  • Design how everything should display

How to build a multilingual real estate site with Toolset

There are great themes that will do this for you. Today, we will explain how to build such sites using our Toolset plugins.

In case you haven’t heard about Toolset, it’s a package of plugins that help you build advanced sites with custom types, without programming. Toolset is a great fit for real estate sites because they rely heavily on custom post types and custom fields. With Toolset, it’s easy to set up these custom types and fields and display them nicely on the front-end, without writing PHP.

Custom post types, fields and taxonomy for our real estate site

The first thing that we did was create the custom post types, custom fields and taxonomy. Even though the site looks simple, it has 7 different custom post types. Go to Toolset->Dashboard to create them.

The custom post types, fields and taxonomy for our real estate reference site
The custom post types, fields and taxonomy for our real estate reference site

We created separate sets of custom fields, which add the attributes that each custom post type needs.

Custom fields for apartments
Custom fields for apartments

Designing the site’s front-end with Toolset

Our front-end design center with Toolset is Layouts plugin. Layouts allows to design the “wireframe” of your site with a drag-and-drop editor. Then, you build the details of each of the blocks using Views plugin.

First, you design the layout. You will start with the parent layout, which includes the elements that appear on each page in the site.

The master layout of site, including the header, footer and placeholder for child layouts
The master layout of site, including the header, footer and placeholder for child layouts

Then, you proceed with the design of the layouts (wireframes) for different main pages. This is the layout for the “houses archive”, which is the search page for houses.

Houses archive layout (the "wireframe" for the list of houses)
Houses archive layout (the “wireframe” for the list of houses)

Once you have the layouts ready, it’s time to dive into the different blocks and build them. You will do this with Views. A View loads content from the database and displays it. You can create Views for simple lists, sliders, custom searches, tables, grids and anything that you can think of.

Building a View takes three steps:

  1. Select what the View is for (simple list, custom search, paginated list, slider)
  2. Choose more options, depending on the kind of View that you’re creating
  3. Design the output using HTML and CSS
Setting up a View - 1. Choose which content to display
Setting up a View – 1. choose which content to display
Setting up a View - 2. Select options for that kind of View
Setting up a View – 2. choose options for that kind of View
Setting up a View - 3. Design the output using HTML
Setting up a View – 3. Design the output using HTML

You may have noticed that the HTML code above uses shortcodes. These shortcodes display fields. You don’t need to memorize shortcodes or their options. To include a field in the HTML, click on the Fields and Views button in the editor. Select the field, enter its options and you get the completed shortcode.

Inserting a field
Inserting a field

This way, you can create your own custom layouts and inside them, build the site-elements that you need. If you can write HTML and CSS, you can achieve anything with Toolset, without writing PHP.

How to translate

One of the great things about Toolset is the seamless integration with WPML. Anything that you create with Toolset is trivial to translate with WPML.

Toolset automatically registers all “strings” for translation.

When you go to WPML->String translation, you will see string domains for each of the Views (and other Toolset elements) that you created. There will also be domains for the custom post types and fields.

Translating the strings in a View
Translating the strings in a View

Translating layouts is even easier. Go to WPML->Translation management and you will see Layouts appearing in the Translation dashboard.

Layouts to translate
Layouts to translate

Translating a layout is similar to translating posts. You will get a list of texts which appear in the layout and translate just them. You don’t need to recreate layouts separately per language.

Start from scratch or from a complete working reference site

With Toolset, you can create your own multilingual real estate sites completely from scratch. You can also use our complete real estate reference site as a starting point. Since our reference site is completely built using Toolset plugins, you can modify anything in it. You can edit element, remove and add your own.

Visit the related Toolset documentation pages to learn about using WPML to translate sites created with Toolset.