User Contributed Notes

1. Skip to note 2 content

   Steven Ayers 5 years ago

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   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+

    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 '
   ';
   
   	// 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 '
   ' . __( 'Error: Couldn't find the page you are looking for.' ) . '
   ';
   
   	}
   
       echo '
   ';
   }
   
   
   /**
    * 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() {
   	?>
   
   	
   Custom widget 1 info here
   
   	
   
   	
   Custom widget 2 info here
   
   	
   
   	
   Custom widget 3 info here
   
   	
   	
   	
   
   	
   Another Page
   	
   Custom content goes here.
   
   	
   
   	
   My Custom Dashboard
   	
   
   
   		
   
   
   			
   
   			
   
   		
   
   
   	
   
   	

   • Unfortunately for me this code does not work. It is not possible to scroll the widgets. It seems to me that wpdocs_plugin_scripts() is not correct. I can’t find a similar example on the Internet.

     perties2 2 years ago