How to Create Custom WordPress Dashboard Widget using Code?

Customizing Dashboard widgets is essential for personalizing the WordPress admin experience to specific needs. Whether you want to display custom data, provide unique functionality, or simply personalize your Dashboard to reflect your brand, knowing how to create custom WordPress Dashboard widgets is a valuable skill.

Add Google Calendar in the WordPress Dashboard Widget by creating a simple Plugin.

Before we dive into creating custom WordPress Dashboard widgets, it's essential to ensure that you have the necessary prerequisites in place. Here's what you'll need:

Before jumping into the steps, keep in mind to read this WordPress Custom User Dashboard post. It will help you achieve a personalized WordPress Dashboard.

1. Basic Knowledge of WordPress Development: You should have a fundamental understanding of WordPress and how it works, including its structure, core functionality, and the role of themes and plugins.

2. Familiarity with PHP and WordPress Functions: Since we'll be working with code, you should be comfortable with PHP, the programming language that powers WordPress. Understanding how WordPress functions and hooks work will also be beneficial.

3. Access to WordPress Website Files: You'll need access to your WordPress website's files, either through FTP or a file manager provided by your hosting provider. This access is crucial for editing and adding code.

4. Code Editor: A code editor is essential for writing and editing PHP and other code files. Popular options include Visual Studio Code, Sublime Text, and PhpStorm.

With these prerequisites in place, you'll be well-equipped to follow along and create your custom WordPress dashboard widget using code. In the next sections, we'll provide step-by-step instructions and examples to help you achieve this customization effectively.

Create Custom WordPress Dashboard Widget

Open Your Theme's functions.php File

You can add the following code to your theme's functions.php file or create a custom plugin. It's generally a better practice to use a custom plugin for such functionality to keep your code modular and maintainable.

Define the Dashboard Widget Content:

You'll need to create a function that generates the content you want to display in your custom dashboard widget. For this example, we'll create a simple widget displaying a welcome message and some information. Here is a referance content for Developing Dashboard Widget.

function custom_dashboard_widget_content() {
    echo '<div class="welcome-widget">';
    echo '<h2>Welcome to Your Custom Dashboard Widget!</h2>';
    echo '<p>This is where you can provide information, links, or other content for your users. This is just a demo text, see how it works.</p>';
    echo '</div>';
}

Register the Dashboard Widget:

Next, you'll register the dashboard widget using the wp_add_dashboard_widget function. This function takes the widget ID, title, and the function that generates the content.

function enqueue_custom_dashboard_widget_styles() {
    wp_enqueue_style('custom-dashboard-widget-styles', get_template_directory_uri() . '/custom-dashboard-widget.css');
}
add_action('admin_enqueue_scripts', 'enqueue_custom_dashboard_widget_styles');

Styling (Optional):

You can style your dashboard widget using CSS. You can enqueue your CSS file in the wp_enqueue_scripts hook.

function enqueue_custom_dashboard_widget_styles() {
    wp_enqueue_style('custom-dashboard-widget-styles', get_template_directory_uri() . '/custom-dashboard-widget.css');
}
add_action('admin_enqueue_scripts', 'enqueue_custom_dashboard_widget_styles');

Don't forget to create a custom-dashboard-widget.css file in your theme directory to define your widget's styles.

Save your changes, and you're done!

After adding this code to your theme's functions.php, visit your WordPress dashboard. You should now see your custom dashboard widget displaying the content you defined.

That's it! You've created a custom WordPress dashboard widget using code. You can further enhance this widget by adding dynamic content, links, or any other features you require for your specific use case.

Create Dashboard Widget using WP Adminify

Take a look at Custom Dashboard Widget by WP Adminify features first. It offers huge dynamic features to create attractive Dashboard Widget.

After installing WP Adminify Plugin, navigate to WP Adminify option panel> Dashboard Widget > Add New Widget.

Now, inside the editor you have to write your Dashboard Widget Content. You can define 6 type of WordPress Dashboard Widget (Required WP Adminify PRO) called Editor, Icon, video, Shortcode, RSS Feed, Script. Select your desired Type and add your content.

Here is the final output of my Custom Dashboard Widget.

Edit WordPress Dashboard Welcome Widget

Using WP Adminify, it's easy to Create new welcome Widget for your Dashboard too.

You can get a output like the following screenshot of your Welcome Widget.

You can showcase a Gallery slider, contact form, or anything using shortcode. Here is a example of gallery slider.

That's all about how you can create WordPress Dashboard Widget. I've covered the necessary prerequisites, walked through the code structure for a custom widget, and provided examples to guide you through the process. By following these steps, you can customize your WordPress dashboard to your specific needs and preferences.

I encourage you to experiment with creating custom widgets. WordPress's flexibility allows you to get creative and build widgets that cater precisely to your requirements. Don't hesitate to explore new ideas, experiment with different data sources, and make your WordPress dashboard truly your own.