Skip to content

Conditional Fields

Jump to bottom
Wapiclo edited this page Dec 4, 2025 · 1 revision

Wapic Fields allows you to show or hide fields dynamically based on the value of another field.
This feature is useful for adding conditional logic in metaboxes, option pages, or term meta fields.

How It Works

Conditional fields use the condition parameter to define when a field should be visible. The field will only appear when the controlling field matches the specified value.

Basic Example

In this example, the URL field will only appear if the Toggle field is set to yes.

<?php
// 1. Toggle field (controlling field)
Wapic_Fields\Field::add_control(
    array(
        'id'    => '_sample_toggle_conditional',
        'type'  => 'toggle',
        'label' => esc_html__( 'Enable Conditional Fields', 'wapic-field' ),
        'value' => get_option( '_sample_toggle_conditional' ),
    )
);

// 2. URL field (conditional field)
// This field only appears when the toggle is set to 'yes'
Wapic_Fields\Field::add_control(
    array(
        'id'          => '_sample_url_conditional',
        'type'        => 'url',
        'label'       => esc_html__( 'Conditional URL', 'wapic-field' ),
        'description' => esc_html__( 'This field appears only when the toggle is enabled.', 'wapic-field' ),
        'value'       => get_option( '_sample_url_conditional' ),
        'condition'   => array(
            'field' => '_sample_toggle_conditional', // The controlling field ID
            'value' => 'yes',                        // Show when toggle = 'yes'
        ),
    )
);

Condition Parameters

The condition parameter accepts an array with the following keys:

Parameter Type Description Required
field string The ID of the controlling field Yes
value mixed The value that triggers visibility Yes

Examples with Different Field Types

Example 1: Select Field Condition

Show a text field only when a specific option is selected:

<?php
// Select field
Wapic_Fields\Field::add_control(
    array(
        'id'      => '_payment_method',
        'type'    => 'select',
        'label'   => esc_html__( 'Payment Method', 'wapic-field' ),
        'options' => array(
            'credit_card' => 'Credit Card',
            'paypal'      => 'PayPal',
            'bank'        => 'Bank Transfer',
        ),
        'value'   => get_option( '_payment_method' ),
    )
);

// Conditional field - only shows when 'bank' is selected
Wapic_Fields\Field::add_control(
    array(
        'id'        => '_bank_account',
        'type'      => 'text',
        'label'     => esc_html__( 'Bank Account Number', 'wapic-field' ),
        'value'     => get_option( '_bank_account' ),
        'condition' => array(
            'field' => '_payment_method',
            'value' => 'bank',
        ),
    )
);

Example 2: Radio Button Condition

Show different fields based on radio button selection:

<?php
// Radio field
Wapic_Fields\Field::add_control(
    array(
        'id'      => '_display_mode',
        'type'    => 'radio',
        'label'   => esc_html__( 'Display Mode', 'wapic-field' ),
        'options' => array(
            'image' => 'Image',
            'video' => 'Video',
        ),
        'value'   => get_option( '_display_mode' ),
    )
);

// Show image field when 'image' is selected
Wapic_Fields\Field::add_control(
    array(
        'id'        => '_featured_image',
        'type'      => 'image',
        'label'     => esc_html__( 'Featured Image', 'wapic-field' ),
        'value'     => get_option( '_featured_image' ),
        'condition' => array(
            'field' => '_display_mode',
            'value' => 'image',
        ),
    )
);

// Show URL field when 'video' is selected
Wapic_Fields\Field::add_control(
    array(
        'id'        => '_video_url',
        'type'      => 'url',
        'label'     => esc_html__( 'Video URL', 'wapic-field' ),
        'value'     => get_option( '_video_url' ),
        'condition' => array(
            'field' => '_display_mode',
            'value' => 'video',
        ),
    )
);

Example 3: Checkbox Condition

Show a field when a checkbox is checked:

<?php
// Checkbox field
Wapic_Fields\Field::add_control(
    array(
        'id'      => '_enable_custom_css',
        'type'    => 'checkbox',
        'label'   => esc_html__( 'Enable Custom CSS', 'wapic-field' ),
        'options' => array(
            'yes' => 'Enable',
        ),
        'value'   => get_option( '_enable_custom_css' ),
    )
);

// Conditional textarea - only shows when checkbox is checked
Wapic_Fields\Field::add_control(
    array(
        'id'        => '_custom_css',
        'type'      => 'textarea',
        'label'     => esc_html__( 'Custom CSS', 'wapic-field' ),
        'value'     => get_option( '_custom_css' ),
        'condition' => array(
            'field' => '_enable_custom_css',
            'value' => 'yes',
        ),
    )
);

Multiple Conditional Fields

You can have multiple fields that depend on the same controlling field:

<?php
// Controlling field
Wapic_Fields\Field::add_control(
    array(
        'id'    => '_enable_features',
        'type'  => 'toggle',
        'label' => esc_html__( 'Enable Advanced Features', 'wapic-field' ),
        'value' => get_option( '_enable_features' ),
    )
);

// First conditional field
Wapic_Fields\Field::add_control(
    array(
        'id'        => '_feature_color',
        'type'      => 'color',
        'label'     => esc_html__( 'Feature Color', 'wapic-field' ),
        'value'     => get_option( '_feature_color' ),
        'condition' => array(
            'field' => '_enable_features',
            'value' => 'yes',
        ),
    )
);

// Second conditional field
Wapic_Fields\Field::add_control(
    array(
        'id'        => '_feature_text',
        'type'      => 'text',
        'label'     => esc_html__( 'Feature Text', 'wapic-field' ),
        'value'     => get_option( '_feature_text' ),
        'condition' => array(
            'field' => '_enable_features',
            'value' => 'yes',
        ),
    )
);

Using in Metaboxes

Conditional fields work the same way in metaboxes:

<?php
// In your metabox render method
Wapic_Fields\Field::add_control(
    array(
        'id'    => '_show_author',
        'type'  => 'toggle',
        'label' => esc_html__( 'Show Author Bio', 'wapic-field' ),
        'value' => get_post_meta( $post->ID, '_show_author', true ),
    )
);

Wapic_Fields\Field::add_control(
    array(
        'id'        => '_author_bio',
        'type'      => 'wp_editor',
        'label'     => esc_html__( 'Author Bio', 'wapic-field' ),
        'value'     => get_post_meta( $post->ID, '_author_bio', true ),
        'condition' => array(
            'field' => '_show_author',
            'value' => 'yes',
        ),
    )
);

Using in Taxonomy

Conditional fields also work in taxonomy term meta:

<?php
// In your render_fields method
Wapic_Fields\Field::add_control(
    array(
        'id'    => '_has_icon',
        'type'  => 'toggle',
        'label' => esc_html__( 'Has Custom Icon', 'wapic-field' ),
        'value' => $term_id ? get_term_meta( $term_id, '_has_icon', true ) : '',
    )
);

Wapic_Fields\Field::add_control(
    array(
        'id'        => '_icon_image',
        'type'      => 'image',
        'label'     => esc_html__( 'Icon Image', 'wapic-field' ),
        'value'     => $term_id ? get_term_meta( $term_id, '_icon_image', true ) : '',
        'condition' => array(
            'field' => '_has_icon',
            'value' => 'yes',
        ),
    )
);

Important Notes

  1. Client-Side Only: Conditional logic is handled via JavaScript on the client side
  2. Field IDs: The controlling field must be defined before the conditional field
  3. Validation: Hidden fields are automatically excluded from validation
  4. Saving: Hidden field values are still saved if they have data

Next Steps

Clone this wiki locally