Markup for newly created taxonomy items in popup

• markbloomfield

• June 14, 2016 at 12:24 am

##Backstory:

So the ACF markup for checkboxes etc, is by default:

label > input + span

(IE the input[type=checkbox] and span text are nested inside the label)

I like to use CSS methods to style my checkboxes nicely. This method requires that the label follows the input in the HTML – is not nested.

So I update the pro plugin’s taxonomy.php file to be:

$output .= '<li data-id="' . $term->term_id . '"><input id="tax-check-' . $term->term_id . '" type="' . $this->field['field_type'] . '" name="' . $this->field['name'] . '" value="' . $term->term_id . '" ' . ($selected ? 'checked="checked"' : '') . ' /> <label for="tax-check-' . $term->term_id . '">' . $term->name . '</label>';

This creates a unique ID on the input and uses the same value for the for="" attribute on the label and it all works nicely.

##Now to my current problem…

I’m using acf_form() to create a new post, including taxonomy for a custom post type. When the user clicks the ‘add’ button, the popup appears and I can type in ‘New Category’ which then injects that new markup into the list of categories.

However this appended code does not follow the same formatting/markup as my amended markup above and thus the click events do not work so I cannot select my newly created category. I’ve searched high and low and I cannot find where this markup is set when appending new categories to that list so I’m unable to amend the markup to suit my needs.

Note the categories at the top follow my amended (correct) HTML. Note the last LI has the nested input setup which doesn’t work.

Can someone point me in the right direction please?

• John Huebner

• June 14, 2016 at 7:37 am

You’ve altered the plugin PHP code without altering the plugin JS code that inserts the new value. Altering the core code of a plugin is not a good idea as you’re going to keep making these changes whenever there’s an update.

My suggestion would be to find a way to apply CSS to the HTML created by ACF instead of altering the HTML that it outputs.

What is it that you can do with

<li>
  <input />
  <label></label>
</li>

that you can’t do with

<li>
  <label>
    <input />
    <span></span>
  </label>
</li>

• markbloomfield

• June 14, 2016 at 5:34 pm

thanks @hube2

the css method I use is widely accepted and used to create this type of effect… In essence: the input is hidden; the label after the input is styled with a :before to create a ‘fake’ checkbox. then using the sibling CSS method, I can style the label differently when the input is checked/selected:

# normal state

label:before {
  content: ' ';
  width:15px;
  height: 15px;
  background:red;
  display:block;
  float:left;
}

# checked state

input[type=checkbox]:checked + label:before {
  background:blue;
}

Simple example, but you get the idea. You can see the effect it has in the image in my first post.

With the input being nested inside the label, this method isn’t possible.

According to W3 spec, label+input or input+label or label>input are all fine. But the first 2 options definitely give more control to developers + designers to style the inputs better with CSS methods.

Side note: I’m assuming you nest inside the label so that the label is clickable to select the input, but using for and id on the label + input would achieve the same result.

• markbloomfield

• June 14, 2016 at 6:56 pm

for what it’s worth, acf-input.js:9202:

// create new li
var $li = $([
	'<li data-id="' + term.term_id + '">',
		'<input id="tax-check-' + term.term_id + '" type="' + type + '" value="' + term.term_id + '" name="' + name + '" /> ',
		'<label for="tax-check-' + term.term_id + '">' + term.term_label + '</label>',
	'</li>'
].join(''));

… that ‘fixes’ the problem for me and now works as expected.

Do you think this change would be done in the core? As previously mentioned, neither of the 3 ways is incorrect by any means. It’s just that the current way doesn’t allow much styling control.

Ideally it should be input, then label.

• markbloomfield

• June 14, 2016 at 7:09 pm

Demo

• John Huebner

• June 14, 2016 at 9:24 pm

I’m not involved with ACF beyond the support forum. I don’t know why the developer chose the html style that he did for the HTML. Possible it has something to do with other code that’s included like select2. For what it’s worth, the same effect should be achievable with different CSS and targeting the span rather than the label. If you’d like to request that the developer change this the best way to get a request to him is to open a new support ticket https://support.advancedcustomfields.com/new-ticket/

• markbloomfield

• June 14, 2016 at 9:50 pm

Thanks John.

Appreciate the help either way 🙂