How to build a real estate website on WordPress with Toolset

You can use Toolset Real Estate to build everything you need for the perfect real estate website. Below we go through all of the steps to help you learn how to build a real estate website which will see you welcome more users than ever before.

Don’t forget, you can check out all examples of the features we are adding below on our real estate reference site.

01Step Download the plugins you need to build a real estate website

Before you start building your real estate website with Toolset you will need to download the following plugins:

You might also need to download these plugins depending on what you want to achieve with your real estate website:

To install your Toolset plugins follow our guide on how to install and register Toolset.

02Step Create your custom post type

Now that we have all the tools we need we can create the custom post types for our real estate website.

On our reference site, you can see we have multiple custom post types:

As an example, we will create the post type for Houses.

  1. To start, head to the Toolset Dashboard in the WordPress admin and click Add new post type.
  2. Enter the following in the search box:
  3. Click Save Post Type and your Houses post type is ready.

03Step Create your custom fields

Now that we have created our Houses post type we can now add the custom fields which will help us display the information about each house.

On a page displaying a house for sale, you will see custom fields for the price, the year it was built, the number of bathrooms/bedrooms and many more. Just like on our reference site:

As an example, we will create a custom field for the Bathrooms for our Houses post type so users know how many bathrooms it has.

  1. On the Toolset Dashboard click on Create field group next to the Houses post type.
  2. Click on the button Create field group and then Add New Field to add fields to the group.
  3. Now we choose the type of field we want. For our Bathrooms custom field, we’ll use the Numbers option.
  4. Set the options for the field. We can include the name of the field, the number of values and whether it’s a required field among other variables.
  5. Click Save Field Group and it will now appear when you edit your Houses posts.

04Step Create your custom taxonomies

We now need to add custom taxonomies to our real estate website so that you can organize your posts based on certain features.

We will create a Property features taxonomy which will include certain facilities users might expect such as air conditioning, broadband internet and a gym.

  1. On the Toolset Dashboard, click on Add custom taxonomy
  2. Enter the following in the correct boxes:
    • Name plural: Property features
    • Name singular: Property feature
    • Slug: Property Feature
  3. Choose whether you want a hierarchical or flat taxonomy. In our case, we will not need one so we will keep it as flat.
  4. Select the post type for the taxonomy. We will choose the Houses post type. Click Save taxonomy
  5. Now we can head back to the WordPress menu to add our taxonomy terms. Under Houses on the sidebar, we can now see a dropdown for Property Features. Click on that and we can now start adding the different names for the terms.

05Step Create templates for your real estate pages

Now that we have created our custom types for our real estate website, we can start displaying it on the front end.

We will create a real estate single-post page that will eventually look like this:

Later we will show you how to add a map and connect your Houses posts with your estate agents.

First, find out how you can create your templates to display your custom posts.

06Step Create sliders to feature some of your properties

Sliders are a great way to showcase as many of your houses to your user as you’d like. Without having to click on multiple pages, they can see a selection of houses on the slider. Sliders can also be used to showcase all of the rooms in a house.

On our real estate reference site, the homepage contains a slider as the header image with custom fields to describe the property.

We will use Toolset Views to create our slider. Check out our page on creating a View for a slider which will take you through everything.

07Step Create a relationship between your houses and estate agents

What is the first thing a user might think once they see a house they like? How or with whom they get in touch.

We can create a post relationship between our Houses and our Agents post types so that they can instantly see the contact details when viewing a house they like. Just like the example on our reference site which you can see below:

Here’s how you can create this exact relationship on your website:

  1. In your WordPress Admin, on Toolset -> Relationship, click Add New.
  2. Select the type of relationship you want – in our case, we will select a many to many relationship. Learn more about the different kinds of post relationships.
  3. Choose the post types to connect which will be the Houses and Agents post types.
  4. You can set a limit on the number of connections but we can skip this and click Continue.
  5. You can also add relationship fields for your connection. This is unnecessary for our relationship so we will again click Continue.
  6. We can now name our relationship. We will call it Houses and Agents. Click Continue and Finish.

Now when we edit our content within the Houses post type, we can see a section where we can add connections between our different post types.

A search is the easiest way for your users to find exactly what they want on your real estate website.

We have an example of a search on our reference site:

To learn how to create a custom search like this one check out our documentation on building custom searches for any type.

09Step Create maps to display properties and search results

We can display our properties on a map to show our user exactly where it is located. Not only can we add maps to our individual pages, but also to our search results.

Here is a map on an individual property page on our reference website:

We also have an example of a map as part of the search results:

To create your own map similar to these ones, check out our documentation on displaying maps on your site’s front-end.

10Step Create a front-end form so users can add or submit properties

Front-end forms allow your users to list their own properties on your website themselves so that you don’t have to. The great thing about front-end forms is that neither you nor the user will need to style the listings. All the user needs to do is enter the details and it will appear with the same styling as your other pages.

On our reference site, we have an example of a front-end form you can add to your own real estate website.

To create a front-end form similar to this one, check out how to build forms for creating content.

We look forward to hearing your feedback

If you are not a Toolset customer yet, feel free to send your questions using the presales questions form.
We’ll be happy to answer if you need any tips on how to build a real estate website.

If you’re already a Toolset client and you need help, use the technical support forum.