Creating Unique IDs for ACF Repeaters

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:

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.

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.

0 thoughts on “Creating Unique IDs for ACF Repeaters

  • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>