Home Forums Front-end Issues Add Class and ID to Tab Field


Add Class and ID to Tab Field

  • It would be nice to add Class and ID to Tab Field

  • There are 2 parts to a tab field, the tab button and the tab field which is actually hidden. You can add a wrapper class and ID to the tab field using a filter.

      add_filter('acf/load_field/key=field_584024f7f7cfe', 'add_class_to_my_tab');
      function add_class_to_my_tab($field) {
        //echo '<pre>'; print_r($field); echo '</pre>';
        $field['wrapper'] = array(
          'width' => '',
          'class' => 'my-tab-class',
          'id' => 'my-tab-id'
        return $field;

    There isn’t any way to add a class or id to the tab button.

    The tab field is different from other fields because it is split into 2 parts, the tab button and the tab field.

    If you want to target the tab button for something like CSS or JS then you’d need to use a selector that looks something like


    You could also target the tab wrapper of the field itself with a selector like


  • Hi, how to add class or id in field via acf plugin setting?

    What i mean? When i creating the new field, it’s got setting fields like “Wrapper Attributes”: width, class and id – inputs.
    I adding my own class into input field “class”. When i display my fields in front-end. My class didn’t add.

    I use child Twenty Nineteen theme for local test. Included all functions acf_form_head, then acf_from.
    Why Wrapper Attributes didn’t work? What i did wrong?

  • Are you talking about this

    ACF will not automatically add any custom settings that you create to anything. You need to create other filters to alter the way the field behaves. For example, if you want to somehow use the new setting on the front end then you’d create an acf/format_value filter

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

The topic ‘Add Class and ID to Tab Field’ is closed to new replies.