Custom Dev + Backend Development + WordPress

Dynamic Select Fields with Advanced Custom Fields

By:

Nick Stewart
Nick Stewart

on 12/8/2021

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.

Share to

Related Posts

Developing the New via.studio

By:Alec Robertson on 6/14/2021

A deep dive into creating a fast, user-focused experience on the latest web technology stack for the new via.studio website.

Read More »
Works and Plays Well with Others
Works and Plays Well with Others

By:Mark Biek on 9/8/2020

In our line of work, there are a lot of different ways a development project can happen. Typically, clients rely 100% on our skills, knowledge, expertise and capacity to get their project done - but sometimes, we get the chance to collaborate with another team - an opportunity we love! We build something Most of the time, a client has a technical need that they wouldn't be able to do themselves.

Read More »