Tutorials

Customize our premium WordPress themes and stand out from the crowd.

How to Create a Simple Widget on WordPress

http://colorlabs.co/I7QWUh

WordPress widgets are classes, which makes them easy to duplicate, even if you’ve never worked with object-oriented programming before. A class provides a blueprint for objects that will be reused in various ways. Creating a new widget is a matter of copying the basic widget class, then adjusting the enclosed functions to output the content you have in mind. The widget class contains four functions: one that registers the widget, one that prints the widget output, one that updates the widget options, and one that displays the options form..

To create a widget, you only need to extend the standard WP_Widget class and some of its functions.

That base class also contains information about the functions that must be extended to get a working widget.

Open functions.php and add these lines:

class My_Widget extends WP_Widget {
         public function __construct() {
               // widget actual processes
        }

        public function form( $instance ) {
               // outputs the options form on admin
        }

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

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

}
register_widget( 'My_Widget' );

we first create a class. For example class derived from class WP_Widget My_Widget

then we fill in the construct or the initial value that will be processed by a class. Use thefunction __ construct ().

public function __construct() {
// widget actual processes
parent::WP_Widget(false,’Title Widget’,’description=Description Widget’);
}

Then the functions used by a widget from wordpress is

function form (), function update (), function widget ().


    1. Function form()
public function form( $instance ) {
  // outputs the options form on admin

echo ‘include html coding in here’;

}

In this function serves to display widget on the page menu backend.

2. Function update()

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

In this function serves to save the options in the database.

3. Function widget()

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

In this function serves to display the results on the web client.

Then register_widget serves to register a class to the widget WordPress.

  • Anonymous

    I’ve found the code template before, but yours is the first I found that meaningfully explained what the code actually does. Thank you!

  • bibos

    thanks but you can do better a good tutarial is a tutorial that output with a functional item so you can upgrade your tutorial and help us with widgets ;)

  • Ariful Islam

    Very Clean and Clear description.. Thank you.

  • Naveed Abbas

    Thanks a lot for the tutorial. However there is a mistake in parent::__construct line. I’m pasting what worked for me, in case anyone stuck the same way.

    parent::__construct(

    ‘My_Widget’, // Base ID

    __(‘Widget Name’, ‘text_domain’), // Name

    array( ‘description’ => __( ‘Widget Description goes here’, ‘text_domain’ ), ) // Args

    );

    Change the class name, widget name and description accordingly.

    Thanks once again for this wonderful tutorial :)