Before You Begin: This guide assumes you have already installed the Clutch WordPress Plugin and connected your WordPress site to Clutch. If you haven’t done this yet, follow the Getting Started Guide first.
This guide walks you through integrating Advanced Custom Fields (ACF) with Clutch to dynamically display content from WordPress. You’ll start with basic custom fields on a page, then move on to creating and using a Custom Post Type (CPT) for structured content.
By the end, you will be able to:
- Install and enable ACF in WordPress
- Create custom fields for a page
- Create a Custom Post Type (CPT)
- Fetch ACF data through Clutch’s built-in WordPress queries
- Bind ACF data to components in Clutch
1. Installing ACF in WordPress
Before using ACF with Clutch, ensure it’s installed and activated in WordPress.
Step 1: Install the ACF Plugin
- In WordPress, go to Plugins > Add New.
- Search for Advanced Custom Fields.
- Click Install Now, then Activate.
2. Creating Custom Fields for a Page
In this section, you'll create custom fields for a page, such as an address, contact information, or other structured data.
Step 1: Create a Custom Field Group
- In WordPress, go to ACF > Field Groups in the left sidebar.
- Click Add New and enter a Field Group Title (e.g., “Page Information”).
- Click + Add Field and configure the following:
Field Name | Field Type |
Address | Text |
Phone Number | Text |
Opening Hours | Repeater (Subfields: Day, Time) |
- Under Location Rules, set Show this field group if → Post Type is Page.
- Click Publish to save the field group.
Step 2: Enable ACF Fields in the REST API
- In the Group Settings tab, toggle Show in REST API to On.
- Click Update to save.
Once enabled, ACF data will be included in REST API responses under the
acf object.3. Fetching and Displaying ACF Data in Clutch
Reminder: Ensure that your WordPress site is properly connected to Clutch using the Clutch WordPress Plugin. If you haven’t set this up yet, follow the Getting Started Guide before proceeding.
Step 1: Add a Query in Clutch
- Open your WordPress-connected project in Clutch.
- Go to Queries in the left sidebar.
- Click + Add Query.
- Select WordPress Query.
- Choose getCustomPostBySlug (Clutch’s built-in query).
- Ensure ACF fields appear in the response.
Step 2: Bind ACF Data to Clutch Components
- Bind Address to a Text Component
- Select the Text component.
- Click ⚡ next to the Text Property.
- Choose acf>address.
- Bind Opening Hours to a Repeater Component
- Drag a Repeater List onto the page.
- Click ⚡ next to the data source.
- Choose acf>opening_hours.
- Inside the repeater, bind day and time to text components.
- Bind Featured Image
- Select an Image component.
- Click ⚡ next to src.
- Choose acf>featured_image.
4. Creating and Using a Custom Post Type (CPT)
Step 1: Create a Custom Post Type
- In WordPress, go to ACF > Post Types in the left sidebar.
- Click Add New Post Type.
- Fill in the required fields:
- Plural Label:
Items - Singular Label:
Item - Post Type Key:
custom-item
- Ensure Public is enabled.
- Click Save Changes.
Step 2: Create ACF Fields for Custom Post Type
- Go to Custom Fields > Add New.
- Name it Item Details.
- Click + Add Field and create:
Field Name | Field Type |
Title | Text |
Description | Text Area |
Category | Select |
Image | Image |
- Under Location Rules, set Show this field group if → Post Type is Custom Item.
- Click Publish.
5. Fetching and Displaying Custom Post Type Data in Clutch
Step 1: Add a Query in Clutch
- Open Clutch and go to Queries.
- Click + Add Query → WordPress Query.
- Choose getCollection and set Post Type = custom-item.
- Save the query.
Step 2: Bind Custom Post Data to Components
- Bind Items to a List
- Drag a Repeater onto the page.
- Click ⚡ and select the getCollection(custom-item) query.
- Bind Title and Description
- Inside the repeater, bind acf.title and acf.description.
Conclusion
- Installed and enabled ACF in WordPress
- Created custom fields for a page
- Created and used a Custom Post Type (CPT)
- Fetched ACF data through Clutch
- Bound dynamic ACF data to Clutch components
This setup allows you to manage and display structured content from WordPress using ACF + Clutch efficiently.