Create a directory using Elementor, ACF & CPT UI
ฝัง
- เผยแพร่เมื่อ 3 ก.ค. 2024
- In this mini course we learn how to build a directory using Custom Post Type UI (CPT UI), Advanced Custom Fields (ACF), Elementor Custom Skin & Elementor Pro.
We’ll first create a custom post type and taxonomy using CPT UI, followed by creating the custom fields required for our listings using ACF.
We’ll then use a combination of Elementor and Elementor Custom Skin to create the design for our directory template files, so that it fits in perfectly with our existing website.
The tutorial will cover:
✔︎ The difference between custom post types, taxonomies & custom fields
✔︎ How to create custom posts, taxonomies & custom fields
✔︎ Creating single post and archive templates
✔︎ Creating a loop template
✔︎ And much more!
Plugins used in this tutorial:
Advanced Custom Fields en-gb.wordpress.org/plugins/a...
Custom Post Type UI en-gb.wordpress.org/plugins/c...
Elementor Custom Skin en-gb.wordpress.org/plugins/e...
Useful links:
How to install a template kit • How to Use the Element...
Getting started with Elementor • Course: Getting Starte...
Theme builder tutorials • Elementor Theme Builde...
Timestamps:
00:00 Introduction
00:40 Preview of what we’re going to build
01:50 What are custom post types, taxonomies & custom fields?
04:10 Create a custom post type
08:35 Create a custom taxonomy
09:55 Create custom fields
14:00 Populate first custom post
15:25 Create single post template
24:00 Create archive template
25:45 Create loop template
29:55 Add directory link to menu
30:30 Final results
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com
Get Elementor Pro: elementor.com/pro
👋🏼 Help us improve by answering this short survey: elemn.to/survey-time
![WEBINAR: Level Up Your Design Skills With Sticky Elements In Elementor Pro [ADVANCED]](http://i.ytimg.com/vi/XiQV4nE8vu8/mqdefault.jpg)
![WEBINAR: Level Up Your Design Skills With Sticky Elements In Elementor Pro [ADVANCED]](/img/tr.png)
Amazing tutorial! Appreciate how much ground you covered so efficiently.
Thank you dears, this was the very best tutorial I could imagine. Now, 2 years have gone, and ACF has the CPT feature. Also, loops are integrated in Elementor. So, it'd be nice to have a new, updated tutorial consistent with the actual version of Elementor.
Hello @GerardoFallani could you make a tutorial?
Amazing. This bailed me out of a situation where i thought I over promised. Thank you so much.
This is amazing and very well might be the answer I've been searching for and stressing over for what feels like a very long time. Almost in tears by the end of this - you have no idea LOL! You covered everything so perfectly and in easy language and I just can only say "thank you"!
This video elevated my knowledge of ACF and custom posts to the next level! Thank you, thank you, thank you!
A very precise tutorial. To the point and well produced. Thank you so much.
Brilliant tutorial! Well explained, and the summary in the end was just the icing on the cake
FANTASTIC! I LOVE ELEMENTOR!
One of the best videos ever made !!
Awesome! Thanks for the tutorial!
Wow, this tutorial is so clear and well done, albeit a bit robotic. Thanks Elementor!
Brilliant, just what I was attempting to create. Will be trying this tomorrow.
Very helpful, thank you so much. Using this to customize a site for a client, this is exactly the info I needed.
Great detailed tutorial! Thank you!!
Excellent tutorial.
Thx for tutorial. It was so illustrative and illuminating.
More tutorials like this, please!
Great tutorial!
Fantastic, thank you!
Hi, Elementor Pro should at least have the following features natively:
1. Mega Menu
2. Custom Loop
3. Ability to add co-authors
Dependence on third-party plugins for every feature makes our websites so heavy & effects the load speed.
Facets & advanced search form & ajax filters ? 😅👍🏻
@@ArnaudKeyen yes agree😁
Great Tutorial
Amazing and informative
You are really awesome!!
This is exactly what I was looking for, thank you 😀
Solid gold :)
Nice job!
This is a great tutorial and shows how to clearly build a directory. Question: is there a way to display a grid of the custom taxonomies? For example, your tutorial shows a new taxonomy called “Industry”, with categories such as “food and drink”. Is there a way to make an archive-like grid to show each type of Industry, and how many posts it contains? This would be so handy for catalogues or directories where the user wants to browse across categories.
great! using those plugin for a wile and with ACF frontdend for ele,ento, we can create pages with those custome field and style it as we want. that page can be show to any user/role to create new posts
Thank you!
Thank you. For me helpfull.
Thank you soo much
thank you ashley
awesome tutorial! muchas gracias elementor #elementoRules!
Thanks ❤️
Why doesn't Elementor have its own custom loop builder? It's long overdue.
@@ashleywhitehair9752 That would be awesome!
@@ashleywhitehair9752 when?
@@ashleywhitehair9752 it would be great! Keep up the good work!!!
Excellent tutorial. Can you expand to show a menu of taxonomies if you want to list available business industries for people to select and then view all the businesses in that taxonomy?
Great explanation! Keep on going 👍
One question: after i create all this elements, can i uninstall those plugins without loosing the visuality of the website?
I don't need many plugins on my website
Such unfriendly workflow for such a simple idea. Hope for future updates (On webflow/WIX/Squarespace this entire process takes 2 minutes).
You are right, i am shocked by this shit here
Just a heads up if you are doing the tutorial and can't see the Business in the Menu 30:25. Check your screen options top right, drop it down and select the 'Businesses'
This tut was very helpful and I've used it to great success thank you! Question I have is where to modify the code to make the Email and Links custom fields clickable? By default they are not.Thanks!
30:40 as you can see, the DIRECTORY item in the nav menu does not stay highlighted when a selected post is displayed. Here it seems OK but it many cases it is a UX problem. The user should know where they are.
Great. Thanks for your video
But I have a problem to use acf content repeater or group content and other type of acf field to use in elementor dynamic section , Is there any solution to use these field in elementor? For example I want to make an accordion to have dynamic contenet and add its part dynamically with acf content repeater
I'll be grateful to you if you guid me about that
great tutorial. why 3edparty plugin needed? why elementor not have skins?
Hi, what if, we need an archive page based on the categories of that Custom Post Type ? An example would be the listing the various posts under Food and Drink. Thank you!
Thank you so much for this tutorial. I've followed this and built a directory. At first, I thought I would just add the listings, but I've come to the conclusion business owners will need to be able to create and manage their own. Is there a way of pulling the add listing form into a page, or have business owners sign up themselves so they can manage their own listing? Thanks for any help with this.
Could you please create a video about the parenting feature
Is "Repeater Fields/Sub Fields" on the wish list? Or can you do a vid showing how to add (ACF) repeater sub fields to a Elementor Post Template? That would be awesome! :)
What if the custom taxonomy (industry) had featured image field (avalaible thanks to acf)? How we can display the featured image on the business page?
Great Tut. Thanks. Using the example above is it possible to: 1) List related posts created by the same directory author? 2) List related woocommerce products created by the same directory author? I am assuming we will need to assign an author to each woocommerce product and post.
Hi, thanks the valuble tutorial. I am trying to replicate using a clean WP install, but I do not have the "Post Summary" option in my text editor dynamic tags that you use in creating the loop template? How do I enable it or is it part of Mindey? Thanks
This tutorial was very helpful and helped solve a very big blocker. However, do you have any tips on how to give the cards equal height e.g as you have in the tutorial 29:58 where all the buttons are aligned to the bottom and the cards adjust to same height. Considering the post heading and other custom fields will not always have same number of words.
Thank you very much for the tutorial, I was looking for it to solve some doubts.
A curious thing happens to me with the URL field in the ACF field "Title" I don't get the url option, but it does in the ACF field of "Link", what am I doing wrong? Thanks.
Sir , when Elementor going to integrate Custom Post Types, Custom Fields, Custom Taxonomies, Custom Setting Page, Mega Menu , Custom post loop, User Profile builder etc ?
Many advance functions are missing in Elementor, even not in Elementor Pro.
I said so because if Elementor comes up with its own such advance functions, we will not have to depend on third party plugins.
I hope you are listening.
Stay safe, stay healthy.
With warm regards,
Vivek Kumar ( Bihar , India )
Hi thank you for the video, may I know if there any setting to keep the directory list in alphabetical order? especially when we in archive page ?
I'm glad about this video, very good content, but have in mind that custom loop should be native from elementor. That is just a easy tool to be added.
@@ashleywhitehair9752 have you released it yet? I am still using ele custom skin today.
Why would we connect our time widget to the ACF field for dynamic content directly?
Can you show how to add filter option to this page?
Hello, thanks for this video ! Is it possible to create custom post for woocommerce vendors ? My goal is to allow vendors to fill their own informations, such as their biography, their specialty, ect.
hello. I set it up by referring to the video, but some things didn't work, so I'm asking.
1. After creating the post archive, I put the shortcode on a separate page, but the entire loop list is not loaded. Can't I put it on a separate page as a shortcode?
2. If you can put shortcodes, can you put two archive shortcodes on one page?
3. Archive is usually a concept of a template, but is a post archive a concept of a page at the time of creation?
please answer about my question. thank you.
Hello, how to allow the business to publish posts and then show all the posts on the business profile?
can the taxonomy slug and post type slug be the same thing?
Thank you so much for great video. But i am having a problem that my custom fields are showing in side bar only instead of main panel. how can i solve this?
Hey Techi, have you joined the Elementor Community? It's a great place to ask questions like this, and get advice from other web creators. You can even share screenshots and links there: facebook.com/groups/Elementors. Alternatively, if you are a pro subscriber, you can contact support for help from my.elementor.com.
I've created custom field(resident status) with ACF in "User Form", "Add/Edit". The additional data set appeared in the user add/edit page, and I am able to populate it with Frontend Admin ACF forms. But i can't seem to retrieve the data even when i choose dynamic data>ACF Field> Resident status, please help?
What about flexible content fields
Hi , How Can i create the sub-category page by using the parent category
Do we still need to have the plugin Custom Post Type UI. I think Advance Custom Fields plugin now let you create custom post! insn't it? please anyone if can help it will be great!
How can you copy elements in "All Businesses"? For example, all my records are typical, and filling out the form every time is too laborious. But I don't see the button - "Copy"
🗽
Hi this tutorial is fantastic, however I have regions and would like to be able to have a search bar for the area? Is there another tutorial for that?
You will need a plugin like GeoDirectory for that
18:41 .. how tot hide that field if there are no values .. 🤔
Is there a way to export this page as PDF with same layout ?
Why aint features like Loop already implemented in Elementor Pro?
when you have to use a plugin because your own builder cant do loops lol.
Was thinking the same thing lol! I think a native loop builder is coming though
@@loucasloucaides yes I think it is, very very long overdue.
What about filter?
how to open all post in industry, and how to show posts only in Medical or Yoga? How to create template for this view?
Good day and thanks for the great explanations. There is one problem I can not solve.
The new social icons links are not taken over as soon as I create a new blog and insert the corresponding new links.
Can you please urgently show me the solution.
Thanks and greetings
Hey Fatma, these kinds of things can be difficult to troubleshoot without screenshots. Have you joined the Elementor Community? It's a great place to ask questions like this, and get solid advice from other web creators. And you can share screenshots and links there as well: facebook.com/groups/Elementors.
How can I make a template when users click the taxonomy link?
Can anybody tell me how I can make anybody add postings to that?
Hello, congratulations, excellent video. I need a guide to include 2 buttons in the single of a directory, one to make phone calls and another for WhatsApp chat
this preferably from two numerical ACF fields that contain the different telephone numbers.
as I would do it?
Can the author be set on the post? I would then like to give access to the post depending on the author. :)
But there is big problem, there is no option to create custom post archive for taxonomies, for example, if we click on Food Category of business directory this will start showing normal blog archive page, please elementor team guide me, I'm working on a website, tired of creating custom archive page for every category
Next time it's better to specify in the title Elementor PRO is needed (when you don't, we expect regular Elementor)
21:00 Unfortunately the Social Icons are always shown. No matter if they have a link or not.
Can I import a CSV File to import listings?
You will need a plugin like GeoDirectory for that 🙂
Wondeful video but when you will add the loop feature built-in in elementor? All these years we have to depend and pay 3rd party creators in order to have these abilities. I hope to listen our voice!
@@ashleywhitehair9752 Thanks you!
@@ashleywhitehair9752 Thank you very much!
@@ashleywhitehair9752 when?
@@ashleywhitehair9752 where is it? 😕
Can we add tags, not just categories in Custom Post? If so how?
At 9:32, if you skip that step and leave Hierarchical as 'False', it will behave as a tag instead of a category.
Thank you 🙏
29:58 after build the listing, the next common sense is do a filter, when we have hundred or thousand of listing. this should be a common sense
do you know how one would go about that? is there another plugin for that?
when can we use the ACF repeater field in Elementor?
We need a better menu!
yeah how about make them one (1) single plugin and do something valuable for once.
there are already plugins that do this and they do it better. GeoDirectory for example...
This doesnt show how someone can be a subscriber to add listings, manage listings, delete listings, get notifications of upcoming expiry, etc... like a proper directory theme does
Or better a directory plugin which can be used with Elementor. Like GeoDirectory for example... 🙂
use jet engine
Is there a way to set up filtered searches of the directories? I'm loving this capability to create my dream directory. I paid a couple thousand dollars for this to be done a few years ago.