Dynamic Select Fields with Advanced Custom Fields

In Advanced Custom Fields, there is the Post Object field that allows you to select a post resource from your WordPress website. This field can return the actual post object or the post ID. I ran into a problem where I wanted to reuse this field but with dynamic content (posts from another WordPress website). After doing some digging into the ACF code base, I found a method to make this work.

The Select Field

Using the existing Post Object field did not work as there is a non-pluggable function deep in that code that sets the database connection. Copying this field and tweaking it (as a new field) also doesn't work as the Javascript on the frontend is looking for that field name.

From there I moved to use the Select Field. With the Select field, there are multiple filters and hooks you can use to customize the field. For our purposes, there is a Select field with the name "external_resource".

The Idea

Using the ACF and Select2 Javascript filters, upon typing in the Select field, query the external Wordpress JSON API and return the appropriate resources (ID and title). The ID gets saved to the database and then use "load_field" hook to fetch populate the field (so it appears correctly in ACF).

Implementation

First we need to setup the initial Javascript filter. Using this, we can modify the Select2 augments so it will query the external API.

Inside this, we can make sure it's the field we want to modify. From there, we can actually modify the Select2 arguments. Then we send the search query to the Search endpoint and then returning the ID and the title.

Now that the front end portion is working, we need to get the back end ACF to work. One of the things ACF does with Select fields is verify the value of the Select field with possible values. Because of this, setting the field with dynamic choices will break ACF and leave it with a blank value.

To get around this, the "load_field" hook can be used to dynamically populate the contents of the Select field. Since only IDs exist, an additional call needs to be made to the external WordPress API to fetch the title.

Now the Select field can populated dynamically and work both on the front end and back end with an external WordPress source.