A real estate website needs to be as stable and as reliable as the houses you are selling.

But building a sturdy real estate website that users will enjoy using can sometimes be as difficult as building the houses you are selling – if you use the wrong set of tools.

Luckily, combining Toolset Real Estate with OceanWP is proven to give you a professional real estate website with all of the functions you could possibly need.

In this guide, we will show you how to build the following features:

  • Custom post types for your different properties and agents
  • Custom fields to add information such as the number of bathrooms
  • Taxonomies to separate your properties based on features (detached houses, bungalows, etc.)
  • Templates to display your properties with the same structure
  • A slider to show images of your properties
  • Post-relationships to link the estate agents with the properties they are in charge of
  • A search so users can easily find the best property for them
  • Maps to show the locations of the properties and search results
  • A front-end form so users can submit their own property listings

If you want to carry out these steps as you read them, you can use your own free test real estate website built by Toolset and OceanWP.

Free-to-use real estate demo website
Free-to-use real estate demo website

Why we’re using Toolset Real Estate and OceanWP

Toolset Real Estate is part of Toolset which provides you with all of the features you need to build multiple types of professional websites.

Specifically, with Toolset Real Estate you won’t need any other plugin to add the features a real estate website needs. This means you don’t need to worry about plugin compatibility or whether the sheer number of plugins will slow down your website.

Meanwhile, OceanWP is one of the most popular themes for business websites for a reason. Websites run by OceanWP have a better conversion rate, faster load times, and improved SEO – so house buyers can find your website easily.

Together, Toolset Real Estate and OceanWP work seamlessly together which means you can build robust websites that look great without any concerns. 

Don’t forget, you can download test websites built using Toolset and OceanWP for free to experiment on.

What you’ll need to get started

When you build a custom real estate site with Toolset, you’ll need the following Toolset plugins:

  • Toolset Types – for setting up custom post types, fields and taxonomies, for the properties and agents
  • Toolset Blocks – for designing your site’s front-end (templates and searches for properties, etc.)
  • Toolset Maps – for adding features that enable searching for and displaying properties on maps
  • Toolset Forms – for allowing agents to manage properties through custom front-end forms
  • Toolset Access – for controlling what parts of the site visitors, clients and agents can access

Once you’ve installed and registered these components, it’s time to get started on building your real estate website!

1. Create your custom post type

First, we need to create a custom post type for our “Houses” section so that users know exactly where to go to view them.
1. Head to the Toolset → Dashboard in your WordPress admin and click on Add new post type.

Adding a new Custom Post Type for Houses
Adding a new Custom Post Type for Houses

2. We now need to name our post type and save it to the position we want it to be displayed in the admin menu.

Naming and positioning a post type
Naming and positioning a post type

3. Click Save post type.

And that’s it. Your houses custom post type is ready.

2. Create your custom fields

Now that we have our custom post type, we need to add some custom fields. Our custom fields make up a template of sections which we’ll want to fill in to describe each house and its features. 

For example, we’ll need sections for the number of bathrooms, price, and year the property was built.

  1. On the Toolset Dashboard, click on Add custom fields next to the “Houses” custom post type which we created.

2. An Add New Field box will pop up where we can choose which type of custom fields we want. For example, a custom field for “Build year” will be a number.

Adding a new custom field
Adding a new custom field

3. For each field you will need to set options such as whether it is compulsory to enter information.

4. Once you’ve filled in all the preferred options for a field, click on Add New Field to move on to the next one in the group. Once you’ve added all fields for a field group, click on Save Field Group.

Now, each time you edit a “House” post you will see these fields to fill in.

Adding custom field options
Adding custom field options

3. Create your custom taxonomies

Custom taxonomies are a great way to separate properties so that users can easily find the ones that match their criteria. For example, if they only want to see houses that are for sale rather than to rent.

Taking that example, here’s how to create taxonomies to differentiate between houses that are for sale and houses for rent.

  1. On the Toolset Dashboard click Add custom taxonomy in the Houses row.
  2. Enter the following in the boxes
    1. Name plural: Property types
    2. Name singular: Property feature
    3. Slug: Property Feature
  3. Choose whether you want the taxonomy to be hierarchical or flat. For the purpose of this one, we will keep it flat.
  4. Select which post type you want the taxonomy to be associated with – in this case, it will be “Houses.”
  5. Click Save taxonomy
Accessing the page to add custom taxonomies
Accessing the page to add custom taxonomies

Now, when we edit or create a “Houses” post type, we can create and select “Property type” taxonomies to attribute to the post type.

Adding and selecting taxonomies when creating new posts
Adding and selecting taxonomies when creating new posts

4. Create a template to display the properties

We now have the core components we need to show off our properties but an important part of the process remains – how do we display them on the front-end?

This is where we create a template that we can use to display each one of our houses.

To build our template for single “Houses” we will use Toolset Blocks with the WordPress Block Editor.

With Toolset Blocks, you can design templates for your custom post types, with custom fields and taxonomies.  No HTML, no CSS, no JavaScript, and no PHP needed!

  1. Go to Toolset → Dashboard and click the Create Content Template button in the Houses row.
  2. Use the WordPress Block Editor to design your template.
  3. Choose blocks from the Toolset section for any part of the template that displays fields (not static elements). For example, use Toolset’s Heading block for any heading that will display a field. Toolset adds the option to display dynamic content also from the WordPress core and most popular 3rd-party plugins.
  4. Enable Dynamic Sources for blocks that should display fields of the post that the template displays.
Displaying the post title in a template for single “property” posts
Displaying the post title in a template for single “property” posts

You can modify and style your template in many ways. For example, you can arrange content in columns, display parts of the template conditionally, display a list of related posts, and much more.

5. Create a dynamic slider to feature your property images

A slider is a great way to showcase your properties by displaying multiple images of each one.

Using Toolset, you can easily create complex sliders featuring transitions without any complex PHP coding.

  1. Once you’ve edited or created a page, post, or template, insert the View block and create a new View.
  2. In the View-creation wizard, enable pagination and in the Select View Loop Style section, choose the Unformatted (last) option.
  3. In the last step, select the post type for which you want to display posts.
  4. Click to finish the wizard and your View is ready.
A Slider View dynamically set to display images associated with each property

Displaying post fields and apply custom styling

  1. Insert a Container block so that you can add a background to your slider. For example, you can set the slide’s background to be a dynamic image coming from the post’s featured image.
  2. Use Toolset blocks to add other dynamic fields to your slider, like the post title.

With Toolset Sliders, besides displaying post fields and applying custom styling, you can tweak your slider with an array of other options, such as making your View slide automatically and changing the pagination style.

6. Create a post-relationship to connect your houses with your agents

Post relationships are an important yet underrated part of any website. With post relationships, you can connect different types of content with one another.

To find out more about how they help you check out our guide to creating post relationships using Toolset and OceanWP.

On our real estate website, we have houses and estate agents. Let’s create a post relationship between them.

Create the post relationship

  1. Go to Toolset Relationships and click Add New at the top.
  2. The Toolset relationships wizard opens up. For our agents and properties, we want a “one-to-many relationship” as one agent will be in charge of multiple properties.
  3. Select the post types that will form the relationship.
Selecting a one-to-many post relationship between an agent and their properties
Selecting a one-to-many post relationship between an agent and their properties

4. Select if you want to limit the number of posts you can assign. For example, you might want each agent to only have a maximum of 20 houses assigned to them.

Limiting the number of posts (houses/properties) an agent can be assigned)
Limiting the number of posts (houses/properties) an agent can be assigned)

5. Name your relationship.

6. Review your relationships and click Finish.

How to assign properties to an agent

Now we can start creating specific connections between our properties and estate agents. 

  1. Navigate to an agent’s page from the admin menu 
  2. A new section will have appeared at the bottom of the page called Agent Property. Click Connect existing Property and then type to find the name of a property or select it from the available list.
Connecting an agent to properties they manage from within the agent's profile page
Connecting an agent to properties they manage from within the agent’s profile page

3. Click Update to save your post. Now, when you visit the agent’s page, any properties you’ve connected to them will be listed. Also, if you edit one of these properties’ pages, you will see that the relationship has been displayed at both ends – the agent will be listed on the property’s page too.

Creating a View to Display Your Post Relationship

There are two ways to display your list of post relationships:

  • Display a list of the “many” related posts in one-to-many and many-to-many relationships.
  • In one-to-many relationships, display fields that belong to the “one” side.

Displaying many related items

In our example, agents have many properties, so we’ll use a View to display them.

  1. Navigate to your “Agents” Content Template
  2. Insert a View block and create a new View
  3. Select to display the post type you need (ie, properties) and then select the option to display Properties that belong to the current Agent.
  4. Use blocks to design the output for your View. Because the View is already set to display related posts, you don’t need to select the relationship in blocks you use to display dynamic content.
Inserting a View Loop to Display Many Properties for one Agent
Inserting a View Loop to Display Many Properties for one Agent

Displaying one related item (parent)

  1. Navigate to your “Properties” Content Template.
  2. You can use any Toolset block to display parent information.
  3. In the block properties, select the parent from Post Source.
  4. Select the field you would like to display.

7. How to add an advanced search so users can easily find their best-matched properties

An advanced custom search is the best way for your users to find exactly what they are looking for. With multiple filters, they will be able to select the best house based on their personal requirements.

  1. Start by inserting a View block into a page.
  2. In the View creation wizard, enable the Search option.
Enabling the custom search when creating a new View
Enabling the custom search when creating a new View

3. On the next page, select “Properties” under Choose content this View will display.

4. After finishing the View creation wizard there is a View Search section in the View’s editing area. Use the available buttons to add a custom search field, insert submit and reset buttons, or add other blocks.

Customizing and adding blocks to design the front-end search section
Customizing and adding blocks to design the front-end search section

For example, you can click to Add Search Field and use the Select a Field dropdown. Select which content type you want users to be able to search by and click Next.

Adding a custom search field

5. You can now use the right sidebar to tweak the options for this search field. This includes the main field settings, label and style options.

6. Now we’re ready to create the section where the results will be displayed. We do this by adding blocks in the View Loop area of the editor.

7. Click Add Block.

8. Choose a block that you want to use as part of your search results. For example, you could use the Heading block to display property titles in the search results.

Adding blocks within a View Loop to design the search results
Adding blocks within a View Loop to design the search results

Remember to use the orange Toolset Blocks, which will enable you to use dynamic sources for the fields

Choosing a Toolset Heading block and setting it as dynamic
Choosing a Toolset Heading block and setting it as dynamic

8. Display maps to show the locations of properties

Maps are a great way of helping users immediately understand the exact location of a property. 
  1. To start creating a map, navigate to the page or template where you want to display the map. Insert the Toolset Map block. If you need to set an API key, Google provides detailed instructions on how to do so.
  2. In the Source for the marker section enable Dynamic Source.
  3. In the Post Source dropdown select “Current Property”. Then, in the Source dropdown, select any custom field that contains an address to show it on the map
Dynamically generating a properties address to be displayed in Map-form
Dynamically generating a properties address to be displayed in Map-form

9. Build a front-end form for users to submit their own content

Finally, you may want users to provide their own listings to advertise on your real estate website. One of the easiest ways to do this is through a form on the front-end that features all of the fields you’ll want them to fill out.

Creating the form couldn’t be simpler thanks to Toolset’s drag-and-drop editor.

  1. Go to Toolset → Post Forms and click Add New.
  2. Click Continue in the Forms wizard and enter the name for your form.
  3. Edit the settings for your form including:
    1. The post type they will add submissions to
    2. The status of the post once it’s submitted
    3. What users see after they submit the form (you can also add a message as I have done below)
Editing settings for your form
Editing settings for your form

4. Now you reach the drag-and-drop editor where you can decide what fields go and where. Here you can also use the CSS Editor and JS Editor fields to style your form. There are also a number of extra elements which you can add.

Designing the layout of your form through a drag-and-drop editor
Designing the layout of your form through a drag-and-drop editor

5. On the next page you can add any email notifications that you want users or editors to receive at any stage. Below I added an email to send to users when their listing goes live.

Adding email notifications for users who have completed the form
Adding email notifications for users who have completed the form

6. Click Finish and your form is now ready to be displayed. 

7. All you need to do to display the form is go to the page you want the form added to, add the Toolset Form block, and select the form you’ve just created for the dropdown list.

A form on the front-end for users to submit their own properties
A form on the front-end for users to submit their own properties

Next steps

Once you’ve worked through these nine key steps for building your own real estate website, you can make your site even more impressive by taking Toolset’s real estate online course.

The easy-to-understand modules make up a comprehensive step-by-step guide – full of handy videos – that tells you everything you need to know to build a remarkable real estate website.

What has your experience been of building a real estate website? Let us know in the comments!

This Post Has 4 Comments

  1. Hey,

    Wow, this is interesting option for building a real estate agency’s website. I was already consulting coders for this task, but now I will consider building it myself with OceanWP & Toolset. Great news, waiting for client to start the project 🙂

  2. zaynting

    That’s very nice of you, recently I am searching for someone to build me a website like this but now I can make my website

  3. Risinia

    Very nice informative content. I found very interesting while reading this article. Very detailed explanation about real estate website. Thanks for sharing this.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.