How to build a real estate listings management system without code using Elementor Pro and ACF Pro

How to build a real estate listings management system without code using Elementor Pro and ACF Pro

How to build a real estate listings management system without code using Elementor Pro and ACF Pro

This tutorial is going to take you step-by-step through the process of using 2 of the best plugins for WordPress, Elementor Pro and ACF Pro to build a real estate listings management system. While we use real estate listings as a relatable and interesting example of “data that needs management”, you can apply what you learn here to an events listing site, services listings, anything where the goal is to have a list of records, and each record needs to have different fields to store data.

First off let’s answer the fundamental question, why not just build Elementor pages, seeing as we’re already using Elementor? The answer is, because it’s wrong, wrong, wrong! Okay some further insight, let’s say your client is a car dealership, a small one, they only have 20 cars in their inventory. It might be tempting to build 20 pages using a template, copy those pages to keep things consistent, and call it a day. No coding, no plugins, easy. The problem first off, is now the client is reliant on building and removing those pages as a way to manage their inventory. Whether its’ a realtor, a car dealer, or any business with listing data, they may have several changes to make every single day. Having a work-flow that is simple and easy is important. While using the Elementor tools is something they can learn and might even enjoy for landing pages and other marketing pages, when it comes to “Record Data” a well organized admin approach is going to be 5-10x faster. Less labor, less chance for mistakes, better solution.

For this tutorial you will need the PRO versions of both Elementor and ACF. Both plugins have free versions that are very good in their own right, but we need some of the Pro Features found in ACF Pro to create a really solid UX, and we need the Elementor Pro theme builder features to create the front-end. We’ll also be using a 3rd plugin called CPTUI which is used to register a Custom Post Type (CPT).

Let’s start with an overview of the process to create our real estate listings system.

  1. First we’ll register our “Property” Custom Post Type. This is going to create a Property Management section in the WP admin, which will look almost identical at first to the “Post” or “Page” sections. So we’ll have a list of posts, we’ll have an add new post button, we can do what is sometimes called CRUD, which is Create/Read/Update/Delete our posts. All this is provided automatically by WordPress, so remember to thank WP for being awesomely powerful. And if it’s the first time you have created a CPT, congrats on just unlocking the power of extending WP.
  2. We will create an ACF field group and attach it to our Property CPT so that when we add or edit properties we will see real estate fields like “number of bedrooms”, “number of bathrooms”, and image fields to showcase the property including a gallery of images.
  3. We will use Elementor Pro theme builder to create a custom single post template which will be used to show 1 single property. We’ll use the native Elementor dynamic data features to pull in our custom property fields from ACF. Then when we hit a blockade with showcasing some of our data, we’ll add a 4th plugin to the project, ACFL (ACF Elementor) that will serve to display some of our more advanced ACF field data.
  4. At this 4th phase of the project we already have a great admin listings system for our properties and we can display them one by one using our single template, what we’re missing is that all important “listings page” which will show a summary of all our listings. In this stage we’ll use the Elementor Posts widget to display our listings in a grid.
  5. In the final stage we’ll talk about ways to take the project to the “next level”, features we might like to add to it and variations on this approach that we might use in similar projects.

Let’s start by installing our 4 primary plugins, Elementor, Elementor Pro, ACF Pro and CPTUI. The result should look like this on a fresh install of WP, but if you’re building this onto an existing site just check for each plugin being installed and updated.

Now let’s head over to the CPTUI page where we can add our property CPT. You’ll find the CPTUI section in the WP Admin at the very bottom usually right under ACF Fields as shown in this image.

CPTUI developers deserve credit for a great plugin and putting their admin pages at the bottom of the menu out of the way, because this isn’t something we use everyday once the site is built.

Complete the CPTUI form as shown below and click the “Add Post Type” button after you’ve filled it out. The “slug” for our CPT is “property”, then we use “Properties” as the plural label and just “Property” as the single label. These labels will all show up in the admin to identify our custom posts!

Let’s add 3 testing properties, under Properties menu click on “Add New” Just enter a title and some text as shown below and then click Publish.

After you’ve added 3 test properties your Property List page (All Properties from the Property admin menu) should look like this below. Congrats you’ve created and tested a CPT, if it’s your first time doing that I hope you can see how this is a very powerful aspect of the WordPress system.

Next, we’re going to use ACF to add custom property fields that only show up on our property posts. By the way, if you’re curious how your property posts look right now, click on the “view” link from any of the test posts. Depending on the theme you have installed (we’re using Hello Elementor on the test site) you’ll see something like this by default:

Perfect, project complete. Seriously not much going on here so far, let’s keep going!

Now we’re heading over to ACF to add our custom field group. You’ll find ACF under the menu item “Custom Fields” near the bottom of the admin menu, usually under Settings. Click “Add New Group”.

We’re going to start by setting our title for the field group to “Property Fields” and then skip the fields section and set our Location Settings. Choose “Property” from the list of post types, the other 2 location fields we leave as default so as you can see in the screenshot below it will read “Post Type is equal to Property”. Click the Publish button to save those initial changes. We now have a field group saved, and it’s setup to appear on our property posts. Next we’ll start adding fields.

ACF fields Location settings control where the fields appear.

Now it’s time to start adding fields. Let’s begin with bedrooms and baths. Both of these are going to be number fields. To add a field in ACF click the “Add Field” button at the bottom right side of the fields section.

Use the + Add Field button to open the add field form

We only need to fill out the first 3 options to make our field, we give our field a Label (Bedrooms), you’ll find the Name is automatically filled out using a lowercase version of the name (leave it as bedrooms), then we choose “Number” as the field type.

We only need to set the Field Label, then choose Number as the Field Type. The Field Name is set for us by ACF based on the label we provide. All the other options we can skip. It’s that easy to do basic field setup in ACF.

Because the ACF interface builds fields without any page refreshes, there is no save button within the field interface itself. Use the “Close Field” button to collapse the field edit form so that you can continue adding more fields. It’s a good idea when adding fields to click “Publish” to actually save your work every couple of fields just to avoid losing them if you were to close your tab.

The next field we add is for “Baths”, so you repeat the process of adding the Bedrooms field just using “Baths” as the label. However, because our next field is also a number field, why not just duplicate the Bedrooms field and then edit it? That’s often the faster way when working with a range of similar ACF fields, though either approach is quite fast. Learning to use “duplicate” is especially useful later if you get into more advanced field settings, where you might want another field based on one that has a lot of settings already created. The duplicate button appears when you hover over any field to show it’s context menu, as shown in the screenshot below.

When you use duplicate, make sure you edit both the Field Label (Baths) and Field Name (baths). You won’t need to change the field type.

This is what your entire ACF Field Group should now look like with 2 fields (Bedrooms and Baths) setup and of course the Location Settings to show on our Property posts. Make sure you click Publish if you haven’t already, and next we’re going to head over to the Properties and try out the new fields!

Presuming you have Gutenberg installed you’ll find when you edit one of our test properties that the ACF custom fields are at the bottom of the page. Now that’s okay, but if we don’t plan to have long text that requires Gutenberg, we can remove Gutenberg editor support from our custom post type using settings in CPTUI. This is something we usually do when delivering a data-driven solution to a client because it makes for a more app-like UX.

So we’ll do that next, first enter your bedrooms and baths and click save post. You’ll notice if you preview the post however, so far, these custom fields won’t appear. Some of this is like magic, but it’s not that magical, WordPress doesn’t know about these custom fields and neither does our theme. We’re going to have to render our fields using Elementor widgets later on.

Now we are heading back over to the CPTUI. Click on the Edit Post Types tab in the CPTUI page, and we’re going to scroll down… way down the page to the “Supports” option where you’ll see a list of checkboxes starting with title, editor and featured image. We want to un-check the “editor” option to remove support for Gutenberg. That will only affect our custom property post type, Gutenberg will still be available on blog posts or other post types.

Remember to save the changes with the save button at the bottom of the page.

Now when we return to edit any of our property posts we should see Gutenberg gone, and the right sidebar is also simplified.

Now we certainly could add more property fields and do any other customizations here on the back-end of our system working in the WP Admin. But isn’t time we started to see a visual result from our work, on the front-end? So let’s start to complete our solution and deliver our properties to the front-end by using the Elementor Pro theme builder.

Leave a Reply

Your email address will not be published. Required fields are marked *

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

admin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

admin