Add class to acf fields

• pokhsujan

• September 23, 2015 at 4:48 pm

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

• mediawerk

• September 23, 2015 at 11:24 pm

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

• pokhsujan

• September 24, 2015 at 5:19 pm

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,

• mediawerk

• September 25, 2015 at 10:46 pm

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)

• pokhsujan

• September 29, 2015 at 3:04 pm

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

• bluantinoo

• October 7, 2016 at 1:04 am

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