Creating a custom dashboard widget

Here is the default Dashboard panel seen in WordPress 5.9.

Dashboard Home widgets in WordPress.
Dashboard Home widgets in WordPress.

Remove default Dashboard Widgets

Removing all the dashboard widgets.

function wporg_remove_all_dashboard_metaboxes() {
    // Remove Welcome panel
    remove_action( 'welcome_panel', 'wp_welcome_panel' );
    // Remove the rest of the dashboard widgets
    remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
    remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
    remove_meta_box( 'health_check_status', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_activity', 'dashboard', 'normal');
    remove_meta_box( 'dashboard_site_health', 'dashboard', 'normal');
}
add_action( 'wp_dashboard_setup', 'wporg_remove_all_dashboard_metaboxes'  

The result of removing all the Dashboard widgets.

All Dashboard widgets have been removed.
All Dashboard widgets have been removed.

Dashboard Widgets – Developer documentation WordPress.

Add a new Dashboard widget

Creating a custom dashboard widget.

/* Dashboard widgets */

add_action( 'wp_dashboard_setup', 'dashboard_add_widget_gethelp' );
function dashboard_add_widget_gethelp() {
	wp_add_dashboard_widget( 'dw_dashboard_widget_help', __( 'Get help to manage your web site', 'dw' ), 'dw_dashboard_widget_help_handler' );
}

function dw_dashboard_widget_help_handler() {
	_e( '<p style="color: blue;font-size: 18px;"><strong>
Welcome to the backend of your WordPress web site!</strong></p> 
<p>Some helpful advice is located here: <a href="https://www.easywebdesigntutorials.com/" target="_blank" style="text-decoration: underline; font-weight:strong;">Link to the help page</a> </p>
<p>Contact <a href="mailto:paaljoachim@easywebdesigntutorials.com">Paal Joachim</a> when questions arise.</p>', 'dw' );
}

The result of adding / creating a new dashboard widget.

New custom Dashboard widget WordPress
New custom Dashboard widget WordPress

Regarding code:
echo ‘some information to display’.
_e( ‘This is some text.’, ‘dw’ ); (e for echo also adds the opportunity to translate the text inside the single quotes ”.

https://stackoverflow.com/questions/5775135/what-does-the-wordpress-e-function-do
https://stackoverflow.com/questions/18252433/how-can-i-style-a-php-echo-text

Creating a custom Dashboard Welcome Panel

Removing the default Welcome Panel. Adding in some text and a link to a Youtube video.

/* Add a custom Welcome Dashboard Panel */

function my_welcome_panel() {
 ?> 
<div class="welcome-panel.welcomepanel::before" style="display: none;"></div>
 <div class="getting-started">
 <h3 align=center style="padding-top: 20px;"><?php _e('Taking your first steps with WordPress' ); ?></h3>
 
 <p align=center><iframe width="640" height="360" src="https://www.youtube.com/embed/EtGr1Uld1b4" frameborder="0" allowfullscreen></iframe></p>
 
 </div>
<?php
}

// Removes default welcome panel and instead adds in my_welcome_panel.
remove_action('welcome_panel','wp_welcome_panel');
add_action( 'welcome_panel', 'my_welcome_panel' );

Remove the balloon, the blue background image and close panel x icon. For that we need to use php function code.

In newer versions of WordPress the Welcome Panel has received a blue background and balloons. It is a bit tricky to remove. I located the code in this welcome balloons WordPress Trac ticket.

/* Remove the balloon, blue background and close panel icon in the Welcome Panel. https://core.trac.wordpress.org/ticket/55217#comment:2 */

add_action( 'welcome_panel', 'my_welcome_panel' );

function dashboard_remove_welcome_balloons() {
	?>
	<style>
		.welcome-panel::before { display: none; }
		.welcome-panel { background: none; }
		.welcome-panel-close { display: none; }
	</style>
	<?
}
add_action( 'admin_head', 'dashboard_remove_welcome_balloons' );

The result:

New custom Dashboard widget Welcome Panel WordPress
New custom Dashboard widget Welcome Panel in WordPress.

In this updated Dashboard widget tutorial I skipped adding these gists from the earlier tutorial.
https://gist.github.com/paaljoachim/f9f79b70d0e919bc6f17#file-welcome-panel-php
Original tutorial was written 20 June 2016.

Resources:

https://www.cssigniter.com/make-wordpress-dashboard-widget/
https://www.codementor.io/wordpress/tutorial/detailed-guide-adding-custom-widgets-wordpress-dashboard
https://code.tutsplus.com/articles/customizing-the-wordpress-admin-the-dashboard–wp-33110
https://markwilkinson.dev/2015/using-the-wordpress-admin-for-lead-generation/
https://www.engagewp.com/how-to-create-full-width-dashboard-widget-wordpress/

Share the article:

Leave a Reply

Your email address will not be published.

19 − seven =