I have a select field like
tomato : Tomato
banana : Banana
peach : Peach
Now in the backend the <li> elements have generic classes like
<li class="select2-results__option ..." role="treeitem" aria-selected="true"Tomato</li>
Is it possible to give each <li> it’s class like:
<li class="select2-results__option ... tomato" role="treeitem" aria-selected="true"Tomato</li>
?
You could do something like this and just add the classes to the call in your theme:
<?php
// vars
$field = get_field_object('your_select_field');
$value = $field['value'];
$label = $field['choices'][ $value ];
?>
<p>Items: <span class="select2-results__option item-<?php echo $value; ?> <?php echo $value; ?>"><?php echo $label; ?></span></p>
You can add whatever default classes you need and then the particular select option item classes programmatically via the field object.
Does that help?
I am talking about the backend. I have a “Stylised UI” list and want to give the li elements the class to give them an icon.
I know I could do this with javascript/jQuery but maybe there is a filter or semething similar … ?
Ahhhh. I didn’t realize this was for the admin. While there might be an ACF filter I am not aware of one that will do what you need.
In lieu of that, you would have to load in your own javascript to the admin using the admin_enqueue_scripts hook and assign your classes via jQuery that way.
There may be another way (so someone could definitely chime in here) however I can’t think of anything via a hook.
I did some looking into this and the only way this can be done is using JavaScript. Getting at the fields themselves is difficult due to the fact that the UI is generated using JavaScript by Select2.
@john: Any idea how to get this working? I load my backend.js with admin_enqueue_scripts and try to add a class to alle the “select2-results__option” li elements – nothing happens.
$(document).ready(function){
$("#select2-acf-field_5a314116c7592-results li").addClass('myclasshere');
});
Okay guys, just made it a little bit less complicated now, no javascript needed. Just a ACF (modern) select field, added all my icons data like this:
...
<i class="icon-bucket">icon-bucket</i>
<i class="icon-gradient">icon-gradient</i>
<i class="icon-gradient2">icon-gradient2</i>
...
Only three for this example, of course there is a long, long list of more or less 800 icons … but loads super fast 🙂 . I then just load the css of my iconfont in my admin.css and put some tiny additional CSS and what I have now is a very nice icon-picker for my wordppress backend:
#ACFisawesome
