Search code examples
wordpresswidgetdashboard

wordpress creating a full-width dashboard widget

How can I create a full-width dashboard widget in WordPress?

I want to create a widget like the new one "welcome" in WordPress 3.3.

That plugin is in dashboard.php in wp_welcome_panel() but I don't know how they show it full-width.

They create a div "welcome-panel" outside the main div where all the widgets go, "dashboard-widgets-wrap":

<div id="welcome-panel" class="welcome-panel"></div>
<div id="dashboard-widgets-wrap">
   <div id="dashboard-widgets" class="metabox-holder">
      <div id="postbox-container-1" class="postbox-container" style="width:50%;">
      <div id="postbox-container-2" class="postbox-container" style="width:50%;">
      <div id="postbox-container-3" class="postbox-container" style="display:none;width:50%;">
      <div id="postbox-container-4" class="postbox-container" style="display:none;width:50%;">
   </div>

How can I achieve that?

Edit

I've found in wp-admin/index.php in line 90 this:

<div class="wrap">
<?php screen_icon(); ?>
<h2><?php echo esc_html( $title ); ?></h2>

<?php wp_welcome_panel(); ?>

<div id="dashboard-widgets-wrap">

<?php wp_dashboard(); ?>

<div class="clear"></div>
</div><!-- dashboard-widgets-wrap -->

</div><!-- wrap -->

So they do it inserting directly the code.

The only solution I see is maybe using jQuery?

Any other option?

A full-width widget can be very useful for adding content at the top of your own themes with updates or corroborative info or anything.

Solution

  • Unfortunately, there's no way to hook into that Welcome panel.

    I've got two solutions for this.

    Manipulating the div with CSS and jQuery

    modified welcome screen

    or

    Injecting an iframe

    In this case, I'm cleaning all the dashboard widgets, tabs, welcome panel. Forcing a one-column layout. And finally filling the void with the iframe.

    But this can be easily adapted to suit your taste.