How to Develop Custom WordPress Widgets

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. In a classic theme, you can add the already available widgets in the Appearance→ widgets section (block-based since WordPress 5.8, with older widgets kept in a Legacy Widget block), 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 is best incorporated into the website as a plugin. 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: Clarity Ventures * Author URI: https://www.clarity-ventures.com/ */

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

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:

• 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.

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.

Clarity WordPress Experts

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. If you’re looking for any support or solutions related to CMS or business, please contact us!