How to Create a Full-Width WordPress Dashboard Widget

Hey, everyone! I have a fun, new hack for you that involves creating a full-width “widget” in your WordPress dashboard.

The dashboard widgets that come out of the box with WordPress include things like Quick Draft, At a Glance, Activity, WordPress News, etc. There are plugins that add dashboard widgets as well, such as JetPack and Gravity Forms.

What you’ve likely noticed about these dashboard widgets is that, by default, they’re in a columnized layout. The only “widget” that is always full-width is the Welcome box that you see after first installing WordPress, and most likely dismiss soon thereafter. However, this Welcome box is not technically a dashboard widget. It’s actually some simple markup that can be hidden with the dismiss button, whereas actual dashboard widgets are registered with special WordPress functions, and are toggled between states of opened and closed.

The quickest way to make a dashboard widget full-width is to switch the layout option (found under Screen Options) to one column. However, this will make all the dashboard widgets full-width. Personally, I like the 2-column view, but I’ve had the occasional need for only one full-width widget, usually for something relatively more important than the other widgets.

So how can I create just one full-width dashboard widget? Unfortunately, WordPress does not include anything for us to do that. If we register a dashboard widget via the wp_add_dashboard_widget() function, it’s going to behave like the rest of the widgets in that it will align based on the number of columns you set under Screen Options. If you’re like me, and prefer to keep the 2-column view, this means your custom dashboard widget cannot be full-width. Bummer.

The PHP

add_action( 'admin_footer', 'rv_custom_dashboard_widget' );
function rv_custom_dashboard_widget() {
 // Bail if not viewing the main dashboard page
 if ( get_current_screen()->base !== 'dashboard' ) {
  return;
 }
 ?>

 <div id="custom-id" class="welcome-panel" style="display: none;">
  <div class="welcome-panel-content">
   <h2>Welcome to WordPress!</h2>
   <p class="about-description">We’ve assembled some links to get you started:</p>
   <div class="welcome-panel-column-container">
    <div class="welcome-panel-column">
     <h3>Get Started</h3>
     <a class="button button-primary button-hero load-customize hide-if-no-customize" href="http://localhost:8888/uw-website/wp-admin/customize.php">Customize Your Site</a>
     <a class="button button-primary button-hero hide-if-customize" href="http://localhost:8888/uw-website/wp-admin/themes.php">Customize Your Site</a>
     <p class="hide-if-no-customize">or, <a href="http://localhost:8888/uw-website/wp-admin/themes.php">change your theme completely</a></p>
    </div>
    <div class="welcome-panel-column">
     <h3>Next Steps</h3>
     <ul>
      <li><a href="http://localhost:8888/uw-website/wp-admin/post.php?post=2557&amp;action=edit" class="welcome-icon welcome-edit-page">Edit your front page</a></li>
      <li><a href="http://localhost:8888/uw-website/wp-admin/post-new.php?post_type=page" class="welcome-icon welcome-add-page">Add additional pages</a></li>
      <li><a href="http://localhost:8888/uw-website/wp-admin/post-new.php" class="welcome-icon welcome-write-blog">Add a blog post</a></li>
      <li><a href="http://localhost:8888/uw-website/" class="welcome-icon welcome-view-site">View your site</a></li>
     </ul>
    </div>
    <div class="welcome-panel-column welcome-panel-last">
     <h3>More Actions</h3>
     <ul>
      <li><div class="welcome-icon welcome-widgets-menus">Manage <a href="http://localhost:8888/uw-website/wp-admin/widgets.php">widgets</a> or <a href="http://localhost:8888/uw-website/wp-admin/nav-menus.php">menus</a></div></li>
      <li><a href="http://localhost:8888/uw-website/wp-admin/options-discussion.php" class="welcome-icon welcome-comments">Turn comments on or off</a></li>
      <li><a href="https://codex.wordpress.org/First_Steps_With_WordPress" class="welcome-icon welcome-learn-more">Learn more about getting started</a></li>
     </ul>
    </div>
   </div>
  </div>
 </div>
 <script>
  jQuery(document).ready(function($) {
   $('#welcome-panel').after($('#custom-id').show());
  });
 </script>

<?php }
 

More info https://gist.github.com/renventura/29fa18b7064264e1ba82#file-full-width-dashboard-widget-php