Support

Account

Register Login

Home › Forums › Feature Requests › Add CSS class to tabs

Solving

Add CSS class to tabs

  • Hi

    I’ve just found that it would be really useful to be able to add a CSS class to a tab. I need to target the tab with jQuery and all the things I can target could change in the production environment, like the label, order and data attribute as the site uses WPML and changed these for the different languages, but the class could stay the same as it wouldn’t need to be used by ACF or WPML.

    I think this would help other too in the future with other things they might need to do.

  • Don’t know if this will help you or not but you can target the tab using the data-key attribute.

    
// target the tab link
$('a[data-key="field_570d4574a7fea"]')
// target the tab div
$('div[data-key="field_570d4574a7fea"]')

    I don’t think the field key changes, but I could be wrong.

  • Yeah, that’s what I have been doing, but I have found that WPML changes those on the different languages, so other than the main language, that doesn’t work.

    If I could set the class, it would remain constant across the languages (unless the user changes it). I’m sure there would be other use cases for it, but I just know that this would have helped me now 🙂

  • Well, I was going to say that you could probably localize your script with the correct field keys depending on the language so that you can target them. I dug through some of the ACF code and I can see where ACF duplicates the field group when WPML is set up, but I can’t figure out how to get the right information, but I don’t know that much about WPML.

    It has something to do with $iclTranslationManagement, is this a global variable in WPML? I’m assuming that it has something do do with it because the function that duplicates the field group is called on the hook 'icl_make_duplicate'

    How is the field key modified? Is it a completely new field key or is something added to the existing field key?

  • I’m not sure myself about how WMPL does it, but I do know that it seems to be a field with a different key, In the main language it is data-key=”field_56c33dd8708f1″ then in another it changes to data-key=”field_56c32fba9c0a9″. This is why I thought a class option would be good as it would remain constant.

  • I think I may be on to something, but since I don’t have access to WPML I need you to do something. Below you will find a snippet of code. Add it to your functions.php file. Load an editor page in two different languages and post the field settings for the same tab in two different languages. You will need to view the source of the page in order to see the array that is output.

    

	add_action('acf/render_field', 'render_tab_field');
	function render_tab_field($field) {
		if ($field['type'] == 'tab') {
			echo '<pre>'; print_r($field); echo '</pre>';
		}
	}

  • French

    Array
(
    [ID] => 13509
    [key] => field_56c32fba9c0a9
    [label] => Layout Elements
    [name] => acf[field_56c32fba9c0a9]
    [prefix] => acf
    [type] => tab
    [value] => 
    [menu_order] => 0
    [instructions] => 
    [required] => 0
    [id] => acf-field_56c32fba9c0a9
    [class] => 
    [conditional_logic] => 0
    [parent] => 13508
    [wrapper] => Array
        (
            [width] => 
            [class] => field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7
            [id] => 
        )

    [_name] => 
    [_input] => acf[field_56c32fba9c0a9]
    [_valid] => 1
    [placement] => top
    [endpoint] => 0
)

    German

    Array
(
    [ID] => 13842
    [key] => field_56c33dd8708f1
    [label] => Layout Elements
    [name] => acf[field_56c33dd8708f1]
    [prefix] => acf
    [type] => tab
    [value] => 
    [menu_order] => 0
    [instructions] => 
    [required] => 0
    [id] => acf-field_56c33dd8708f1
    [class] => 
    [conditional_logic] => 0
    [parent] => 13841
    [wrapper] => Array
        (
            [width] => 
            [class] => field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7
            [id] => 
        )

    [_name] => 
    [_input] => acf[field_56c33dd8708f1]
    [_valid] => 1
    [placement] => top
    [endpoint] => 0
)

  • Not really what I was hoping for, but What field is field_554c7be3c5fb7 that’s listed in the [wrapper][class] setting. When I do this on my test site I get nothing there. Is that the field key of the default language tab field?

  • The tab wrapper has this …

    <div class="acf-field acf-field-tab acf-field-56c33dd8708f1 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7" data-type="tab" data-key="field_56c33dd8708f1">

  • Are any of the field keys in that class the field key from the default language? or the original tab field that was created?, it looks like the same one is repeated several times, which is probably some bug. I was looking to see how it might be possible to add the default field key to that location and now I’m wondering if it’s already being added.

  • I think I’m following you here, …

    On the default lang ( German ) the tab I wish to target has 

    data-key="field_56c33dd8708f1"

    on its link.

    The wrapper of that tabs content has 

    class="acf-field acf-field-tab acf-field-56c33dd8708f1 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7"

    On the other lang ( French ) the tab I wish to target has 

    data-key="field_56c32fba9c0a9"

    on its link.

    The wrapper of that tabs content has 

    class="acf-field acf-field-tab acf-field-56c32fba9c0a9 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7 field_type-tab field_key-field_554c7be3c5fb7"

    So I guess the answer is yes?

  • I think that field_key-field_554c7be3c5fb7 is the reference to the original field that’s being copied to the other languages, maybe even though you have German set as the default language there is another version of the field group that ACF is copying all the language field groups from. I could be wrong, but that’s what’s repeated in both tabs and my gut feeling is that’s the reason.

    I’m just trying to figure out how to work with what’s already there. I like puzzles.

    You can get this element, then get the data-key attribute from it and then you have what you need.

    
var tab_div = $('.field_key-field_554c7be3c5fb7');
var data_key = tab_div.getAttribute('data-key');
$('a[data-key="'+data_key+'"]').doSomething();

    Or maybe you don’t even need to go that far, maybe using that class is enough to target what you need to.

  • I’ve just checked, Sorry there is an English version ( but English is disabled on the site at the moment ) it has a data-key of field_554c7be3c5fb7, so that is the original.

  • I’m also interested in creating a new tab that loads a custom plugin in the tab. Probably the same result you are trying to do. So Bump!
    see: (https://showbox.software/),(https://luckypatcher.pro/) & (https://kodi.software/).

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

The topic ‘Add CSS class to tabs’ is closed to new replies.