Create your own widget for your theme

Widget is a very useful feature in WordPress.  You can take control on look and feel of your site with the help of it. Simply drag it and drop it in widget area.

So what is widget? It is just an element of graphical interface.

Now come to the point and take a look on how you can create your own widget. You can use theme’s function (functions.php) file to create it. Add the code at the end of the file.

There is a standard class WP_widget, you need to extend it and need to define its three base functions form(), update() and widget() inside this extended class.

Look at the basic code structure.

Class yourchoicename extends WP_Widget
{

      

        public function __construct ()
       {

               // actual processes

              

        }

        public function form( $instance ) {

               // outputs the options form on admin

        }

        public function update( $new_instance, $old_instance ) {

               // processes options to be saved

        }

        public function widget( $args, $instance ) {

               // outputs the content

        }

}

register_widget( 'yourchoicename' );

You can enter the name of your choice in place of yourchoicename.  When you will use the above code you will get it like this.

Now break the code one by one to understand.

You have seen above that we extends the base class, with this you can use variables and functions of the WP_Widget.

Class yourchoicename  extends WP_Widget
{

Second thing is __construct() function, it will call all the properties and methods of WP_Widget class, with the help of this function you can define suitable heading and description.

        public function __construct ()
       {              

            parent::WP_Widget(false,'Main heading','description=Description for it');

       }

Third function form() will create a form for widget in admin.

       public function form( $instance )
      {

          $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );

          $title = $instance['title']; 

     ?>

           <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php              echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text"            value="<?php echo attribute_escape($title); ?>" /></label></p>

    <?php
     }

Now the input of the form needs to be saved, so this will be the fourth step. To accomplish this task we will add the below function.

        function update($new_instance, $old_instance)

       {

         $instance = $old_instance;

         $instance['title'] = $new_instance['title'];

         return $instance;

      }

Now you can enter the data in the text box to save.

And after saving the data you need the result/output of the saved data to display it on the website. For this we will use below code.

     public function widget( $args, $instance )
   {

     extract($args);

    echo $before_widget;

    $title = empty($instance['title']) ? ' ' : apply_filters('Main_title', $instance['title']);

    if (!empty($title))

   echo $before_title . $title . $after_title;;

   // CODE GOES HERE

   printf( '<p>' . __('Hey you! My name is %1$s.', 'example') . '</p>', $title );

 
   echo $after_widget;

  }

}

This function contains two arguments $args and $instance. $args is for sidebar argument like before_widget, after_widget etc and $instance is for  instance (saved content/value).

After creating, you need to register the widget to use it in your theme.

register_widget( 'yourchoicename' );

Now check it in the frontend.

Now see the complete code. You can copy paste to try it.

Class yourchoicename extends WP_Widget
{

   public function __construct ()
  {

       parent::WP_Widget(false,'Main title','description=Description Widget');

   }

    public function form( $instance )
   {

               // outputs the options form on admin

     $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );

     $title = $instance['title']; 

   ?>

     <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo      $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="        <?php echo attribute_escape($title); ?>" /></label></p>

<?php
   }

    function update($new_instance, $old_instance)

  {

    $instance = $old_instance;

    $instance['title'] = $new_instance['title'];

    return $instance;

  }

  public function widget( $args, $instance )
 {

   extract($args);

   echo $before_widget;

   $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

    if (!empty($title))

      echo $before_title . $title . $after_title;;

   printf( '<p>' . __('Hey you! My name is %1$s.', 'example') . '</p>', $title );

   echo $after_widget;

  }

}

register_widget( 'yourchoicename' );

This is a simple and basic code , hope that the explanation of this basic code structure will help you to create your own as per your requirement.