How to customize ACF Repeater having taxonomy fields to show parent terms and Child Terms separately?

Photo of author
Written By geekerhub

Lorem ipsum dolor sit amet consectetur pulvinar ligula augue quis venenatis. 

Taxonomy Field of ACF shows all the terms by default with Parent Terms and Child terms. When using ACF Repeater Fields having Taxonomy Sub Fields, users need to show the dependent terms only. This type of functionality does not exist by default.

We can manage to have this functionality by using the ACF filters and jQuery. To implement this, you must know the key name of every Taxonomy Subfield.

Let’s go with an example:
Taxonomy Name: Teacher Student Relation (teacher_student_relation)
Let’s say above taxonomy has the following data:
Teacher 1

  • Student 1 T1
  • Student 2 T1
  • Student 3 T1

Teacher 2

  • Student 1 T2
  • Student 2 T2
  • Student 3 T2

Repeater Field Name: Teacher Student Relationship

  • Sub Field 1: Teacher (Taxonomy Field) (key: field_5d37e38c8a36b)
  • Sub Field 2: Student (Taxonomy Field) (key: field_5d37e3b18d756)

Now By Default, ACF will display Taxonomy data with Parent and Child in both the subfields. We need to customize to show Parent Data on Sub Field 1 (Teacher) and Dependent Child Data on Sub Field 2 (Student) in a repeater field.

To customize we need to follow steps:

  • create a jquery file to extend ACF jQuery
  • Use a taxonomy filter to customize
  • You must know the key name and the subfield name of the Sub Field

Below code will go into functions.php file:

/*Enqueue ACF Extended Jquery*/
function my_admin_enqueue_scripts() {
   wp_enqueue_script( 'my-admin-js', get_template_directory_uri() . '/acf-jquery.js', array(), '1.0.0', true );
add_action('acf/input/admin_enqueue_scripts', 'my_admin_enqueue_scripts');
/*Enqueue ACF Extended Jquery*/

/*Filter to show only parent terms for the taxonomy based on acf field*/
/*Here `teacher` is the name (slug) of the sub field*/
function show_only_parent_callback( $args, $field, $post_id ) {
    $args['parent'] = 0;    
    return $args;
add_filter('acf/fields/taxonomy/query/name=teacher', 'show_only_parent_callback', 10, 3);

/*Filter to show only dependent child of parent from first sub field for the taxonomy based on acf field*/
/*Here `student` is the name (slug) of the sub field*/
function show_only_second_level_child_callback( $args, $field, $post_id ) {
    $ParentId = isset($_REQUEST['ParentId']) ? (int) $_REQUEST['ParentId'] : -1;
    $args['parent'] = (int) $ParentId;
    return $args;
add_filter( 'acf/fields/taxonomy/query/name=student', 'show_only_second_level_child_callback', 20, 3 );

Below code will go into jquery file:

if ( typeof acf != 'undefined' ) {
function phc_send_parent_term_id_ajax_query() {
    var fn_originalAjaxData = false;

    var fn_ajaxDataWithParentId = function( e, i ) {
        // Call the original function, which was stored in the element
        var data = fn_originalAjaxData(e,i);

        // Add the Product ID to the data
        data.ParentId = jQuery(this).closest('.acf-row').find('td.acf-field-5d37e38c8a36b select').val();
        return data;

    // Whenever a select2 is initialized, inject our own custom function.
    acf.add_filter( 'select2_args', function( args, $select, settings ) {
        // Only apply to the "Variation" dropdowns
        var select_is_variation = $select.attr('id').indexOf('field_5d37e3b18d756') >= 0;
        if ( ! select_is_variation ) return args;

        // Store the original function for later
        if ( fn_originalAjaxData === false ) {
            fn_originalAjaxData =;

        // Overwrite the function with one that will get the Product ID. = fn_ajaxDataWithParentId;

        return args;
    } );

Leave a Comment