Home › Forums › Front-end Issues › 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"]
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/
The topic ‘Add Class and ID to Tab Field’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.