In this article, we've answered some of the most basic yet necessary questions about WordPress Widgets. Like, what are widgets, why use them, how to use them, and the different ways of using them. However, our primary focus is on creating custom widgets for your WordPress website.

What Are Widgets?

Widgets add content and functionality to widget areas such as the sidebar, footer area, or potential widget-ready areas. By default, WordPress and the theme of your website have predefined widget-regions. You can also create custom widget areas if your theme is compatible to do so. However, it would be best if you tried to keep the number of widget areas to a maximum of two as a good practice.

Widgets in WordPress are nothing but a PHP object that outputs into HTML. You can make them appear throughout all the pages of your website or on selected pages.

Some examples of widgets are:

• We often see a search box on websites/blogs; that's a widget.
• Social media feeds like YouTube, Twitter, etc.

Why Use Widgets?

Widgets come in very handy for multiple purposes; they add to your website's overall user experience. The functionality that we add to the website via widgets could vary widely. It could be features that would improve user interaction or attract traffic or increase your engagement with the audience. For instance, in most of the websites, we have seen call-to-action buttons like "next article," "recent posts," "newsletter subscription" in the sidebar widget area. And other links like "careers with us," "about us," etc. in the footer area. These buttons and links are strategically placed in the regions that could grab the user's attention.

Developing a Custom WordPress Widget

Few widgets are included during WordPress installation, and you can further enhance the functionality by adding additional widgets through theme and plugins. You can add the already available widgets in the Appearanceà widgets section, as shown in the picture below. Or you can also add widgets in the customize section of your WordPress website’s admin panel.

Nevertheless, sometimes we don't find the right widget in the plugin library to meet our requirements. In this situation, you can develop a custom widget.

Note: A custom widget can be incorporated into the website as a plugin only. Which means you should develop a widget as a plugin.

Adding widgets through a plugin has an advantage over a widget added through the theme. A plugin added widget is preserved even if the theme is changed. However, vice-versa is not true; another great reason to develop custom widgets. Let's start to create a custom WordPress widget!

Step 1: Create a Plugin for Your Custom Widget

Before we begin to create our custom WordPress widget, I recommend you to take a back-up of your website just to be safe. In case you want your widget to be available only for your theme, you can go ahead and add the code in your functions.php file. Otherwise, you can create a new plugin so that it’s available throughout, irrespective of the theme applied.

To create an empty plugin, we'll navigate to /wp-content/plugins/ then** create a new directory with your widget's slug. In this directory, I’ll create an index.php file and add the below content.

<?php
/**
 * Plugin Name: Thought for the day
 * Plugin URI: give URI here
 * Description: A simple widget to display thoughts.
 * Version: 1.0
 * Author: pujago
 * Author URI: https://www.pujago.com/ */

Once you have created an empty plugin, you will see that your plugin appears in the list of active plugins in the WP admin panel.

Step 2: Extend the WordPress Widget Class

Now that we have our plugin, we’ll add the widget code into it. The first step would be to extend the WordPress widget class, WP_Widget. WP_Widget class is in wp-includes/class-wp-widget.php location. This is how the WP_Widget class looks like:

<?php
class Thought_for_the_day extends WP_Widget {
    public function __construct() {
        // actual widget processes
    }
    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }
    public function form( $instance ) {
        // outputs the options form in the admin
    }
    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }
}
?>

• You will write your widget code in the function widget. Here, the $args parameter provides the HTML you can use to display the widget title class and widget content class.
• Construct: Helps you set up your widget with a description, name, and display width in your admin.
• Form: You can use this to display the form that will be used to set the options for your widget. If your widget doesn’t have any options, you can skip this.
• Update: Helps you save the widget options to the database. If your widget doesn’t have any options, you can skip this function.

Step 3: Register Your Custom Widget

After we have defined our widget class, we need to register the widget using register_widget method. We call this function using the widgets_init hook.

<?php
add_action( 'widgets_init', 'wpdocs_register_widgets' );
function wpdocs_register_widgets() {
    register_widget( 'Thought_for_the _day' );
}
?>

Step 4: Use Your Custom Widget in a Widget-Area

Now, you will have to add your custom widget to the widgets section of the admin panel. The last step would be to add the custom widget in any widget-ready area of your website. Once added, you can refresh your homepage, and your custom widget will appear on the screen. At this point, we have developed our first custom WordPress widget.

Wrapping Up

In this article, we learned a few simple ways to develop a custom widget for your WordPress site. Remember to back-up your website before playing around with the code. Placing the widgets in key areas to grab a user’s attention is one of the widget development details. I hope this tutorial provided some insight into WordPress widget development.