How to Add Custom Dashboard Widgets in WordPress

In this article, you will learn how to add customize dashboard widget in WordPress.

Using Dashboard Widget API you can add the widgets on the dashboard.

wp_dashboard_setup is the action hook used for adding or removing dashboard widgets from WordPress.

wp_add_dashboard_widget() function is used to add widget to the administration dashboard.

Add the below code into functions.php,

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

function my_custom_dashboard_widgets(){
   global $wp_meta_boxes;
 
   wp_add_dashboard_widget( 'custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}

function custom_dashboard_help() {
   echo "hello, this is your widget content";     
}

If you want to add js and CSS into a custom dashboard widget, you need to enqueue

You can add JS and CSS into a custom dashboard widget using the admin_enqueue_scripts hook.

function custom_dashboard_widget_enqueue_scripts_css() {

  wp_enqueue_style( 'custom-dashboard-widget-css', get_template_directory_uri() . '/css/custom-admin-style.css' );
        wp_enqueue_script( 'custom-dashboard-widget-js', get_template_directory_uri() . '/css/custom-admin-script.js' );
  
}
add_action( 'admin_enqueue_scripts', 'custom_dashboard_widget_enqueue_scripts_css' );

You can see a new widget similar to the screenshot below.