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 , 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:
- The WordPress plugins required
- Creating Custom Post Types
- Creating Custom Taxonomy
- Custom theme templates for your Single Post Page
- Custom WordPress Loop
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:
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:
– GeneratePress Premium:
– Crocoblock:
– Pre Order Brizy Pro NOW:
– OCEANWP:
– ELEMENTOR PRO:
– WPBakery Page Builder (Formerly VISUAL COMPOSER):
– DIVI 3 Page Builder:
– DIVI Theme:
– SMART SLIDER 3:
– Astra Pro:
– CSSHERO:
– SLIDER REVOLUTION 5 –
– IMPREZA THEME:
