Breaking down the steps to creating a custom widget
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: 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 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:
- 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.
<?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
}
}
?>
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.