I love Advanced Custom Fields and find it to be an essential tool for developing with WordPress. I ran into a challenge recently using Repeaters where I needed to be able to target particular rows for JavaScript. I wanted to be able to depend on each row having a unique identifier that would not change. In the past I have done things like set a counter in PHP and then use that to generate an ID for each Repeater row as I loop through them. However, using this method, IDs of rows are dependent on their order. If a user was to reorder their Repeater rows, this would cause the row IDs to shift as well.
Fortunately, there is a repository on GitHub that creates a field for ACF unique IDs:
https://github.com/philipnewcomer/ACF-Unique-ID-Field
I added this field to a project and it worked wonderfully.
I downloaded the PHP file that contains the code for the field, src/ACF_Field_Unique_ID.php. I have an includes folder in my theme, inc, so I placed the PHP file within that folder. Then, I called this PHP file in my functions.php file:
include get_template_directory() . '/inc/ACF_Field_Unique_ID.php';The instructions in GitHub says that it needs to be initialized so I added that to my functions.php file as well:
// Initialize functionality to give us unique IDs for repeaters.
PhilipNewcomer\ACF_Unique_ID_Field\ACF_Field_Unique_ID::init();With just those two small additions to our theme, ACF will show “Unique ID” as a field type option:
When I create a Unique ID field, I hide it from the administration screen. After all, this is really for the developer of the site and there is no need to have it cluttering up the interface for our end users. Add acf-hidden as a Wrapper class to prevent it from being displayed. That said, before hiding it, you can edit a Repeater that you are adding the Unique ID to just to verify that it is working as expected.
When first editing a Repeater row, the Unique ID field will show up as a read-only text input:
Upon saving the post the Repeater is on, a unique ID is generated and then displayed in the read-only field:
Accessing the Unique ID field in code is just like accessing other Repeater sub fields. Here is my code to grab the Unique ID of the current Repeater row:
$unique_id = get_sub_field( 'unique_id' );I can then add that to my HTML as an ID attribute:
<div id="<?php echo esc_attr( $unique_id ); ?>" class="container-flex page-component">When we look at the outputted HTML on the front-end, each Repeater row will have a unique identifier associated with it. Take a look with your browser’s Web Inspector tool:
This ID can now be confidently targeted within your JavaScript or CSS.
Thank you for very usefull post. The only problem I see with this plugin is that it wont show the id field in GraphQL / WPGraphQL.
Do you know how to solve this issue, please?
Thank you
Hmmmm… unfortunately I haven’t played around with GraphQL / WPGraphQL at all, to be honest. It has been one of those “want to look into when I have time” items but I haven’t found the time yet.
For anyone still looking for a solution to this, I managed it by adding:
// support Unique ID fields
add_filter('wpgraphql_acf_register_graphql_field', function ($field_config, $type_name, $field_name, $config) {
if (isset($config['acf_field']['type']) && 'unique_id' === $config['acf_field']['type']) {
$field_config['type'] = 'string';
$resolve = $field_config['resolve'];
}
return $field_config;
}, 10, 4);
Thank you very much! You helped me a lot.. now finally I can use graphql with unique id. Thanks!
Thank you for this great tool! It has been a lifesaver. One question. When I use ACF Pro’s duplicate row feature on a repeater field, I noticed the unique ID fields were cloned exactly too and no longer “unique”. I’d love for them to be blank on cloning so when I save, your tool adds the ID. Or it might work for unique IDs to be created when I duplicate the row instead of duplicating them exactly. Do you know if that new feature on ACF can be hooked into and this detail fixed? https://www.advancedcustomfields.com/blog/acf-5-9-0-release-inner-blocks-ui-improvements-and-exciting-features/
Hello Karena, Thanks for the comment. All of the work was actually done by someone else. I was just fortunate enough to stumble onto the code at GitHub and do a write-up of how I used it. You definitely bring up a good point, though. I will try to take a look to see if there might be a way to refresh that field when the record is duplicated. Unfortunately I have pretty limited time at the moment but I will try to get to it as soon as possible. Thanks again for reaching out!
Hi Scott,
I have stuck on the following:
// Initialize functionality to give us unique IDs for repeaters.
PhilipNewcomer\ACF_Unique_ID_Field\ACF_Field_Unique_ID::init();
Adding that line the way it is creates a critical error. And I don’t have “PhilipNewcomer” folder in my structure.
What am I doing wrong? How can I perform this initialization? Thanks!