Mastering Advanced Custom Fields with WordPress

Visit us at https://howarddc.com/

Intro/Background Topics

1. What is ACF?
2. Why not use the new WordPress content editor (Gutenberg)?
3. Why not use Elementor/Divi/etc?
4. Are there performance considerations to this approach?

Our Goals When Building A Site

1. Making an intuitive, simple backend experience (field width, accordions, tabs, etc)
2. Anticipating client needs without "over-developing"
3. Designing our layouts to be modular and extensible
4. Using native WordPress functions as much as possible
5. Keeping SEO, accessibility, pagespeed, and semantics in mind as we develop

Tutorial Steps

1. Create a ‘landing page’ template
2. Prep the theme for Local JSON
3. Create our custom field group for our template
4. Create a new Flexible Content field
5. For each layout, create:
-- The layout in ACF
-- A corresponding template part
-- A corresponding SCSS file

Notes Links
Bootstrap Documentation https://getbootstrap.com/docs/4.6/getting-started/introduction/

ACF Documentation https://www.advancedcustomfields.com/resources/

ACF Image Field https://www.advancedcustomfields.com/resources/image/
wp_get_attachment_image() https://developer.wordpress.org/reference/functions/wp_get_attachment_image/
wp_get_attachment_image_src() https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

ACF Link Field https://www.advancedcustomfields.com/resources/link/

ACF WYSIWYG Field https://www.advancedcustomfields.com/resources/wysiwyg-editor

ACF Relationship and/or Post Object Field
- https://www.advancedcustomfields.com/resources/relationship
- https://www.advancedcustomfields.com/resources/post-object

Other/Advanced Uses for potential tutorial...
Options Pages https://www.advancedcustomfields.com/resources/options-page/
Taxonomy Archives
Nav Menu Settings
Javascript API
Front-end forms
Hooks and Filters