How to Create Custom WordPress Widgets?

Those who run WordPress-powered websites understand the importance of adding widgets to their sites.

Widgets are a great way to add content and additional features to your website. They make it extremely easy for you to simply drag and drop several elements, such as the sidebar, header, footer and even as blocks on your website.

You can make your website useful for your visitors by utilizing widgets correctly. And the best thing about them is you can use them anywhere you want, thus helping users to find more content on your website.

Many WordPress users always search for the perfect WordPress widget that will help them do exactly what they want, but with a little technical knowledge and coding skills, you may find it easier for you to create your own WordPress custom widget.

image 6

In this tutorial, I am going to show you the ways through which you can create your custom widget. For a better understanding, I’ll be covering some extra points that you need to understand before you start creating the widget itself.

Where You Can Place a Widget Code?

WordPress usually provides two options for placing a widget in a plugin or inside a theme. If you decide to place it inside the theme, the widget will get activated as soon as the theme is available for activation.

Although, it will get disappear as soon as the user has changed the theme. On the contrary, if you decide to place it inside the plugin, it will be available till the plugin is activated. Although, it’s entirely up to the user where they want to place a widget.

But as the widget is something that is related to the looks of a website, developers mostly prefer to place them inside the theme.

Web owners must try to analyze whether they want a widget that is dependent on the theme or not. If they want a widget regardless of the theme, then it’s better to go ahead with the plugin.

In this article, we are going to discuss the ways through which one can create a custom WordPress widget by using both plugin and theme ways.

Creating WordPress Widget in Plugin

  • To create a widget in the plugin, first you need to go to your WordPress installation directory using a FTP app like Filezilla and then navigate to /wp-content → plugins.
  • After this, start creating a new .php file for your plugin. Give it a name, anything you like but make sure it should be in tune with the standards laid down by WordPress.
  • Once you create the file, take out any text editing tool and start editing the file.
  • Now, paste the below-mentioned code on the top of the file.
/**
 * The plugin bootstrap file
 *
 * This file is read by WordPress to generate the plugin information in the plugin
 * admin area. This file also includes all of the dependencies used by the plugin,
 * registers the activation and deactivation functions, and defines a function
 * that starts the plugin.
 *
 * @link              https://gauravtiwari.org
 * @since             1.0.0
 * @package           Dynamic_Month_Year_Into_Posts
 *
 * @wordpress-plugin
 * Plugin Name:       Dynamic Month & Year into Posts
 * Plugin URI:        https://gauravtiwari.org/snippet/dynamic-month-year/
 * Description:       Insert Dynamic Year and Month into content and meta using shortcodes.
 * Version:           1.2.2
 * Author:            Gaurav Tiwari
 * Author URI:        https://gauravtiwari.org
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:       dynamic-month-year-into-posts
 */

// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
    die;
}
define( 'DYNAMIC_MONTH_YEAR_INTO_POSTS_VERSION', '1.2.2' );

Here change URLs, version numbers, text-domain and everything else as per your needs.

  • After updating the information, save all the changes.
  • In the next step, sign in to your WordPress dashboard and navigate to the Plugins → Installed plugins.

Now hold on to this step. Let’s see how you’d start creating custom widgets inside the theme.

Creating Widget Inside the Theme

For creating a widget inside the theme, first of all we have to extend the default
WP_widgetclass. The process is pretty simple, all you need to do is create a new class, which will automatically take over all the features and properties of WP_widgetclass.

In the next step, we will proceed toward creating a custom functionality to bring an added edge to your widget. Just write the below mentioned code before the closing php tag of your theme’s function.php file.

Leaving any space between the code could generate errors in your theme, so make sure not to leave any blank space while writing.

<?php
class My_Widget extends WP_Widget {
public function widget( $args, $instance ) {
echo 'My New WordPress Widget !!';
} }

Up to this, you’ve successfully created a widget, but it’s not functional yet. We have to make it work by following some steps.

Adding Widget to WordPress

We have strategically utilized WP_Widget Class for creating a widget, but we haven’t still informed WordPress about this newly created widget. To do this, we have to add the following code to ‘hook’ widget:

add action( 'widgets_init', 'my_widget');
function my_widget() {
register_widget( 'My_Widget' );
}

This is a method of informing WordPress that you’ve created your widget and it’s ready for being processed.

Exploring Your Newly Created Widget

If you’ve followed this tutorial closely, then it’s time to congratulate yourself as you’ve successfully created your first widget. But creating a widget isn’t enough until you don’t add a description or any label on what it actually does. To do this, we recommend you to add a constructor on your widget. This will help you add information about your widget. Simply paste the following code after the widget() function.

function __construct() {
parent::__construct( 'my_widget', // Base ID of your widget
__('My New Widget', 'text-domain'), // name of the widget
array( 'description' => __( 'This is the my newly created widget', 'text-domain' ),) // Widget description
);
}

The process looks quite daunting to beginners, although it’s quite easy. Let me give you a straightforward description for this:

There is some pre-defined set of rules and standards which you have to follow while working with the construct method. They are:

  • The first parameter should be the ID of your custom widget
  • Second, names that are going to be displayed on the widget list
  • Third is the array, which normally contains a brief description about a widget.

Now, refresh your website and you’ll observe the widget functioning on your website.

It isn’t difficult to create a custom widget to do exactly what you want. Just follow the steps, and you are ready to go.

Read this WordPress developer handbook to go advance.

Disclaimer: My content is reader-supported, meaning that if you click on some of the links in my posts and make a purchase, I may earn a small commission at no extra cost to you. These affiliate links help me keep the content on gauravtiwari.org free and full of valuable insights. I only recommend products and services that I trust and believe will genuinely benefit you. Your support through these links is greatly appreciated—it helps me continue to create helpful content and resources for you. Thank you! ~ Gaurav Tiwari