Single CPT template in Genesis to display ACF custom fields including a Gallery field as a Slider

In this article I share details on how we can display custom fields added via Advanced Custom Fields Pro (commercial plugin) on the single page of a Projects Custom Post Type in Genesis.

Here are the design goals:

• Images uploaded in the backend should appear as a slider at the left.
• If no images are uploaded in the Gallery field, then Featured Image attached to the entry should appear at the left
• If no Featured Image has been attached, a default image should appear at the left
• Regular custom fields like Client Name, Date Completed appear to the right of slider.
• The entire right div and field labels should only appear if the field values are not empty.
• Project's content to appear below.
• Links to Previous and Next projects.

The Workflow:

1. Create Projects CPT and 'Project Type' custom taxonomy.
2. Create a 'Client Details' custom fields group containing these custom fields:
   • Client Name (Text)
   • Date Completed (Date Picker)
   • Techniques Used (Wysiwyg Editor)
   • Project Link (Url)
   • Project Images (Gallery)
3. Set this field group to show in Project CPT.
4. Set up FlexSlider jQuery script for the slider.
5. Create single template file for Projects CPT.
6. Style it up.

Create Projects Custom Post Type

Install Types (or your favorite CPT creation/management plugin) and set up a Projects CPT like so:

Ensure that Thumbnail support and has_archive are ticked.

Create Project Type taxonomy

[Optional] Create a Project Type custom taxonomy linked to Projects CPT like so:

If you would like this taxonomy to work like categories rather than tags, set this to be Hierarchical.

Advanced Custom Fields Pro

Install and activate Advanced Custom Fields Pro.

Create a Client Details group like so: