Implement Custom Summary boxes with WordPress Dashboard

  • Ben
  • 0
  • Feb 11, 2015
  • Web Development

Just to reiterate, WordPress dashboard is the admin panel for the webmaster of a WordPress website. But this statement goes only as far as sounding like a Wikipedia definition.

The most appealing aspects of a WordPress dashboard include its amazing versatility, user-friendliness and a wide range of wholesome features. Webmasters can avail multifarious options via the dashboard to gain deeper insights into their website. Features like drag & drop make organizing different elements on the dashboard a breeze.

But it is the remarkable customization capability of a standard WordPress dashboard that truly sets it apart and gives more room to webmasters to experiment. Talking of customization, the ever-growing competition on the web has meant that webmasters need to continually evolve ways that can help them gain a stronger grasp on their website’s functionality and inject features that can give them broad overview of their website’s dynamics.

Data is the new fuel for powering a website’s success. And the WordPress dashboard must display more information for the site admins for them to gain a clearer insight. The site admins can also benefit from the greater control over the website’s features and this is where certain customization come handy. You need to know of the methods to inject features like a summary box that explains the roles of all the users on the website (like editors, authors, admins, subscribers, etc.), or a summary box that puts forth the latest posts published by each user, or for that matter, a box that lets the site admin to change the role of a particular user. The site admins who prefer a greater control over their website find this flexibility extremely handy and can leverage the same for creating more data streams on the dashboard.

In this post, I am sharing how I used a few lines of very easy-to-follow code to integrate custom summary boxes with the WordPress dashboard, via the custom widgets. Read on:

Creating a Simple Custom Summary Box

To begin with, we will create a simple “Hello World” widget that should serve as the foundation for adding more functions and features at later stages.

So, to your current WordPress theme’s functions.php file, you can add the following lines of code to build the custom box:

// Function that outputs the contents of the dashboard widget function dashboard_widget_function( $post, $callback_args ) { echo "Hello World, 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'); } // Register the new dashboard widget with the 'wp_dashboard_setup' action add_action('wp_dashboard_setup', 'add_dashboard_widgets' );
// Function that outputs the contents of the dashboard widget
function dashboard_widget_function( $post, $callback_args ) {
    echo "Hello World, 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');
}

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

In the above code, the first step involves coding for outputting the widget content and displaying the text between the quotes. As you can see, the widget is labelled as “Example Dashboard Widget”, using the function in the action hook. But the exercise won’t be completed unless we register the widget with wp-dashboard-setup. Again, you only need a single line of function to implement that.

Here is the snapshot I have taken for the summary box that is generated by the above code:

WordPress Summary Box

Making the Summary Box More Functional

Now that we know how to put in place a basic yet fully functional summary box in a WordPress dashboard, it would be a good idea to make it a little more versatile and functionally richer.
I have already gone about how we can use the summary boxes to add more chunks of data on the dashboard. So, let me elaborate on one of the features, i.e. displaying the user roles in a summary box.

I’ll demonstrate it by adding a few simple lines of code to a mother function. I will get list of users in summary box.

// Function that outputs the contents of the dashboard widget function dashboard_widget_function( $post, $callback_args ) { //Put your all code here which generate the output of summary box $site_users = get_users(); foreach ( $site_users as $user ) { echo $user->display_name; echo $user->roles[0]; echo get_edit_user_link( $user->ID ); } }
// Function that outputs the contents of the dashboard widget
function dashboard_widget_function( $post, $callback_args ) {
   
//Put your all code here which generate the output of summary box

$site_users =  get_users();
foreach ( $site_users as $user ) {

     echo $user->display_name;
     echo $user->roles[0];

     echo get_edit_user_link( $user->ID );

  }

}

Code Summary

It’s hard to gather much by just looking at the code, right? Let me just explain what role does each function in the code perform

$site_users = get_users() – The function (get_users()) comes by default with the WordPress installation. The role of this function is to fetch the details of all the users by the means of an array.

Now, what I need here is to fetch the details of individual users so that there is a proper segregation. And for facilitating the same, I have used the foreach ( $site_users as $user ) { } function. It is essentially used as a loop that obtains the user details one by one:

echo $user->display_name; // (Display the user name) echo $user->roles[0]; // (Display user role) echo get_edit_user_link( $user->ID ); // As the name suggests, this function (get_edit_user_link) give you the user edit link by passing user id to that function
echo $user->display_name; // (Display the user name)
echo $user->roles[0]; // (Display user role)
echo get_edit_user_link( $user->ID );
// As the name suggests, this function (get_edit_user_link) give you the user edit link by passing user id to that function

Now, if you wish to make it visually more appealing, there is a host of HTML tags for you to try out. These HTML tags can help you charm up the widget with custom colors for the background and tinker around with the alignment.

WordPress Summary Box

Here is how our new summary box looks with the user roles clearly defined:

Just like we have added the custom summary box specifying the user roles, you can make use of the same functions and techniques to add content of your choice to the summary box.

function dashboard_widget_function( $post, $callback_args ) is the mother function that can be leveraged to achieve several different type of customization. You can add code below it for any feature of your choice and it will be integrated on the dashboard in the summary box. Or, you can add the HTML Echo for displaying the content.

What needs to be clearly understood here is that the summary box you are creating via the above method behaves just like the default summary boxes on a standard WordPress dashboard. There are no functional compromises here. The features like drag & drop work in perfect unison with the custom summary boxes.

Related Posts

Written by Ben

Ben Wilson is a professional WordPress developer for a leading PSD to Wordpress conversion company. He also provides conversion services like HTML to WordPress theme and many more. If you are looking for the afforsaid services feel free to contact him.

View all posts by: