Conditional Logic for Advanced Custom Fields

Currently in version 3.3.1, the Advanced Custom Fields plugin does not provide an interface for creating condition logic rules for fields. However, this functionality can be easily created with just a small amount of jQuery code. Check out the video to view the end result!

[vimeo]https://vimeo.com/45879568[/vimeo]

1. Creating the fields

In this short tutorial we will create a field group with 4 fields and add them to all pages (via the location rules). These fields are:

  1. Hero Type – A dropdown to select what kind of “Hero” element to use on the page. This will act as the switch for the conditional logic
  2. Hero Image – An image field that will show when “Image” is selected by “Hero Type”
  3. Hero Video – A textarea field that will show when “video” is selected by “Hero Type”
  4. Hero Slider – A gallery field that will show when “slider” is selected by “Hero Type”

Fields used for conditional logic tutorial

2. Adding the code

The Advanced Custom Fields plugin makes it very easy to add scripts and styles to the edit screens within WordPress. All you need to do is create a function and attaching it to the action acf_head-input. This will run in the head of any page where ACF generates input fields. Read more about ACF’s hooks and filters here.

The following code should be placed in your functions.php file within your active theme.

<?php

/*
*  ACF { Conditional Logic
*
*  @description: hide / show fields based on a "trigger" field
*  @created: 17/07/12
*/

function my_conditional_logic()
{
	?>
	<style type="text/css">
		#acf-hero_image, 
		#acf-hero_video, 
		#acf-hero_slider {
			display: none;
		}
	</style>
	<script type="text/javascript">
	(function($){
		
		
		/*
		*  hide_fields
		*
		*  @description: a small function to hide all the conditional fields
		*  @created: 17/07/12
		*/
		
		function hide_fields()
		{
			$('#acf-hero_image, #acf-hero_video, #acf-hero_slider').hide();
		}
		
		
		/*
		*  acf/setup_fields
		*  - Similar to $(document).ready, but runs after ACF has instantiated itself
		*/
		
		$(document).live('acf/setup_fields', function(e, postbox){
			
			// trigger change on the select field to show selected field
			$('#acf-hero_type select').trigger('change');
		
		});
		
		
		/*
		*  Hero Type change
		*/
		
		$('#acf-hero_type select').live('change', function(){
			
			// vars
			var value = $(this).val();
			
			
			// hide all fields
			hide_fields();
			
			
			// show the selected field
			if( value == "image" )
			{
				$('#acf-hero_image').show();
			}
			else if( value == "video" )
			{
				$('#acf-hero_video').show();
			}
			else if( value == "slider" )
			{
				$('#acf-hero_slider').show();
			}
			
		});
		
	
	})(jQuery);
	</script>
	<?php
}

add_action('acf_head-input', 'my_conditional_logic');

?>

Wrapping up

That's it! Obviously you will need to edit the code to work with the fields that you have, but this will not take long (if you use either firebug or inspector to view html / console logs).

Soon, I plan to add an interface into ACF to do all this for you, but for now, this is the easiest way to add conditional logic to your fields.

Thank you for reading

Join in the discussion bellow by tweeting about this post.

@elliotcondon

7 Jul 2012

Check it out! Tutorial for Conditional Logic rules for the #AdvancedCustomFields plugin! http://t.co/MlqIKLkz

@nuwanrohitha

7 Jul 2012

conditional logic for Advanced Custom Fields wordpress plugin http://t.co/aJoYXGkq @steve_deniese

@FreelanceWP

7 Jul 2012

Conditional Logic for Advanced Custom Fields { Elliot Condon http://t.co/VqV7B4p3

@zslabs

8 Aug 2012

@elliotcondon What color scheme are you using on http://t.co/14y1kAdb I’d love to be able to pull that down to Sublime Text 2

@jennifinch

9 Sep 2012

Comment here… I am in love with the WordPress Advanced Customs Fields Plugin. http://t.co/aRiXqByy via @elliotcondon

@peterserven

10 Oct 2012

@elliotcondon I would love to see this built into the plugin! http://t.co/j4XdGwXl

@DDelloStritto

1 Jan 2013

Wish this were in built in! Any help on using this with the repeater field in an options page? http://t.co/GoIuDZUA via @elliotcondon

@davidyarham

4 Apr 2013

@elliotcondon Any progress on native support for conditional logic for ACF? http://t.co/QDg8hM1SlM

Thanks again

Join in the discussion by tweeting about this post.