How to Add Custom Dashboard Widgets in WordPress

As a WordPress developer, you may want to add custom dashboard widgets to help your clients manage their website more efficiently. In this tutorial, we’ll walk you through the steps to create and add your own custom dashboard widgets in WordPress without using any plugins.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Create the Widget Function

To create a custom dashboard widget, you need to start by creating a function that will output the content of your widget. This function should be added to your child theme’s functions.php file or a custom plugin file.

In the example below, we’ve created a custom dashboard widget function called custom_dashboard_widget that outputs a heading and a paragraph of text. You can modify this function to output whatever content you want to display in your custom dashboard widget.

function custom_dashboard_widget() {
    ?>
    <h2>Hello World!</h2>
    <p>This is my custom dashboard widget.</p>
    <?php
}
Code language: PHP (php)

Add the Widget to the Dashboard

Now that you have created the function for your custom dashboard widget, you can add it to the dashboard. WordPress has a hook called wp_dashboard_setup that you can use to add your widget. Next, you need to use the wp_add_dashboard_widget() function to add your custom dashboard widget to WordPress. Here is an example function that you can use to add your custom dashboard widget:

function add_custom_dashboard_widget() {
    wp_add_dashboard_widget( 'custom_dashboard_widget', 'Custom Widget Title', 'custom_dashboard_widget' );
}
add_action( 'wp_dashboard_setup', 'add_custom_dashboard_widget' );
Code language: PHP (php)

In the code above, we first create a function called add_custom_dashboard_widget which will add our custom widget to the dashboard. We then use the wp_add_dashboard_widget() function to add our widget to the dashboard. The first parameter is the ID of our widget, the second parameter is the title that will be displayed, and the third parameter is the function custom_dashboard_widget we created earlier that outputs the content of our widget.

Replace Custom Widget Title with the title you want to give your widget, and custom_dashboard_widget with the name of the function you created in Step 1.

Style Your Widget

By default, the custom dashboard widget will be added to the right-hand side of the dashboard. However, you may want to style your widget to make it stand out or match your site’s branding. To do this, you can add custom CSS to your widget using the admin_head action hook.

Here’s an example function that you can use to add custom CSS styles to your widget:

function custom_dashboard_widget_styles() {
    ?>
    <style>
        #custom_dashboard_widget {
            /* Widget styles go here */
        }
    </style>
    <?php
}
add_action( 'admin_head', 'custom_dashboard_widget_styles' );
Code language: PHP (php)

In the code above, we create a function called custom_dashboard_widget_styles that outputs some custom CSS for our widget. We then use the admin_head hook to add our custom CSS to the head of the admin dashboard.

Replace custom_dashboard_widget with the ID of your custom dashboard widget.

Final code

Here is the full code that you can add to your functions.php file to create a custom dashboard widget:

function custom_dashboard_widget() {
    ?>
    <h2>Hello World!</h2>
    <p>This is my custom dashboard widget.</p>
    <?php
}

function add_custom_dashboard_widget() {
    wp_add_dashboard_widget( 'custom_dashboard_widget', 'Custom Widget Title', 'custom_dashboard_widget' );
}
add_action( 'wp_dashboard_setup', 'add_custom_dashboard_widget' );

function custom_dashboard_widget_styles() {
    ?>
    <style>
        #custom_dashboard_widget {
            /* Widget styles go here */
        }
    </style>
    <?php
}
add_action( 'admin_head', 'custom_dashboard_widget_styles' );
Code language: PHP (php)

That’s it! Adding custom dashboard widgets in WordPress can be a useful way to provide your clients with quick access to important information or custom functionality. By following the steps outlined in this tutorial, you can create and add your own custom dashboard widgets in WordPress without using any plugins. Remember to customize the content and styling of your widget to make it unique and useful for your clients.