Ultimately I'm wanting to add some custom widget fields to the existing default image widget, and define it as a new custom widget.

I'm trying to create my own by extending the WP_Widget_Media_Image class, like this:

class Theme_Image_Widget extends WP_Widget_Media_Image
{
    /**
     * Widget identifier.
     */
    const WIDGET_SLUG = 'theme_image_widget';

    /**
     * Widget friendly name.
     */
    const WIDGET_NAME = 'Theme Image Widget';

    /**
     * Widget description.
     */
    const WIDGET_DESCRIPTION = 'foo';

    public function __construct()
    {
        WP_Widget_Media::__construct(
            self::WIDGET_SLUG,
            self::WIDGET_NAME,
            array(
                'classname'     => self::WIDGET_SLUG,
                'description'   => self::WIDGET_DESCRIPTION
            )
        );
    }

This code gets the new widget to appear in the widgets area, but it doesn't contain the normal UI that the default image widget has. I'm essentially looking to get the same UI over into this widget, and then add some additional fields to it.

Is there anyway to do this without having to re-write the JS UI code for the image widget?

Ultimately I'm wanting to add some custom widget fields to the existing default image widget, and define it as a new custom widget.

I'm trying to create my own by extending the WP_Widget_Media_Image class, like this:

class Theme_Image_Widget extends WP_Widget_Media_Image
{
    /**
     * Widget identifier.
     */
    const WIDGET_SLUG = 'theme_image_widget';

    /**
     * Widget friendly name.
     */
    const WIDGET_NAME = 'Theme Image Widget';

    /**
     * Widget description.
     */
    const WIDGET_DESCRIPTION = 'foo';

    public function __construct()
    {
        WP_Widget_Media::__construct(
            self::WIDGET_SLUG,
            self::WIDGET_NAME,
            array(
                'classname'     => self::WIDGET_SLUG,
                'description'   => self::WIDGET_DESCRIPTION
            )
        );
    }

This code gets the new widget to appear in the widgets area, but it doesn't contain the normal UI that the default image widget has. I'm essentially looking to get the same UI over into this widget, and then add some additional fields to it.

Is there anyway to do this without having to re-write the JS UI code for the image widget?

• widgets

• You're calling WP_Widget_Media::__construct(). You probably want to call WP_Widget_Media_Image::__construct() to get all the benefits of the image widget. – MikeNGarrett Commented May 1, 2019 at 20:21
• 1 It looks like the only thing that the WP_Widget_Media_Image::__construct does is set $this->l10n, other than that it just calls the WP_Widget_Media::__construct in the end. It also doesn't accept any constructor arguments, so I wouldn't be able to name it differently. – Timothy Fisher Commented May 1, 2019 at 20:36
• Did you ever make it work? I'm trying to extend WP_Widget_Media_Image without any luck... – anou Commented Jun 17, 2020 at 11:00
• @anou As far as I can remember, I didn't figure this out, sorry. I think I ended up going in a different direction entirely instead of trying to make the custom widget. – Timothy Fisher Commented Jun 28, 2020 at 19:00
• @TimothyFisher thank you. I did exactly the same ;-) – anou Commented Jun 29, 2020 at 21:24

2 Answers 2

I wonder if you have got it work or not? I am also trying to add some additional fields to the built-in image widget. I followed the comments above but still no luck. I even tried the cloning approach suggested by Brett Donald above.

Thank you very much.

You should be able to add custom fields by using the following WordPress filter in the parent WP_Widget_Media class:

        /**
         * Filters the media widget instance schema to add additional properties.
         *
         * @since 4.9.0
         *
         * @param array           $schema Instance schema.
         * @param WP_Widget_Media $widget Widget object.
         */
        $schema = apply_filters( "widget_{$this->id_base}_instance_schema", $schema, $this );

        return $schema;
    }

https://github.com/WordPress/wordpress-develop/blob/5.9/src/wp-includes/widgets/class-wp-widget-media.php#L168