Advanced Custom Fields & Gutenberg Beginners Guide

Beginners Guide to build a directory/listings website using Gutenberg FSE + ACF + Custom Post Type UI + Stackable Blocks.

Learn how to create a directory or listings website using WordPress Full Site Editing.

This step-by-step guide is aimed at beginners who want to build more complex WordPress websites, without touching any code. In addition, you won't need to use a page builder like Elementor, because this functionality is now being built into WordPress core.

There are three main steps that I'll take you through
Step 1 - Create the custom post type
Step 2 - Create the custom fields
Step 3 - Create the custom page layouts

The WordPress plugins I used

Good Full Site Editing (FSE) Themes

Other Useful Links

Timeline
0:00 - Intro
0:10 - What we are going to build
0:20 - The plugins and theme you will need
1:40 - The 3 steps to build a WordPress listings website
1:50 - Step 1, Create a custom post type
2:40 - Step 2, Create your custom fields
4:55 - Step 3, Create custom post templates
11:09 - Display the listings template
11:50 - Display the individual Film post

[dareadel]

I have been searching for a tutorial on this acf/custom fields/WP 5.9+. Out of the blue Youtube listed this as a "suggested" video to watch. I can now see myself doing so much with this short tutorial. Thank you so much.

[geraldheagney]

Again, you are showing the potential that I will be using as I redesign my sites.

[paulhildmann]

Wow, FSE is going to be a game-changer! Thanks for the tutorial.

[SpanishJohn]

This is amazing, thanks man. Probably someone already said this, but now its possible to accomplish all this directly with ACF only!

[tomnelson]

Just YAY! Grabbing stackable now. Thanks for this!

[rale]

Thank you for the great video.
Though, I believe that there was one thing missing. And that is filtering and search on the archive page. A listing website is incomplete without filtering. The user will want to sort by: director, date, genre, rating...
Consider making a part 2 of this

At some point, someone probably will create plugin / block for displaying dynamic data. But, that will be a bad day for all these companies that reserve dynamic data handling for the PRO versions of their plugins: Kadence, GenerateBlocks, Corocoblock, Elementor, Spectra, ACF Blocks, Stackable...

[slingsandarrows]

This is a great tutorial. I was able to recreate this with the team members of my office. I did do some updating as like others have stated not all these plugins are needed any longer. What I would like to know is if it's possible to open the single post page in a popup modal instead of another page? I've been looking all over for a solution and I haven't found anything yet.

[anitatdf]

Thank you! great video! I am now struggling with ACF relationship fields and Stackable Pro. Let's say I create a CPT for Actors and I set a relationship (object or ID) with the CPT "films" but only the ones they participated in. Then I would like to create a template to display a single actor information with some custom fields and the movies from the relationship field. Any suggestions?

[DebanjanMukherjeeanimator]

Who thinks Jamie Is a Life Saver raise your hands 🙋‍♂

[urbas]

Hello, there is some free plugin for creating dynamic fields?

[lscottbutler]

Thank you so much for this. Bye Bye Elementor and Crocoblock. Quick question. When I go to appearance / templates there isn't a drop down for templates. Any ideas. Thanks

[raquelocasio]

Thanks for the tutorial! Using WordPress v5.9 I couldn't get the query block to work for the single post template. It would display all the posts instead of only a single post. My workaround was using post fields for the title, and shortcode for the ACF data. The query block for the listings template worked fine though.

[tmtrusty]

Thanks for another great video Jamie. I'm trying to use it with WP 6.3.1 and a Twenty Twenty-three Child theme. The new templates I created are displaying in the Editor, but are not available in the page settings when I create a new page. Any thoughts? Thanks again, Tom

[jamesp]

Is this production ready now in 2022? looking to ditch Elementor finally with ACF, Gravity Forms and a Guttenberg theme. Any recommendations for a theme to increase speed (especially for Google/SEO) and make the transition smoother?

[annetravel]

This is really good. I have been looking for a way to present similar information. I will try this, thank you.

[Perchpole]

Jamie, great video. Just one question, how does stackable handle an ACF datepicker date? GenerateBlocks has similar features to Stackable. However it doesn't yet allow users to translate a stored ACF date (YYYYMMDD) into a nice date. This is a big drawback.

[rmcellig]

I'm starting to think that I can import my radio shows into WordPress. I have a CSV file with headers like episode name, year, playlist etc... Is this possible in WordPress?

[linomariano]

Hello, what plugin is responsible for accessing dynamic fields and inserting them into Gutenberg?

[jthomaskay]

Have you used Blockbase by Automattic? I can not find where to selece Post Type in that theme. I see Advanced Custom Fields, but not CPT. Great videos!

[lachlanblack]

Thanks Jamie for yet another great tutorial. Bit of a tangent, but what font pair did you use?