Displaying custom summary boxes on WordPress dashboard

You cannot overstate the fact that among the biggest strengths of WordPress as a content management, the WordPress dashboard stands tall. What we can refer to as an admin panel, the dashboard lets the website owners to manage their website seamlessly with remarkable efficiency.

The WordPress dashboard has several virtues that make it so popular in the web development community. The exceptional level of dynamism, easy to understand user interface and a large set of great features well and truly make it a system to reckon with. And then, there are features like drag & drop that further elevate it as the numero uno platform.

Coming back to the customization capability, while the WordPress dashboard’s user-friendly interface but there could be certain features that a webmaster would love to have with their standard dashboard, and can’t find such default features e.g. as an admin you may need to check real quick who amongst all authors published posts last night. This specific information is not available with WordPress dashboard, hence requirement for some customization comes in to picture. Since we need it on our first dashboard, we should use summary boxes to populate this information.

Now lets first understand what summary boxes are?

Summary boxes can be located right on the first screen of your dashboard. As you can see in the picture, they are a way for the admin to find out some statistics or evaluate some data in lieu to their website. Also, they can help the site admins to get a tighter grasp on the kind of feature that their website should or should not contain.

Summary box in WordPress dashboard

This post will cover aspects of generating a summary boxes, how you can insert a simple content and extend that simple content further to WordPress functions, generating systematic outputs as per your requirements. We have included a complex function of generating a list of all users with quick links to edit their profile in the summary box to represent how you can handle complex functions within summary boxes.

Building a Basic Custom Summary Box

We will first begin with absolute basics and create a summary box that simply displays the text “Hello World”. It can then later on be used as a platform to add more complex functions and features.

For creating this simple summary box, add the following code to the functions.php of your WordPress theme:

// Function for outputting the content of dashboard widget
function dashboard_widget_function( $post, $callback_args ) {
echo “Hello World, this is my first Dashboard Widget!”;

As is self-explanatory, the above lines will output the text, “Hello, this is my first dashboard widget”.

// Function used in the action hook
function add_dashboard_widgets() {
wp_add_dashboard_widget(‘dashboard_widget’, ‘Example Dashboard Widget’, ‘dashboard_widget_function’);

We have labelled the summary box as Example Dashboard widget for which, we have included a function inside the action hook.

// Register the new dashboard widget with the ‘wp_dashboard_setup’ action
add_action(‘wp_dashboard_setup’, ‘add_dashboard_widgets’ );

The final step involves registering the summary box, and in our code, we register it using wp-dashboard-setup.

The summary box created using the above lines will look like the one in the picture:

Building a basic custom summary box in WordPress dashboard

Adding More Dynamism to the Summary Box

With the basic custom summary box in place, we now proceed with making it more dynamic and adding a feature that will give us some some real time data. In our example, we will add functions which will allow the dashboard to display all the users on our site, alongside their roles.

// Function for outputting the summary box contents

function dashboard_widget_function( $post, $callback_args ) {

//The code for generating the output of summary box comes here

$site_users = get_users();
foreach ( $site_users as $user ) {
echo $user->display_name;
echo $user->roles[0];
echo get_edit_user_link( $user->ID );

Explaining the Code

For the folks who would prefer more explanation on the code and the mentioned functions, here is the break down:

$site_users = get_users() – It is a default WordPress function that extracts the user details using an array.

foreach ( $site_users as $user ) { } This function helps in the segregation of the users and it obtains the user details individually.

echo $user->display_name; Display the user name

echo $user->roles[0]; Display user role

echo get_edit_user_link( $user->ID ); This function passed the user id to provide the user edit link.

You can also alter the visual character of your WordPress dashboard by the use of some simple enough HTML tags. These tags can be used to add some color and vibrancy to the custom summary box you have created and alter the background.

The summary box explicitly mentioning the user roles looks like this:

Create custom summary boxes on WordPress dashboard

It is worth noting that the above procedure that has gone on to displaying the user roles through the custom summary box can be used to inject several other functionalities. You can use the same functions and techniques to add any type of content to the summary boxes.

The function, function dashboard_widget_function( $post, $callback_args ) is a mother function that you can use at n number of places to bring into effect the preferable customization on your dashboard. For any sort of feature to be injected to dashboard, you simply have to add the code for it below this mother function. The custom summary box you create using the above functions will behave in exactly the same way as the default summary boxes on the dashboard.

Now, it should be possible for you to implement these summary boxes on the dashboard and fetch all the important stats and informational bits without any delay.