Support

Account

Home Forums General Issues Add class to acf fields

Solved

Add class to acf fields

  • Can we add a class to some of the acf fields for styling and scripting purpose.
    There are various options but not for the class name.

    Thanks

  • do you talk about backend, or about frontend?

    at backend there is the wrapper attribute with class/id, use that to do whatever you need

    at frontend you could do whatever you wish:

    $your_field = get_field('your_field');
    echo '<div class="something">'; //whatever you like to wrap around(pre) your field
    echo $your_field; //your field value
    echo '</div>'; //whatever you like to wrap around(after) your field
    
  • Hi Mediawerk,
    I actually need that at backend.
    What I am doing is displaying the acf group fields in front-end form. If there is any place to add the class fields in backend then, it will be very simple for me to style and do some scripting.

    Thanks,

  • i am not sure if frontend form also add the Wrapper-Attribute class, but at normal backend the Wrapper-Attribute class or the ID are added to the container of the ACF Field (at least when you use ACF-Pro)

    look here at the screenshot image
    Wrapper Attribute are the last 3 input fields (all at same row) at each ACF-Field, above close Field. (class is the middle field)

    with help of Wrapper Attribute (class and ID) you should be able to style the backend.
    that means: add, for example “something” to the Wrapper Attribute class, and use that to style the backend (hope/think it works your frontendform too). and use code like from my first post to add class also to normal frontend view.

    maybe you need a bit nested css, because the class is added to the parent container of the field, and not the field itself where you add it.

    i am not sure, but i think you cant access these classes at normal frontend view, and you need to add these classes for normal frontend view manually.

    or you could use the fieldkeys of your ACF Fields directly as your css IDs
    and use that to style the backend.
    for example: #acf-field_508a263b40457
    (of course you need to replace field_508a263b40457 with the id of your field)

    hope that my explains are clear enough, and that they help to solve your problem.

    if you still have problems, post of the relvevant parts that you use codesnippets (and add maybe images, to show what is and what should be)

  • Thank you Mediawerk.
    I really appreciate your work.
    Thank you very much.

  • I have the same problem but on flexible layouts fields.

    i would like to make some customized css for different layouts of the same repeater.

    I ended up adding some jquery to get the data-layout attribute from repeater layout row and using it as css class to the very same element.
    So you’ll have different classes for different repeater layouts, based on the layout name.

    this is the small script I’ve done, nothing special but it works.

    jQuery.noConflict()(function($){
        "use strict";
         $(document).ready(function() {
            var layouts = $('.acf-flexible-content .layout');
            layouts.each(function( key, value ) {
    
                    var section_attribute = $(this).attr('data-layout');
    
                    $(this).addClass(section_attribute);
    
            });
    
        });
    });

    Would be surely better if this classes were built in ACF PRO

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

You must be logged in to reply to this topic.