How to create a WordPress Widget

WordPress widgets make it easier for a user to simply add something on footer or side bar by drag and drop elements. Widgets generally come with plugins and themes. But what if you want to create your own widget? In this post, I will show you how to create your own custom WordPress widget.

Before we start with the code part, you should know that there are two ways of creating the widget. You can either add the widget code directly in the functions.php file of the theme or you can create a site wide plugin for this. Adding code in functions.php will work, but this widget will only be available for the current theme. If you change the theme, you will have to copy the same widget code in the theme file. But creating a site wide plugin will have no effect of theme change. Your widget will be theme independent.

Also read: How to Speed up WordPress Blog [Guide]

You can decide what you want to do. So, first we will see how to create a site wide plugin. If you do not want to create site wide plugin and are comfortable with modifying functions.php file, you can skip this part.

Create site wide plugin

Step 1: For this, we will create a simple plugin for adding all our custom codes to the WordPress site. Follow these steps:

Step 2: Go to the plugins folder and create a new folder “myplugin”.

Step 3: In this new folder, create a new php file and save it as “myplugin.php” name.

Step 4: Now put this code in the file

<?php
/*
Plugin Name: Site specific plugin
Description: Site specific plugin to add codes
*/
/* add code below this */


?>

 Step 5: Now activate this new plugin from WordPress Dashboard.

Create a WordPress Widget

Now we will see how to create a WordPress widget. If you can these codes to your site wider plugin or theme’s functions.php file.

To create a widget, you need to extend the standard WP_Widget class and its functions. So, the basic widget will look like this. Change the name of Widget and description as per your choice

class My_Custom_Widget extends WP_Widget 
{
public function __construct() {
// widget actual processes
parent::WP_Widget(false,'My Custom Widget TItle','description=Description of custom Widget'); //Title and description will be shown on Widgets page
}

public function widget( $args, $instance ) {
// outputs the content of the widget on website
}

public function form( $instance ) {
// show options form in admin section
echo 'add HTML form here to take user input';
}

public function update( $new_instance, $old_instance ) {
// processes widget options to save
}

}
register_widget( 'My_Custom_Widget' );

This widget will look like this on adding to sidebar or footer.

And it will look like this in available widget section

In this widget, we have not given any output. So, adding this will have no effect on the website. If you want to show some output, use function widget().

Now we will create a plugin that will take user input. And this input will be show on the page where the widget will be added.

class My_Custom_Widget extends WP_Widget 
{
        public function __construct() {
               // widget actual processes
               parent::WP_Widget(false,'My Custom Widget','description=Description of custom Widget');
        }
        
        public function widget( $args, $instance ) {
               // outputs the content of the widget on website
               $title = apply_filters('widget_title', $instance['title']);
               $desc = $instance['desc'];
               
               if ( $title ) {
                echo '<h3 class="widget-title">'.$title.'</h3>';
                }

               if( $desc ) {
                echo '<p>'.$desc.'</p>';
                }
        }

        public function form( $instance ) {
               // show options form in admin section
              if( $instance) 
              {
                    $title = esc_attr($instance['title']);
                    $desc= $instance['desc'];
              } 
              else 
              {
                    $title = '';
                    $desc = '';
              }
                    ?>
                    
                    <p>
                    <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'My_Custom_Widget'); ?></label>
                    <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
                    </p>
                    <p>
                    <label for="<?php echo $this->get_field_id('desc'); ?>"><?php _e('Description:', 'My_Custom_Widget'); ?></label>
                    <textarea class="widefat" id="<?php echo $this->get_field_id('desc'); ?>" name="<?php echo $this->get_field_name('desc'); ?>" rows="7" cols="20" ><?php echo $desc; ?></textarea>
                    </p>
                    <?php
        }

        public function update( $new_instance, $old_instance ) {
               // processes widget options to save
               $instance = $old_instance;
                // Fields
                $instance['title'] = strip_tags($new_instance['title']);
                $instance['desc'] = strip_tags($new_instance['desc']);
                return $instance;
        }

}
register_widget( 'My_Custom_Widget' );

You can add or change fields as per your need. But the process will be the same. If you face any problem or if you have any query, you can ask via comments.