Searching for a WordPress real estate plugin? Did you know you can display your real estate listings with Formidable views?
Why use a 3rd party WordPress real estate plugin? Today I'll show you how to build a real estate listing system within Formidable itself!
This tutorial is loosely based on Formidable's documentation on how to display real estate listings. (It is worth a read too if you can find a moment.) You can also download our Real Estate Listings example and import it onto your site for an extra quick setup.
Step 1: Load the Real Estate Listing form template
Formidable comes with a real estate listing form template. So this is a great place to start. The form template is fully customizable to suit your own specific needs and it offers the common features an online real estate listings form would have.
Go to your Forms admin dashboard, click the "Add New" button, and select the template in the starting screen. Use the form shortcode to place this form on the page of your choice.
For this example I'll use the vanilla form template without any modifications. However, if you need extra fields or would like to adjust the layout to make your real estate form fit perfectly in your website, now is the time to do it.
Step 2: Create your listings page
To display your real estate listings on your WordPress website you need to create a View. This View will display the submitted properties in a grid and allow site visitors to click on them to see more details. Start by going to 'Formidable' → 'Views' and select 'Add New'.
Give your new View a title. This won't be visible on the site but is handy for reference. A descriptive title also makes it easier to find your View if you have a lot of them.
To begin setting up your new View, first select your Real Estate listings form in the 'Use Entries from Form' drop-down and select 'Both (Dynamic)' for the Display Format.
In the Advanced Settings box near the bottom of the page, set your 'Detail Page Slug'. The demo uses 'Parameter Name': 'listing' and 'Parameter Value': 'Key'.
Add content to the listings view
Next, setup the page and the form data in the grid and detail views. To do this, add HTML into the 'Before Content', 'Content', and 'After Content' boxes on the Listing Page View. This 'Content' section will be repeated for each listing. Also, add HTML to the 'Dynamic Content' box - this displays the detailed individual listing. You can find sample HTML in the Real Estate Listings demo and in the real estate listings doc. All the HTML can be customized to suit your needs and make your Real Estate listings look exactly how you would like. DON'T FORGET: swap out text like 'photo-url' and 'list-price' in the example code for the IDs of your corresponding fields.
Finally, save your view and insert the view into a page using the [display-frm-data id=x filter=1] shortcode. More information is available on publishing views here.
Troubleshooting Tip: If your [detaillink] doesn't work, go into your WordPress Settings and save your Permalinks. This is usually the culprit!
Step 3: Enter property details and enjoy!
This is where the real fun starts. Once you've entered your first 6 or 7 properties you can start to see how the layout & design looks and tweak the code in your view to suit.
The HTML for the listings page begins with <div class="listings_list one-third"> which is the correct class for a three column layout on the Formidable site. You may need to adjust this to suit your theme or maybe use a table layout.
Layout styling depends a lot on your theme so I can't provide specific customizations here. But your theme documentation should provide all the instructions you need.
Or if you are using the Bootstrap styling on your site, the Bootstrap grids would be great.
Once your listing page is perfected, work the same magic on your details page. The details page contains a lot more information about your property, the in depth real estate listing. You can even insert a NextGen image gallery to show off the home properly.
Bonus - Create a 'Featured Real Estate Listings' widget
A sidebar widget is a great way to highlight new or featured properties. This is simple to do as well. You don't need a WordPress real estate plugin to display a widget with listings.
Setting this up starts in a very similar way as the main listings.
- Go to 'Formidable' → "Views" and select 'Add New'.
- Give the new view a title and a description for reference, if you would like.
- Select your Real Estate listings form from the 'Use Entries from Form' drop-down.
Here is where it changes a little. This time you should select 'All Entries' for the Display Format if you would like to show all featured listings in a long list. OR select 'Single Entry' if you would like to randomly display a single featured listing that is different each time the page loads.
Design Tip: Personally, I prefer to display a random single listing. If you display all the featured properties it can overwhelm your sidebar or footer widget and look messy, especially when viewed on smaller screens.
As before, add HTML into the 'Before Content', 'Content', and 'After Content' boxes as needed. You can also add a link in the 'Before Content' or 'After Content' to view all listings. In the 'Advanced Settings' at the bottom of the view, set the 'Order' to 'Random'.
Only include featured listings
Finally, add a filter in the 'Filter Entries' section. Select your featured check box from the dropdown, 'is not equal to', and leave the last box blank. This is saying if the featured field is blank, then don't show it in the list.
Show the featured listing on your page
Save your view and copy the shortcode for your view, i.e. [display-frm-data id=x filter=1]. Go to 'Appearance' → 'Widgets' and drag a 'Text' widget into your sidebar. Insert your view shortcode in the text widget, and save your widget.
Now your widget will display your featured properties!
Are you leasing the listed properties? Read 5 easy steps to the perfect online lease agreement form.
You don't need a separate WordPress Real Estate Plugin
As you can see, it's simple to create a completely customizable real estate listings page. Formidable Forms Pro is all you need. This tutorial has focused on functionality, so you may need to take some time to tweak your design and make it beautiful. I'm sure you'll produce beautiful real estate listings for your WordPress website.
Download the real estate demo and get your listings up today.
Thank you very much for sharing your ideas. Providing tutorials in various trades is very useful for the users of the plugin. Thank you for giving us such support in our projects.
I am delighted with my purchase and the team that is behind Formidable.