How to build a real estate website using Toolset Real Estate and OceanWP

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 be difficult 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 will need.

Below we will show you how to build the following features which you will need on your real estate website:

• 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 the steps as you read them you can download your own free test real estate website built using Toolset and OceanWP to play around with.

Why we’re using Toolset Real Estate and OceanWP

Toolset Real Estate is part of Toolset which provides you 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 your website down.

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 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 for you to experiment on.

Let’s get started building our 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.
2. We now need to name our post type. Here’s what we entered to create our “Houses” 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 will give us a template with sections that we’ll want to fill in to describe each house. 

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 Create field group next to the “Houses” custom post type which we created.
2. Click on Create field group again and Add New Field so that we can start adding our custom fields.
3. Now we need to decide what type of custom field we want. For example, a custom field for “Build year” will be a number. Below are the options:

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

5. Once you have added all of your fields, click Save Field Group and each time you edit a “House” post you will see the fields to fill in.

3. Create your custom taxonomies

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

Below is how to create taxonomies to differentiate between houses which are for sale and houses for rent.

1. On the Toolset Dashboard click on Add custom taxonomy.
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

We can now see our available taxonomies on the right when we edit or create a “Houses” post type.

4. Create a template to display the properties

We now have the core components we need to show off our properties but an important question remains, how do we actually display them on the front-end?

This is why we need to 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’s drag and drop editor called Layouts.

Layouts is based on the Bootstrap grid which allows you to organize the structure of your page using rows and columns.

To add data to your page you need to add a cell. There are two types of cells which you will want to use:

1. The visual editor – For adding brand new text or inserting shortcodes for our custom fields and taxonomies. This is the one we would use to insert the “Houses” custom types.
2. The post content – To add any content that comes from your post body. For example, the description of each house.

Here’s how I created the custom fields section in the template for the “Houses” posts.

1. Go to Toolset Dashboard and click Create template next to the “Houses” custom post type. You will now be taken to the Toolset Layouts drag and drop editor where you can design the structure of your page.
2. Select how many columns you want each cell to take up. In my layout, the custom fields I created before will be 9 columns wide.

3. You can now see the list of cell types. Select the Visual Editor.

4. Click on Fields and Views and scroll down until you find the set of fields you want to add. Mine is called Property details – House.

5. Click Insert Shortcode

6. We can now see the shortcodes in our editor cell. Now when a user clicks on a house to view they will see each of the information for each of our custom fields.

7. Click Apply and our cell is ready.

I added a few other cells using similar steps as above. Here’s how my layout looks on the front-end. The red box is the cell with the custom fields which we created above.

5. Create a slider to feature your properties

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

The best thing about using Toolset Real Estate is that you can easily create complex sliders with transitions without any complex PHP coding.

Below I’ll show you how:

1. Go to Toolset -> Views and click Add New.
2. Select Display the results as a slider and give it a name.

3. In the Query section choose what content your slider will display, how many posts it will display and if you want to add any query filters so that only specific houses that match your criteria are displayed.

4. Now we can design the individual slides. Head to Loop editor where you can add the fields that you want to display. Click Fields and Views and you can decide which ones you want to add.
5. The final stage of the design is the transition between each slide. For this slider I have selected Pagination enabled with automatic AJAX transition but there are also other options.

6. Finally, we need to add the slider. Head to wherever you want the slider to appear, click the Fields and Views button and select your slider.

Here is how my slider looks on the front-end:

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 each other.

Doing so provides a number of advantages to you when it comes to building and running your website. 

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 houses we want a “one to many relationship” as one agent will be in charge of multiple houses.
3. Select which post types will form the relationship. Below is what I chose:

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

5. Name your relationship.

6. Review your relationships and click Finish.

Assign houses to an estate agent 

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

1. Head to the houses post type which you want to edit.

2. A new section has appeared called agent_house. Click Connect existing agent and you can select from one of the agents which we created.

Side note: We created an “Agents” custom post type, fields and taxonomies just like we did for the “Houses” content which we demonstrated at the top of this article. To see how our “Agents” content looks download a free test real estate website to see all of our content.

3. Click Update to save your post.

Display your post-relationship

Now we need to make sure that when a user clicks on a house they can see the estate agent that is connected to it.

We can go back to the template we’d previously created for our houses.

1. Add a cell to display the connected estate agent.

2.  Search for the post relationship you created and click Insert shortcode.

7. How to add an advanced search for users to find the best property for them

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.

Below we’ll show you how we created a custom search and displayed it on one of our pages.

Creating the search

1. Go to Toolset -> Layouts and click Add New.
2. Click to create a cell and add the cell called View content lists, custom searches, custom sliders.
3. Select the Display the results using a custom search option and click Create view.
4. Under Content selection choose the post type which you want to search. I selected my “Houses” custom post type.
5. Under Custom search settings decide how you want to update results – live AJAX updates or a page refresh.
6. Under Search and pagination pick the filters you want users to be able to adjust. Click on New filter and select the ones you want to add.

7. You can also add other options such as Submit, Reset and Spinner (to display a graphic when it’s loading) buttons for your search bar.

8. Under the CSS editor and JS editor, you can add code to style the search.

Designing how the search results look

Now that our search is ready we need to think about how the results will look.

1. Under the Loop Editor click on Loop Wizard to start editing.

2. Choose how you want to display your results. I selected the Bootstrap grid.

3. Click Finish and you should now see your fields in the Loop Editor.

4. Click Save View at the bottom of the page.

5. Click Save on your Layout and it is now ready to be displayed on the front-end.

Displaying your custom search

1. Head to the page where you want your search to appear and select the Fields and Views button.
2. Select the View for the search you have just created.
3. Choose whether you want to include just the search form or the search results as well. As you can see below, I’ve chosen to put them on separate pages.

4. Click save and you can now see how it all looks on the front end.

Here’s how the custom search on the real estate test website looks.

8. Display maps to show the locations of properties

Maps are a great way of helping users understand immediately the exact location of a property. 

Below we’ll show you how to add a map to display a house’s location.

Create the map

1. Head to the page or template where you want to display the map and click Fields and Views.
2. Under Toolset Maps click on Map.

3. Click on Map zoom and center and click Set zoom center and center manually to choose where the map focuses on.

4. Enter the coordinates for your location.

4. Click Insert shortcode

5. Check that the map_id is the same for both the marker and the map so that they both show up.

Your map should be ready now to view on the front-end. Here is how my map for individual properties looks.

There are many other things you can do to customize your maps such as custom styling, street view and distance filters. Check out our guide to displaying WordPress content on maps to see what you can achieve.

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

Finally, we’ll want users to provide their own listings for us to advertise on our real estate website. One of the easiest ways to do this is by filling out a form on the front-end with all of the fields you’ll want them to include.

Creating the form couldn’t be simpler thanks to Toolset’s drag and drop editor. Below we show you how to create it.

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)

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 that you can add.

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.

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

7. Just like with our maps, all you need to do to display the form is select Fields and Views and find the form you just created to insert the shortcode.

Here is how our real estate form looks on the front-end.

Try out Toolset Real Estate with OceanWP for yourself

Now that you have the nine key steps you can follow to build a real estate website it’s time to try it out for yourself.

Don’t forget that the best way to practice is by downloading your free real estate test website with all of the features built in to see how it works. It’s powered by Toolset Real Estate and OceanWP so you will be getting first-hand experience of the features.

The next step is to download Toolset Real Estate and OceanWP and get started with your own.

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