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.
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.
Each item displays with full details, including the listing agent, features and location on map.
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.
We created separate sets of custom fields, which add the attributes that each custom post type needs.
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.
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.
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:
- Select what the View is for (simple list, custom search, paginated list, slider)
- Choose more options, depending on the kind of View that you’re creating
- Design the output using HTML and CSS
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.
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 layouts is even easier. Go to WPML->Translation management and you will see Layouts appearing in the Translation dashboard.
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.