WordPress is by far the most popular website building platform on the web today, and while it is incredibly powerful, combining it with Advanced Custom Fields (ACF) or the Pro version of ACF alongside Elementor Pro, gives you the perfect environment to build feature-rich WordPress Websites.

What is Advanced Custom Fields Pro?

ACF Pro is a WordPress plugin that provides an easy way of adding custom meta boxes (custom fields of information) to your WordPress websites Posts or Pages and displays that information anywhere you want on your website by either editing the theme template files or by using a page builder like Elementor Pro to do this visually and without the need to edit the files of your theme.

This Tutorial

In this weeks ‘In-Depth’ tutorial, I’ll be demonstrating and taking you step-by-step through the process of building a beautifully designed real estate style listing section for your site.

I’ll take you through the following key areas:

Creating Custom Post Types & Custom Taxonomies with CPT UI

The first stage of creating our custom listing is to setup and define our new Custom Post Type using CPT UI. This will allow us to easily manage all our new property listings on our real estate website.

Once you have the Custom Post Type created, we’ll move on to organising all our properties using a Custom WordPress Taxonomy. This will allow us to easily group our properties by their property type. For example, a House, Apartment, Flat, Penthouse, etc.

Advanced Custom Fields Pro – Adding Custom Post Meta Fields

Now that we have our newly defined Custom Post Type, we need to add in our new meta fields. This is easily achieved through ACF Pro and by specifying that our new fields only apply to our new Custom Post Type, we can avoid any confusion if we intend to add in normal WordPress posts later down the line.

One of the great things about ACF is the ability to use conditional logic to control what fields we see based on certain criteria.

In our example real estate listing, we only want to show the number of cars that can be parked in a garage if the property listing actually has a garage.

This is easily achieved by setting up a condition to say that if the garage entry is set to yes, display our number of cars field. If it’s set to no, then the field is empty.

Super cool huh?

Custom Single Post Template

Elementor Pro’s Theme Builder provides a super easy and powerful method for creating custom post templates to use alongside our custom post types.

In this section, we’ll take a look over the entire process of designing and configuring our property details page and populating it with our custom post meta boxes. 

Using this method, we can get as creative as we like and ensure we have a consistent look and feel to our entire real estate property details page, configured to work seamlessly with our custom information.

Custom WordPress Loop

While we’ve taken a look at building a simple filterable portfolio layout for our properties, in this section we’ll see how to easily use the power of Ele Custom Skins for Elementor and build our own bespoke property listings page.

Using a custom WordPress loop means we can get as creative as we want, add in additional information pulled directly from our custom post type data and style it however we want.

I love this free plugin as it opens up such huge potential for creating more unique website designs with Elementor Pro and WordPress.

In Closing

So, there we have our final design alongside our fully featured custom post type. All built without touching a single line of code or editing WordPress files.

If you’d like to see more ACF Pro and Elementor tutorials, check out our dedicated section of ACF tutorials available here on WPTuts.

ACF Playlist: https://bit.ly/2X1YS0v

Skill Level
Intermediate
Time Required
1 Hour

AFFILIATE DOWNLOADS
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.

CartFlows Pro: https://bit.ly/2KuxhCm
GeneratePress Premium: http://bit.ly/2Ydn1SE
Crocoblock: https://bit.ly/2BD7e6E
Pre Order Brizy Pro NOW: https://bit.ly/2Ji97r8
OCEANWP: http://bit.ly/2fRHBr0
ELEMENTOR PRO: http://bit.ly/2u3mzYX
WPBakery Page Builder (Formerly VISUAL COMPOSER): https://bit.ly/2NVbVNP
DIVI 3 Page Builder: http://bit.ly/2HiiDcE
DIVI Theme: http://bit.ly/2G8JMiA
SMART SLIDER 3: http://bit.ly/2G0G1vB
Astra Pro: http://bit.ly/2zruoKn
CSSHERO: http://bit.ly/2qbrRl6
SLIDER REVOLUTION 5https://bit.ly/2NYr8NV
IMPREZA THEME: https://bit.ly/2mpK9wp

Enjoy this article and want more?

Why not join our weekly newsletter and we’ll let you know when we add more awesome Wordpress tutorials and articles?

Close Menu

We use cookies to ensure that we give you the best experience on our website.