Meta Boxes Conditional Logic

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.

Like this:

conditional logic in WordPress meta boxes
Show or hide a custom field depending on a value of another field.

For more details you can also check my tutorial about WordPress meta boxes.

In order to create a meta box with conditional logic for its fields, we just have to implement two steps. First step is to paste the following code into your current theme functions.php file or to a custom plugin.

<?php
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
	?>
		<table class="form-table">
			<tbody>
				<tr>
					<th>Product type</th>
					<td>
						<p>
							<label>
								<input type="radio" name="product_type"<?php checked( $product_type, 'virtual' ) ?> value="virtual"> Virtual
							</label>
						</p>
						<p>
							<label>
								<input type="radio" name="product_type"<?php checked( $product_type, 'physical' ) ?> value="physical"> Physical
							</label>
						</p>
					</td>
				</tr>
				<tr<?php echo '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="<?php echo absint( $items_in_stock ) ?>" class="small-text">
					</td>
				</tr>
			</tbody>
		</table>
	<?php
}

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
	
	update_post_meta( $post_id, 'product_type', sanitize_text_field( $_POST[ 'product_type' ] ) );
	update_post_meta( $post_id, 'items_in_stock', absint( $_POST[ 'items_in_stock' ] ) );
	
}

And now the second step – 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() {
		if( 'physical' == $(this).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 Simple Fields plugin in order to save tons of time when creating meta boxes.

So once you installed my plugin to your website, you can easily replace the above code with this small and simple code snippet:

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;
}

# WordPress, Metadata

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter