Support

Account

Home Forums Backend Issues (wp-admin) Display count of selected elements in backend (Relationship Field) Reply To: Display count of selected elements in backend (Relationship Field)

  • Sascha,

    ACF has many hooks to add custom functionality. I put something together which will apply a basic counter on all relationship fields. Looks like this: https://vimeo.com/259429957/f653eae345.

    In order to implement, put the following in your theme functions.php file.

    function my_acf_relationship_counter( $field ) {
    
    	echo '<p class="acf-relationship-counter alignright"></p>';
    
    }
    add_action( 'acf/render_field/type=relationship', 'my_acf_relationship_counter', 1, 1 );
    
    function my_acf_admin_enqueue_scripts() {
    
    	// register style
    	wp_enqueue_style( 'my-acf-input-css', get_stylesheet_directory_uri() . '/css/my-acf-input.css', false, '1.0.0' );
    
    	// register script
    	wp_enqueue_script( 'my-acf-input-js', get_stylesheet_directory_uri() . '/js/my-acf-input.js', false, '1.0.0' );
    
    }
    
    add_action( 'acf/input/admin_enqueue_scripts', 'my_acf_admin_enqueue_scripts' );

    Under your theme/js/my-acf-input.js

    jQuery(document).ready(function() {
    
      // Run on relationship update
      jQuery('.acf-field-relationship').change(function() {
        selected_count = jQuery(this).find(".values li").length;
        jQuery(this).find(".acf-relationship-counter").text(selected_count + " items");
      });
    
      // Run on startup
      jQuery(".acf-field-relationship").each(function() {
        selected_count = jQuery(this).find(".values li").length;
        jQuery(this).find(".acf-relationship-counter").text(selected_count + " items");
      });
    
    });

    Under your theme/css/my-acf-input.css

    .acf-field-relationship .acf-relationship-counter {
      position: absolute;
      right: 0;
      top: -42px;
    }