Anchor links to scroll down to a specific ACF repeater

• mtymus

• April 16, 2020 at 1:14 am

I have a repeater field which acts as a grid layout system for pages on our website which can add 1, 2 or 3 column layout rows to our site etc. Some of these pages we have created have got quite long.

This is working great but a new requirement has been suggested on longer pages to use HTML Anchor links to navigate to a certain ACF repeater. This needs to be visible on the WP user area against the field so that the user can identify the unique identifier ID and use it to create the anchor links at the top of the page.

Can we add a unique ID against a repeater element which we can add to the custom template and make this ID visible within the WP admin area so a logged-in user can copy and create the link?

Many thanks in advance.

• John Huebner

• April 17, 2020 at 11:57 pm

I do this, but I do it manually.

The first thing that I do is create a text field that will hold my unique ID.

Then I make that field readonly

add_filter('acf/prepare_field/key=field_XXXXXXX', /* field key of the text field */ function($field) {
  $field['readonly'] = true;
  return $field;
});

Then I create an acf/save_post filter that updates the field with a unique ID value

add_action('acf/save_post', function($post_id) {
  // do whatever you need to get a field value
  // how you do this is dependent on how your fields
  // so there is no specific example
  // test the value of your id field to see if it is empty
  // if it is then generate a unique ID
  // sleep 1 second to ensure the value is unique
  sleep(1);
  // generate unique ID
  // https://www.php.net/manual/en/function.uniqid.php
  $id = uniqid('row-');
  // update the field with the new ID.
});

Or you could simple add a text field and allow them to enter their own ID, but then you have to worry about it they are entering something unique or not.

In either case, then what you need to do is to alter your HTML code output to add this id to the element

<div id="<?php the_field('your_field_name'); ?>">
  your content here
</div>

• sophiel

• March 31, 2022 at 9:36 am

I am struggling with the same “issue”, and I tried John Huebner’s example, but the function to generate the id doesn’t work (the value of the variable is null when echoed).

add_filter('acf/prepare_field/key=field_62440b6868c96', 'is_readonly');

function is_readonly($card_group_id) {
    $card_group_id['readonly'] = true;
    return $card_group_id;
}

add_action('acf/save_post',  'generate_cardgroup_id');

$post_id = get_the_ID();

function generate_cardgroup_id($post_id){
    if (!$rows['card_group_id']){
        $rows['card_group_id'] = uniqid($more_entropy);
    }
    $rows['card_group_id'] = 1234;
}

Please could someone have a look? I’m really frustrated 🙁