Conditional Logic in WordPress Meta Boxes

In this tutorial I will explain you how to show or hide a field depending on a value of another field within a simple WordPress metabox.

Conditional meta box in WordPress
Example of conditional meta box where one field visibility depends on the value of another field.

Following my meta box tutorial it is not difficult to create one, let’s begin with inserting the following code in either your current theme functions.php or a custom plugin.

add_action( 'add_meta_boxes', 'misha_add_product_metabox' );

function misha_add_product_metabox() {

	add_meta_box( 'misha_product_metabox', 'Meta Box', 'misha_callback', 'product', 'normal', 'default' );

}

function misha_callback( $post ) {

	$product_type = get_post_meta( $post->ID, 'product_type', true );
	$items_in_stock = get_post_meta( $post->ID, 'items_in_stock', true );

	// you can add a nonce field here as well

	echo '<table class="form-table"><tbody>
		<tr>
			<th>Product type</th>
			<td>
				<p><label><input type="radio" name="product_type"' . checked( $product_type, 'virtual', false) . ' value="virtual"> Virtual</label></p>
				<p><label><input type="radio" name="product_type"' . checked( $product_type, 'physical', false) . ' value="physical"> Physical</label></p>
			</td>
		</tr>
		<tr' . ( 'physical' !== $product_type ? ' style="display:none"' : '' ) . '>
			<th><label for="items_in_stock">Items in stock</label></th>
			<td>
				<input type="number" id="items_in_stock" name="items_in_stock" value="1" class="small-text">
			</td>
		</tr>
	</tbody></table>';

}



add_action( 'save_post', 'misha_save_product_meta', 10, 2 );

function misha_save_product_meta( $post_id, $post ) {


	// you can add nonce, permission and post type validation here


	if( isset( $_POST[ 'product_type' ] ) ) {
		update_post_meta( $post_id, 'product_type', sanitize_text_field( $_POST[ 'product_type' ] ) );
	} else {
		delete_post_meta( $post_id, 'product_type' );
	}
	if( isset( $_POST[ 'items_in_stock' ] ) ) {
		update_post_meta( $post_id, 'items_in_stock', intval( $_POST[ 'items_in_stock' ] ) );
	} else {
		delete_post_meta( $post_id, 'items_in_stock' );
	}

	return $post_id;

}

Actually it is not all. We also have to add some JavaScript, so the number field will be hidden or shown depending on the value of radio buttons. Here is it:

jQuery( function( $ ) {

	$( 'input[name="product_type"]' ).change( function() {
		var val = $(this).val();
		if( 'physical' == val ) {
			$( '#items_in_stock' ).parent().parent().show();
		} else {
			$( '#items_in_stock' ).parent().parent().hide();
		}
	});

} );

How to Create Conditional Fields Easily with My Plugin

It is OK, if you decide to create a meta box with conditional fields from scratch, but I personally never do that, because it consumes so much time.

I created a meta box plugin which allows to replace the above code with the code you can see below.

add_filter( 'simple_register_metaboxes', 'misha_product_metabox' );

function misha_product_metabox( $metaboxes ) {

	$metaboxes[] = array(
 		'id'	=> 'my_product_metabox',
 		'name'	=> 'Meta Box',
 		'post_type' => array( 'product' ),
 		'fields' => array(
			array(
				'id' => 'product_type',
				'label' => 'Product type',
				'type' => 'radio',
				'default' => 'virtual',
				'options' => array( 
					'virtual' => 'Virtual', 
					'physical' => 'Physical' 
				),
			),
			array(
				'id' => 'items_in_stock',
				'label' => 'Items in stock',
				'type' => 'number',
				'default' => 1,
				'show_if' => array(
					'id' => 'product_type',
					'value' => 'physical',
				),
			)
 		)
 	);

	return $metaboxes;

}

You can read more about conditional logic in my plugin documentation.

Misha Rudrastyh

Misha Rudrastyh

I develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me