How to use Wrapper Attributes

• jplew

• November 17, 2014 at 7:44 pm

Hi everyone:
so by Elliot’s grace, ACF 5.1.3 now features Wrapper Attributes (https://twitter.com/elliotcondon/status/532376933200179200)—the ability to assign width, classes, and ids to specific fields in order to grant more control over layout. But I’m still in the dark as how to take advantage of them effectively.

My first question is whether it’s possible to group a set of fields together into a column.

Let’s say I have this layout:

And I want to turn it into this layout, to stack my fields on top of one another (I mocked this up in Photoshop):

Is this possible, without using HTML tables or a Javascript library like Masonry? I tried changing the CSS attributes to “clear: none” instead of “clear: left” but it doesn’t work.

Secondly, what is the best way to take advantage of the class and id fields? Since we’re working in the WordPress admin, obviously my theme’s style.css won’t work. Do I have to load in a custom stylesheet via functions.php?

I’d also be eager to see other people’s usages of this new feature. We’ve been waiting for this functionality for a while now, so I’m eager for anyone to shed light. Thanks!

• LingoSam

• November 20, 2014 at 3:55 am

I think I agree with your thoughts.

• Add classes / ID’s to the custom fields.
• Then enqueue a stylesheet to load in the admin area via your functions file.
• Using that stylesheet, and the Classes / ID’s you’ve just added you can float + clear those particular fields that you want more control over.

I don’t think using the new width option will allow the layout to display quite like your mockup.

• jplew

• November 20, 2014 at 6:25 pm

Hi @LingoSam:
thanks a lot for the input. Do you have any examples of using floats and clears to customize your field layout? I’d like to see how it’s implemented.

Pity about the column display. I’m sure grouping fields into columns is possible with a little customization. What would be great would be the ability to organize fields into rows, then further subdivide them using bootstrap-style column-width units.

This dev took a crack at it about a year ago, but I don’t think it works with ACF 5:
https://github.com/LightboxDev/acf-field-column

I haven’t played with this yet using repeater and flexible content fields, but I look forward to seeing how the ‘block’ fields work.

Kind of surprised no-one else here is talking about this though, I thought it was a pretty big deal.

• LingoSam

• November 20, 2014 at 8:45 pm

Sure thing. I’d probably tackle it like this:

In your example you should only need to create one CSS class.
One for floating right. (Of course, you could make another for floating left and so on depending on your needs).

.acf-pull-right {
clear: none !important;
float: right !important;
}

Here I’m forcing them to float to the right, and to ensure they stack I’ve forced them to stop trying to clear other objects.

Add the class to the three custom fields that you want to stack up. I’ve mocked it up in browser as per the screenshot, doing a quick copy of the fields you’ve shown in yours.

All you’d need to do is create the stylesheet then and enqueue it using the methods in the link on my previous comment.

• jplew

• November 23, 2014 at 2:11 pm

cool, can confirm that it’s working:

In my case I had to do this to get it to display properly:

.acf-pull-right {
    clear: none !important;
    float: right !important;
    min-height: 40px !important;
    border-left: 1px solid #eeeeee !important;
}

Thanks so much for your help @LingoSam!

• Fletch

• June 24, 2015 at 9:28 am

Can someone please share a template example of using the wrapper attributes? I’ve searched the forum and Google, and there are no examples or documentation on exactly how to output these wrapper attributes, e.g., a class for a field.