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.
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;
}- To keep things simple, I didn’t add any nonce check, user permission and post type validation into
misha_save_product_meta()function (line 41), but you’d better add it. If you have no idea what I’m talking about, please read this tutorial. - If you insert this code as is and you don’t have a custom post type
productregistered, nothing will happen, so you either have to change post type name on line 5 or register a product post type.
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
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
Thanks