Add a Widget Area in your WordPress Admin Dashboard

Date Posted: August 11, 2014, 8:52 am


It would be nice to have a Widget that displays statistics of your Plugin data, statistics in chart form, or just summary of calculated data in table format. In this tutorial I will be showing you how to add a simple widget into your Admin Dashboard that will appear on top of all the other Dashboard Widgets.

In WordPress we have this built in function: “wp_add_dashboard_widget();” which automatically registers a new Widget into the Admin Dashboard, all we have to do is provide the parameters and hook it into the “wp_dashboard_setup”.

Place this block of code into your theme’s functions.php (Explanations are on the code)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets');
function example_add_dashboard_widgets() {
    wp_add_dashboard_widget( 'my_dashboard_widget', 'My Dashboard Widget', 'my_dashboard_widget_function' );
   
    // Globalize the metaboxes array, this holds all the widgets for wp-admin
    global $wp_meta_boxes;
   
    // Get the regular dashboard widgets array with our new widget appearing at the very end
    $normal_dashboard = $wp_meta_boxes['dashboard']['normal']['core'];
   
    // Backup and delete our new dashboard widget from the end of the array
    $example_widget_backup = array( 'example_dashboard_widget' => $normal_dashboard['example_dashboard_widget'] );
    unset( $normal_dashboard['example_dashboard_widget'] );
 
    // Merge the two arrays together so our widget is at the beginning
    $sorted_dashboard = array_merge( $example_widget_backup, $normal_dashboard );
 
    // Save the sorted array back into the original metaboxes
    $wp_meta_boxes['dashboard']['normal']['core'] = $sorted_dashboard;
}

function my_dashboard_widget_function() {
    // You can remove this line and start placing your own codes.
    echo "Start getting your hands dirty on this area.";
}

If you want to remove all the other Widgets that you no longer need, you can click on the “Screen Options” found at the top-right portion of your Admin Dashboard Screen and just uncheck all the other widgets.

In some situations, especially on multi-user blogs, it may be useful to completely remove widgets from the interface. Each individual user can, by default, turn off any given widget using the Screen Options tab at the top, but if you have a lot of non-technical users it might be nicer for them to not see it at all.

You can use this block of code to remove all widgets in your Admin Dashboard:

1
2
3
4
5
6
7
8
9
10
11
12
function remove_dashboard_meta() {
    remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_primary', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_secondary', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
    remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );
    remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
    remove_meta_box( 'dashboard_activity', 'dashboard', 'normal');//since 3.8
}
add_action( 'admin_init', 'remove_dashboard_meta' );

You can now use this as your base code for implementing more sophisticated statistics into your own Dashboard Widget!

Here is a sample jQuery PIE chart that I have integrated into my Dashboard widget which shows the statistics of all browsers that where used by viewers of my website.

dashboard-browser-pie-widget

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me