how to: conditional based on taxonomy field

• mmjaeger

• October 13, 2021 at 9:15 am

I’m trying to show / hide a field based on the checked value of a taxonomy field – found this plugin that does the trick https://wpfavs.com/plugins/conditional-taxonomy-option but I do not like to rely on some third party code – do you have. any idea how to do this with just ACF Pro?

thank you

• John Huebner

• October 13, 2021 at 10:06 am

There is only one way to do this in ACF without using additional code.

Let’s say that the term ID you want to put the field group on is 5 then you can do

Taxonomy Field > 4 AND
Taxonomy Field < 6

• mmjaeger

• October 13, 2021 at 1:14 pm

Hello John
thanks for replying – I’ve seen in another thread you mentioned that before and I tried it but it didn’t work for me whereas the plugin I mentioned actually works

• websmithintl

• May 27, 2023 at 8:10 pm

Just in case this helps anyone else out…

Creating an entire plugin seemed like a lot of work to perform a relatively simple task, so I decided to comb through the plugin’s files and see what was actually happening. Lo and behold, all you need is a couple of quick PHP scripts and a JS file to manage the AJAX request.

PHP for your functions.php file:

function ws_enqueue_acf_scripts() {
	$admin_js_path = get_template_directory_uri() . '/path/to/js/ws-acf-conditional-taxonomy.js';
	wp_enqueue_script( 'conditional-taxonomy-rule-acf', $admin_js_path, array( 'jquery','acf-input' ));
}
//enqueue script after ACF is initialized/loaded 
add_action( 'acf/init', 'ws_enqueue_acf_scripts' );

//PHP function called by JS file to get taxonomy terms based on the current selection
function fetch_taxonomy_terms(){
	if ( is_admin() && ! wp_doing_ajax() ) {
		exit("No naughty business please");
	}
	$taxonomy = sanitize_text_field($_REQUEST['taxonomy']);
	$terms = get_terms(
		$taxonomy,
		array(
			'hide_empty' => false,
			'fields' =>'id=>name'
		)
	);
	if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
		echo json_encode($terms);die;
	}
}
add_action( 'wp_ajax_load_taxonomy_term_choices', 'fetch_taxonomy_terms' );

& here’s the chunk of jQuery from the JS file:

(function($){

	var parseString = function( val ){
		return val ? '' + val : '';
	};

	var isEqualTo = function( v1, v2 ){
		return ( parseString(v1).toLowerCase() === parseString(v2).toLowerCase() );
	};

	var inArray = function( v1, array ){
		// cast all values as string
		array = array.map(function(v2){
			return parseString(v2);
		});
		return (array.indexOf( v1 ) > -1);
	}

	// Add New option in dropdown options to compare when taxonomy is slected in conditional rule
	var TaxonomyEqualTo = acf.Condition.extend({
		type: 'taxonomyEqualTo',
		operator: '==',
		label: ('Taxonomy is equal to'),
		fieldTypes: [ 'taxonomy' ],
		match: function( rule, field ){
			var val = field.val();
			if( val instanceof Array ) {
				return inArray( rule.value, val );
			} else {
				return isEqualTo( rule.value, val );
			}
		},
		choices: function( fieldObject ){
			var choicesaa = [];
			jQuery.ajax({
				type : "post",
				dataType : "json",
				url : acf.get('ajaxurl'),
				async: false,
				data : {action:'load_taxonomy_term_choices',taxonomy:fieldObject.$setting('taxonomy select').val()},
				success: function(response) {
					$.each(response, function(i, item) {
						choicesaa.push({
							id: i,
							text: (item)
						});
					})
				}
			});
			return choicesaa;
		},
	});

	acf.registerConditionType( TaxonomyEqualTo );
	var TaxonomyNotEqualTo = TaxonomyEqualTo.extend({
		type: 'taxonomyNotEqualTo',
		operator: '!=',
		label: ('Taxonomy is not equal to'),
		match: function( rule, field ){
			return !TaxonomyEqualTo.prototype.match.apply(this, arguments);
		}
	});
	acf.registerConditionType(TaxonomyNotEqualTo);

})(jQuery);

I’m not going to explain what all of that does, but I can tell you it worked like a charm.