4

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:

enter image description here

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.

1 Answer 1

4

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
}
3
  • Too much awesomeness in one single answer. Thank You! Mar 13, 2021 at 12:00
  • criminally underrated answer
    – catbadger
    Feb 15, 2023 at 19:47
  • Still works great with Version 6.4.3
    – Pete
    Feb 15 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.