Support

Account

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

Solving

Add Class and ID to Tab Field

    • theshae

    • November 29, 2016 at 2:24 am

    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

    .acf-tab-button[data-key-"field_584024f7f7cfe"]

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

    [data-type="tab"][data-key="field_584024f7f7cfe"]

    • my3uka

    • March 26, 2020 at 12:02 am

    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 https://www.advancedcustomfields.com/resources/adding-custom-settings-fields/

    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 https://www.advancedcustomfields.com/resources/acf-format_value/

Viewing 4 posts - 1 through 4 (of 4 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.