How to Create WordPress Dashboard Widget Step by Step

Table of Contents

• Introduction
• Why Add a Custom Dashboard Widget?
• How to Create a WordPress Dashboard Widget
  • Step 1: Add Code to functions.php
  • Step 2: Define the Widget Function
  • Step 3: Register the Widget
• Complete Code Example
• Customizing Your Widget
• FAQs

Introduction

A WordPress dashboard widget is a useful tool that displays important information or quick access links inside the WordPress admin dashboard. In this guide, you will learn how to create a custom dashboard widget step by step.

Why Add a Custom Dashboard Widget?

Adding a custom widget to the dashboard can help display useful information such as:

• Website statistics
• Recent orders or sales data
• Quick links to important sections
• Custom messages for administrators or editors

How to Create a WordPress Dashboard Widget

Follow these simple steps to create a WordPress dashboard widget.

Step 1: Add Code to functions.php

To begin, open your theme’s functions.php file and add the following code:

function custom_dashboard_widget() {
    echo "<p>Welcome to your custom dashboard widget!</p>";
}

Step 2: Define the Widget Function

Now, define a function to create the widget and display content:

function add_custom_dashboard_widget() {
    wp_add_dashboard_widget('custom_dashboard_widget', 'My Custom Widget', 'custom_dashboard_widget');
}

Step 3: Register the Widget

Finally, hook the function to wp_dashboard_setup so it loads when the dashboard initializes:

add_action('wp_dashboard_setup', 'add_custom_dashboard_widget');

Complete Code Example

Here is the complete code to create your WordPress dashboard widget:

function custom_dashboard_widget() {
    echo "<p>Welcome to your custom dashboard widget!</p>";
}

function add_custom_dashboard_widget() {
    wp_add_dashboard_widget('custom_dashboard_widget', 'My Custom Widget', 'custom_dashboard_widget');
}

add_action('wp_dashboard_setup', 'add_custom_dashboard_widget');

Customizing Your Widget

You can modify the widget content by adding:

Adding an Image

echo "<img src='https://example.com/image.jpg' alt='Dashboard Image' style='width:100%;'>";

Adding a Button

echo "<a href='https://example.com' class='button button-primary' style='display:inline-block; padding:10px; background:#0073aa; color:#fff; text-decoration:none;'>Click Here</a>";

Adding a Link

echo "<p><a href='https://example.com'>Go to Custom Page</a></p>";

Displaying Dynamic Data (Example: Current User Name)

$current_user = wp_get_current_user();
echo "<p>Hello, " . esc_html($current_user->display_name) . "!</p>";

Example with an Admin Notice

echo "<div style='background: #ffeb3b; padding: 10px;'>Important notice: Don't forget to update your plugins!</div>";

FAQs