Wrapper class to flexible content fields

• smeisinger

• April 10, 2015 at 10:37 pm

Is it somehow possible to add wrapper classes to flexible content fields? I mean to the elements themselves, not just to the inputs etc. inside them.

This would be useful in case you have a lot of different content fields to distinguish between.

I’ve attached a quick mock up what I would want to achieve with this. Every content element would have a small icon to make the difference between them more noticeable when you’re working on more complex layouts.

(Icons by iconmonstr.com)

betteracf.jp....jpg

• smeisinger

• April 14, 2015 at 8:52 pm

I wouldn’t feel ignored if I just got a simple “no” 😉

• sergiozambrano

• June 27, 2015 at 12:37 pm

CSS has many ways to select an element. I’m sure I could find the right selector for you to accomplish that… If I only knew what you are showing in the image. I have no idea what that is or what it is for. Is that the field builder? or the created field with some repeater?

I don’t think that would be too hard to accomplish hacking the plugin’s code. Finding where the code is rendered and adding a class with the field’s type is one of the easiest things to do. If you give me more info I could give it a shot.

• Jonathan

• June 28, 2015 at 7:23 pm

Hi @smeisinger

I would not recommend hacking the core plugin. You wont be able to update without redoing your hack again each time an update is available.

If we take a look at the outer element for each flexible field content you’ll find that it contains a data-attribute with the flexible fields name. We can use that to target each specific type. Here’s an example that should be enough for you to go on! I haven’t tested this live.

.layout[data-layout="flexiblefieldname1"] {
    position: relative;
}

/* An example of how you might add your custom icons. This example is using an imaginary icon-font but you could do it differently */
.layout[data-layout="flexiblefieldname1"]:after {
    content: 'a'; /* our textfield icon for example */
	text-transform: none !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-variant: normal !important;
	font-family: "Name of your icon font" !important;
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
	position: absolute;
	right: 70px; /* make sure the icon appears to the left of the hover icons */
	top: 5px;
}

• smeisinger

• June 28, 2015 at 9:31 pm

No, I certainly wouldn’t mess with the core files 🙂

But that’s exactly what I was looking for, thanks!
.layout[data-layout="flexiblefieldname1"]

In the meantime I helped myself with this, which is quite alright:
https://wordpress.org/plugins/advanced-custom-field-repeater-collapser/