wordpress creating a full-width dashboard widget

3
votes

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.

2
wordpresswidgetdashboard

2 Answers

1
votes

Starting with WordPress 3.5.0, you can directly modify the welcome panel:

First remove the existing content, then add your own function to render the content:

remove_action( 'welcome_panel', 'wp_welcome_panel' );
add_action( 'welcome_panel', 'my_custom_content' );

function my_custom_content()
{
    ?>
    <h1>Hello!</h1>
    <?php
}
-1
votes

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.