Create a fullwidth dashboard widget

Is there any way to create a fullwidth dashboard widget in the WP Admin Dashboard?

Because I would like to expand the box to make the content have more space:

I am currently using wp_add_dashboard_widget(), but did not find any related parameter or setting in the documentation.

So maybe this is not a WP feature at the moment, but I would like to know if you have any suggestion to achieve it.

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here’s perhaps a little hacky way to achieve a full width dashboard widget. Here we force the first (left-most) column to be 100% and to contain our custom widget.

Step 1

WP stores the Dashboard widget visibility and order as user specific option. To get the below code working we need to prevent the user’s preference from overriding our setup by filtering the related option.

// Prevent users from putting anything to first column
// as widget order set by user overrides everything
add_filter(
    'get_user_option_meta-box-order_dashboard',
    function($result, $option, $user) {
        // Force custom widget to 1st column
        if ( ! empty( $result['normal'] ) ) {
            $result['normal'] = array('dashboard_widget_example');
        }
        return $result;
    },
    10,
    3
);

Step 2

Add little styling to change the column widths.

// Style dashboard widget columns
add_action(
    'admin_head',
    function() {
        echo "<style type='text/css'>
            #dashboard-widgets .postbox-container {width: 33.333333%;}
            #dashboard-widgets #postbox-container-1 {width: 100%;}
        </style>";
    }
);

Step 3

Finally we force all the other widgets from the first column to the second one, and register our custom dashboard widget to populate the first column.

// Dashboard widget reordering
add_action( 'wp_dashboard_setup', function(){

  global $wp_meta_boxes;

    // Move all dashboard wigets from 1st to 2nd column
    if ( ! empty( $wp_meta_boxes['dashboard']['normal'] ) ) {
        if ( isset($wp_meta_boxes['dashboard']['side']) ) {
            $wp_meta_boxes['dashboard']['side'] = array_merge_recursive(
                $wp_meta_boxes['dashboard']['side'],
                $wp_meta_boxes['dashboard']['normal']
            );
        } else {
            $wp_meta_boxes['dashboard']['side'] = $wp_meta_boxes['dashboard']['normal'];
        }
        unset( $wp_meta_boxes['dashboard']['normal'] );
    }

  // Add custom dashbboard widget.
  add_meta_box( 'dashboard_widget_example',
    __( 'Example Widget', 'example-text-domain' ),
    'render_example_widget',
    'dashboard',
    'normal',
    'default'
  );

} );

function render_example_widget() {
?>
  <p>Do something.</p>
<?php
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating