How to make a widget expand wider than the column width when editing its settings in the admin

The WordPress Text widget expands horizontally beyond the margin of the sidebar when added to a sidebar and opened in the admin and I am trying to apply that function to a widget. I see inline css is being dynamically injected when the widget tab is opened and inserts as

div style="z-index: 100; margin-left: -88px;" id="widget-50_text-4" class="widget open"

and though the widget, when opened, is wider than the sidebar, I am not seeing any width property. I figure it is being done with javascript and I have achieved the similar behavior using jQuery .css() but it is not screen size responsive as is the WP text widget, and I had to insert a width value.

Is there an add_filter function to execute this action?

Image Example

1 Answer
1

This can be set by passing arguments to the $control_options of the parent widget constructor, which is the fourth argument. Here is an example constructor:

class Custom_Widget extends WP_Widget {

    /**
     * Sets up the widgets name etc
     */
    function __construct() {

        $widget_options = array(
                'description' => __( 'Featured Pages Widget.', 'affiliate' )
        );

        $control_options = array(
                'width'  => 750
        );

        parent::__construct(
            'custom_widget', // Base ID
            __( 'Custom Widget', 'text_domain' ), // Name
            $widget_options,
            $control_options
        );
    }

Leave a Comment