A How to Guide: on Creating a Custom Widget in Your WordPress Dashboard

Samuel Dawson 10th Oct 2020

This tutorial will guide you to create a custom widget in WordPress. As we know a custom widget is very important in WordPress. Widgets are highly useful tools that make the process of dragging and dropping elements in the sidebar or any other widget area of a WordPress website a hassle-free task.

This helps novices' the ability to easily add elements to their site without messing around with the code.

You can find several default widgets when working on a WordPress site. Such widgets help in adding static and dynamic content to the widgetized regions of the WordPress theme.

In fact, WordPress themes and plugins come prepackaged with their own set of widgets. However, using default widgets often you won't be able to implement any extra functionality on your site. If that's the case, then creating a custom widget will prove a viable alternative for you.

In order to help you understand the process of creating a widget, we'll discuss an example that will help you create a custom widget to provide better control of your WordPress website admin dashboard. Now, prior to understanding the process of creating a custom widget, let us first have a brief overview of WordPress widgets.

Widgets in WordPress: An Overview

Widgets were created, at first, to make it easy for WordPress users to control the structure and design of their theme. And now, you can achieve the same purpose more easily, by using WordPress Themes that come with widget-ready areas.

In essence, today many widgetized WP themes are available online, giving you the ability to add pre-defined widgets in the site. To do so, all you need to do is to log in to your WordPress site's admin panel. And then, from the dashboard navigate to the Appearance → Widgets panel, and install the widget of your choice.

Note: Making use of the default widgets saves you from fiddling with the code. But, to make changes to how you want your widget to be displayed in your theme, you need to have some basic knowledge of working with the functions.php file.

Another important thing to consider is that widgets need to be added in your theme's widget areas (like a sidebar, footer, and other widget-ready areas). Sadly, but not all of the themes come with built-in widgetized regions. However, you can create a custom widget area where you would like to add your custom widget. For this, you can either use a plugin or create a widget-area manually by registering it using the "register_sidebar" function.

For example, The below-given code snippet will register a sidebar widget area, named as “My Custom Widget Area” in your dashboard:

register_sidebar(array(
'name' => __('My Custom Widget Area'),
'description' => __('Describe your widget here.'),
'id' => 'first-custom-widget',
'before_widget' => '<div id="%1$s" class="%2$s">',
'after_widget' => '</div>',
'before_title' => '<h1>',
'after_title' => '</h1>'
));

Create a Custom Widget in Your Dashboard: Understanding the Process

Here we'll take an example to demonstrate how you can create a custom widget in your WordPress site dashboard.

function dashboard_widget_function( $post, $callback_args ) {

echo "my first Dashboard Widget";

}

function add_dashboard_widgets() {

wp_add_dashboard_widget('dashboard_widget', 'Example Dashboard Widget', 'dashboard_widget_function');

}

add_action('wp_dashboard_setup', 'add_dashboard_widgets' );

Let us now break down the code to understand its working:

Step 1 - In the very beginning, we're creating a function, named “dashboard_widget_function” that will output the contents that exist in the dashboard widget.

Step 2 - In the second step, we are registering our new custom dashboard widget to tell WordPress that it exists. For doing so, we need to hook our custom dashboard widget “add_dashboard_widgets()” function into “wp_dashboard_setup”, using the default add-action WordPress hook. And then, a call to wp_add_dashboard_widget() is made that contains three parameters, the ones listed below:

 

  • Widget slug (dashboard_widget): helps determine slug (URL) for your custom widget.
  • Widget title (Example Dashboard Widget): identifies the name of your custom widget.
  • Display function (dashboard_widget_function): displays the contents within the custom widget.

Let's Wrap Up!

WordPress widgets are powerful elements that enable you to add elements in your site easily. The widgets are usually added in the sidebar area of a WordPress site or other widget area. You can even find several default widgets, but they might not be able to meet your specific needs. For instance, if you may wish to have better control over your WordPress dashboard, so as to make it more useful for your users.

There are plugins that can help you achieve this objective in an easy manner. However, this post will throw light on how you can create your own - custom dashboard widget - manually.

Summing Up!

WordPress widgets can be used to add custom content to your theme. You can find several default widgets out there, which are usually added to the sidebar but can also be added to other widget-ready areas such as the footer and others.

 

However, as your website grows, you will eventually need to embed additional functionality that the default widgets cannot offer. For instance, you may need to add a sidebar with more options displaying your product categories, or anything else your deem perfect. In that case, a good solution is to create a custom widget tailored to meet your needs.

 

I hope that reading this post will you better understand what widgets are, how you can create your own custom widget inside your WP site admin panel.

Authored By Samuel Dawson

Samuel Dawson has plenty of experience in developing different web applications. He is working as Front-End Developer in Designs2HTML Ltd, a secure psd to responsive html service company involved in various web analysis. Samuel is a choosy person in learning  new things.

Also on DiscussDesk