Support

Account

Home Forums Backend Issues (wp-admin) Field IDs in admin using keys instead of label, ACF4 vs ACF5

Solved

Field IDs in admin using keys instead of label, ACF4 vs ACF5

  • Hi, I use field IDs as CSS selectors in order to style the admin.
    However, the generated input fields seem to differ between ACF4 and ACF5.
    Instead of acf-field-label it’s now acf-field-key:

    ACF4
    <input type="text" id="acf-field-phone">

    ACF5
    <input type="text" id="acf-field_5c46914201e5e">

    Change log seems to suggest such a change in 5.0, although it’s a bit vague (Overhaul of HTML & CSS)
    Is there a way to revert this change?
    Thanks

  • No there is not. The problem with field names is that they can be repeated (even when they shouldn’t be) allowing multiple fields to end up with the same ID which is not allowed. The field key on the other hand is always unique.

    If you want to use custom styling in the admin it is better to assign a wrapper class or id to the field. You can also target an input in a specific field using something like

    
    [data-name="phone"] .acf-input input {
      ...
    }
    
  • The problem with field names is that they can be repeated (even when they shouldn’t be) allowing multiple fields to end up with the same ID which is not allowed.

    I figured that was the reason

    …it is better to assign a wrapper class or id to the field.

    I never knew that was an option. Problem solved, thanks.

    You can also target an input in a specific field using something like [data-name=”phone”]

    That’s a nice choice as well. Thanks a lot.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.