Need to make a custom dashboard for your custom plugin?

The following code will create a fully functional dashboard that can be rearranged by the user. Once the user rearranges it, the order of the widgets for that dashboard are saved in the user’s settings.

1. Creates a menu item located here: Admin > Tools > My Custom Plugin
2. 2 pages: Dashboard and Another Page (placeholder)
3. Includes top navigation to navigate between pages. (needs some styling)
4. This is fully functional dashboard with 3 placeholder widgets.
5. Compatible with PHP 7.4+

<?php

/**
 * Add A Setting Page: Admin > Tools > My Custom Plugin
 */
function wpdocs_plugin_admin_menu() {

	add_submenu_page( 'tools.php', __( 'My Custom Plugin' ), __( 'My Custom Plugin' ), 'manage_options', 'wpdocs-plugin-slug', 'wpdocs_pages' );

}
add_action( 'admin_menu', 'wpdocs_plugin_admin_menu', 9999 );

/**
 * This handles which template loads based on the GET vars
 */
function wpdocs_plugin_pages() {

    global $current_user_id;

    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die( 'You do not have permission to view this page.' );
    }

    $tab = $_GET['tab'] ?? '';

    echo '<div class="content-body">';

	// Load the header nav
	wpdocs_plugin_header();

	if ( in_array( $tab, array( '', 'dashboard' ) ) ) {

		// Load Dashboard
		wpdocs_plugin_dashboard();

	} elseif ( 'another-page' === $tab ) {

		// Load Another Page
		wpdocs_plugin_another_page();

	} else {

		echo '<p>' . __( 'Error: Couldn't find the page you are looking for.' ) . '</p>';

	}

    echo '</div>';
}


/**
 * Loads the scripts needed on the Dashboard page
 */
function wpdocs_plugin_scripts() {

	$page = $_GET['page'] ?? '';
	$tab = $_GET['tab'] ?? '';


	// This condition is assumes you will have more than 1 page for your plugin's admin area
	// The other pages of your admin would be relying on $_GET['tab']
	if ( 'wpdocs-plugin-slug' === $page && in_array( $tab, array(
		'',
		'dashboard',
	] ) ) {

		wp_enqueue_script( 'dashboard' );
		wp_admin_css( 'dashboard' );
		add_thickbox();

	}

}
add_action( 'admin_enqueue_scripts', 'wpdocs_plugin_scripts', 9 );


/**
 * Registers the dashboard widgets to be displayed
 */
function wpdocs_plugin_register_widgets() {

	wp_add_dashboard_widget( 'wpdocs_plugin_widget_1', __( 'Custom Widget 1' ), 'wpdocs_plugin_widget_1', null, null, 'normal' );
	wp_add_dashboard_widget( 'wpdocs_plugin_widget_2', __( 'Custom Widget 2' ), 'wpdocs_plugin_widget_2', null, null, 'side' );
	wp_add_dashboard_widget( 'wpdocs_plugin_widget_3', __( 'Custom Widget 3' ), 'wpdocs_plugin_widget_3', null, null, 'side' );

}


/**
 * Creates the display code for the custom widget
 */
function wpdocs_plugin_widget_1() {
	?>

	<p>Custom widget 1 info here</p>

	<?php
}

/**
 * Creates the display code for the custom widget
 */
function wpdocs_plugin_widget_2() {
	?>

	<p>Custom widget 2 info here</p>

	<?php
}

/**
 * Creates the display code for the custom widget
 */
function wpdocs_plugin_widget_3() {
	?>

	<p>Custom widget 3 info here</p>

	<?php
}

/**
 * Header of the admin templates
 */
function wpdocs_plugin_header() {
	// Add your own styling so that it will look better
	?>
	<nav>
		<ul>
			<li><a href="<?php echo esc_url( admin_url( 'tools.php?page=my-custom-plugin-slug&tab=dashboard' ) ); ?>">Dashboard</a></li>
			<li><a href="<?php echo esc_url( admin_url( 'tools.php?page=my-custom-plugin-slug&tab=another-page' ) ); ?>">Another Page</a></li>
		</ul>
	</nav>
	<?php
}

/**
 * Another Page Template
 */
function wpdocs_plugin_another_page() {
	?>

	<h1>Another Page</h1>
	<p>Custom content goes here.</p>

	<?php
}


/**
 * This displays the template for the dashboard for my custom plugin
 */
function wpdocs_plugin_dashboard() {
	// Load the admin dashboard code from core
	require_once ABSPATH . 'wp-admin/includes/dashboard.php';

	// Register Widgets TO Be Displayed
	wpdocs_plugin_register_widgets();
	?>

	<h1>My Custom Dashboard</h1>
	<div class="wrap">

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

			<?php
			// Display Widgets
			wp_dashboard();
			?>

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

	</div><!-- wrap -->
	<?php
}