Using WordPress ‘in_widget_form’ PHP action

by

The in_widget_form WordPress PHP action allows you to add extra fields to a widget’s control form.

Usage

add_action('in_widget_form', 'your_custom_function', 10, 3);
function your_custom_function($widget, $return, $instance) {
    // your custom code here
    return $return;
}

Parameters

  • $widget (WP_Widget): The widget instance (passed by reference).
  • $return (null): Return null if new fields are added.
  • $instance (array): An array of the widget’s settings.

More information

See WordPress Developer Resources: in_widget_form

Examples

Add a custom field to a widget

This code adds a custom text field to the widget form.

add_action('in_widget_form', 'add_custom_field', 10, 3);
function add_custom_field($widget, $return, $instance) {
    $custom_field = isset($instance['custom_field']) ? $instance['custom_field'] : '';
    ?>
    <p>
        <label for="<?php echo $widget->get_field_id('custom_field'); ?>"><?php _e('Custom Field:', 'text_domain'); ?></label>
        <input class="widefat" id="<?php echo $widget->get_field_id('custom_field'); ?>" name="<?php echo $widget->get_field_name('custom_field'); ?>" type="text" value="<?php echo esc_attr($custom_field); ?>">
    </p>
    <?php
    return $return;
}

Add a custom dropdown to a widget

This code adds a custom dropdown with options to the widget form.

add_action('in_widget_form', 'add_custom_dropdown', 10, 3);
function add_custom_dropdown($widget, $return, $instance) {
    $selected_option = isset($instance['selected_option']) ? $instance['selected_option'] : '';
    $options = array('Option 1', 'Option 2', 'Option 3');
    ?>
    <p>
        <label for="<?php echo $widget->get_field_id('selected_option'); ?>"><?php _e('Select Option:', 'text_domain'); ?></label>
        <select class="widefat" id="<?php echo $widget->get_field_id('selected_option'); ?>" name="<?php echo $widget->get_field_name('selected_option'); ?>">
            <?php foreach ($options as $option) : ?>
                <option value="<?php echo esc_attr($option); ?>" <?php selected($selected_option, $option); ?>><?php echo esc_html($option); ?></option>
            <?php endforeach; ?>
        </select>
    </p>
    <?php
    return $return;
}

Add a custom checkbox to a widget

This code adds a custom checkbox to the widget form.

add_action('in_widget_form', 'add_custom_checkbox', 10, 3);
function add_custom_checkbox($widget, $return, $instance) {
    $checked = isset($instance['custom_checkbox']) ? (bool) $instance['custom_checkbox'] : false;
    ?>
    <p>
        <input class="checkbox" id="<?php echo $widget->get_field_id('custom_checkbox'); ?>" name="<?php echo $widget->get_field_name('custom_checkbox'); ?>" type="checkbox" <?php checked($checked); ?>>
        <label for="<?php echo $widget->get_field_id('custom_checkbox'); ?>"><?php _e('Custom Checkbox:', 'text_domain'); ?></label>
    </p>
    <?php
    return $return;
}

Add a custom radio button group to a widget

This code adds a custom radio button group to the widget form.

add_action('in_widget_form', 'add_custom_radio_group', 10, 3);
function add_custom_radio_group($widget, $return, $instance) {
    $selected_radio = isset($instance['selected_radio']) ? $instance['selected_radio'] : '';
    $radio_options = array('Radio 1', 'Radio 2', 'Radio 3');
    ?>
    <p>
        <label><?php _e('Custom Radio Group:', 'text_domain'); ?></label><br>
        <?php foreach ($radio_options as $option) : ?>
            <input type="radio" id="<?php echo $widget->get_field_id('selected_radio') . '_' . esc_attr($option); ?>" name="<?php echo $widget->get_field_name('selected_radio'); ?>" value="<?php echo esc_attr($option); ?>" <?php checked($selected_radio, $option); ?>>
            <label for="<?php echo $widget->get_field_id('selected_radio') . '_' . esc_attr($option); ?>"><?php echo esc_html($option); ?></label><br>
        <?php endforeach; ?>
    </p>
    <?php
    return $return;
}

Add a custom textarea to a widget

This code adds a custom textarea to the widget form.

add_action('in_widget_form', 'add_custom_textarea', 10, 3);
function add_custom_textarea($widget, $return, $instance) {
    $custom_textarea = isset($instance['custom_textarea']) ? $instance['custom_textarea'] : '';
    ?>
    <p>
        <label for="<?php echo $widget->get_field_id('custom_textarea'); ?>"><?php _e('Custom Textarea:', 'text_domain'); ?></label>
<textarea class="widefat" id="<?php echo $widget->get_field_id('custom_textarea'); ?>" name="<?php echo $widget->get_field_name('custom_textarea'); ?>" rows="4" cols="20"><?php echo esc_textarea($custom_textarea); ?></textarea>
</p>
<?php
return $return;
}

Add a custom datepicker field to a widget

This code adds a custom datepicker field to the widget form. It requires the jQuery UI datepicker library to be enqueued.

add_action('in_widget_form', 'add_custom_datepicker', 10, 3);
function add_custom_datepicker($widget, $return, $instance) {
    $selected_date = isset($instance['selected_date']) ? $instance['selected_date'] : '';
    ?>
    <p>
        <label for="<?php echo $widget->get_field_id('selected_date'); ?>"><?php _e('Custom Datepicker:', 'text_domain'); ?></label>
        <input class="widefat custom-datepicker" id="<?php echo $widget->get_field_id('selected_date'); ?>" name="<?php echo $widget->get_field_name('selected_date'); ?>" type="text" value="<?php echo esc_attr($selected_date); ?>">
    </p>
    <script>
        jQuery(document).ready(function ($) {
            $('.custom-datepicker').datepicker();
        });
    </script>
    <?php
    return $return;
}

Note: Remember to enqueue the jQuery UI datepicker library in your theme or plugin to make the datepicker functional.