Tag field with auto-creation of new tags

• bluestarstudios

• November 7, 2019 at 7:49 pm

I need to create a field where people can enter a list of hobbies they love. The best way to do this would be using a tag-style Multi-Select field, where we provide a basic list of “tags” (hobbies), but people can add their own custom ones by typing them in and hitting return. Just like here: https://select2.org/tagging#tagging-with-multi-value-select-boxes

The custom added entries should then be saved as new terms to the taxonomy.

How can I achieve this?

Currently the ACF multi-select implementation requires that a user press the “+” icon, then add a single tag via the popup, and do so for each hobby they want to add. Since this takes a lot of time, most users get frustrated and end up skipping this field. Which means we get very incomplete information which is costing our business. How can I get this field to work as described above? Either using ACF PRO’s existing tools or a third party field implementation.

Thanks a lot!

• John Huebner

• November 8, 2019 at 5:12 am

If this was a must have item for one of my clients, what I would do is use some type of ACF field. This could be a multi-select field that you’re using. I would more than likely leave it as it is so for those that want to take the time to use it they can.

Then I would create another field. I would use a text field or maybe a textarea. I would name it something like “Add Hobbies” Instructions “Don’t see the hobbies your looking for? Add New Ones” or something like that. In this field they could enter either a comma separated list or alternately a list with each item on a new line if using a text area.

Then I would create an ACF save post filter https://www.advancedcustomfields.com/resources/acf-save_post/.

In this filter I would see if the user entered anything in this field. If they did I would parse the value of the field to get a list of new tags. I would double check this list to make sure the tags did not already exist.

Then for the ones I would create them https://developer.wordpress.org/reference/functions/wp_insert_term/.

Then I would append these terms to the post using https://developer.wordpress.org/reference/functions/wp_set_object_terms/ with $append set to true.

Finally I would delete the value of this new field.

It’s a bit of work on your end, but I think it would achieve the results you’re looking for.

—

Alternately you can eliminate the field your using and just use a text field and do what I suggest. Hoever, this would be more prone to errors with people adding alternate spellings of existing tags.

• bluestarstudios

• November 8, 2019 at 7:35 am

Hi John, thanks for the super quick reply. Yes, that’s a great suggestion. And it’s a work-around. It would take quite a bit of work, but it could make it work.

But I will say that I’m surprised that there is no existing solution in place (whether a built-in ACF field or a third-party ACF field) that already implements this. Allowing users to add their own tags (whether tags, hashtags, list of interests, favorite genres, artists, movies, etc.) seems like something that’s used quite frequently nowadays on so many websites. Is there really no implementation that already does this?

Would ACF consider adding this as a built-in field?

• John Huebner

• November 9, 2019 at 12:32 am

I suppose that most people find the existing field enough.

As far as adding this to ACF, you’d need to ask the developer https://www.advancedcustomfields.com/contact/

Here’s another option because most of the issue stems from needing to click on the + link when hovering over the field. Add an acf/render_field filter https://www.advancedcustomfields.com/resources/acf-render_field/. This solution depends on JQuery being loaded, which it should be.

// replace field_XXXX with your field key
add_filter('acf/render_field/key=field_XXXX', 'add_term_add_link', 20, 1);
function add_term_add_link($field) {
  ?>
    <a href="javascript: $('[data_key="field_XXXX"] .acf-input [data-name="add"]').trigger('click');">Add a Category</a>
  <?php 
}

What this does is to add a link below the field that when clicked will trigger the same action as clicking on the +. You can then style it as a button or whatever makes the most sense.

• bluestarstudios

• November 9, 2019 at 9:28 am

It sounds like this would really do the same multi-step process as originally, just replacing the + with a text. What I’m trying to achieve is true simplicity, where the adding of categories can be done directly in the field. Particularly since this function is built right into Select2. So I believe your first recommendation may have to do at the moment. But thanks for the alternate solution. Good to know that’s an option.