WP Widgets

WordPress provides a class which you can extend named WP_Widget. WordPress ships with a number of default widgets which extend WP_Widget.

The WP_Widget class provides four methods which should be overridden:

  • __construct() – call the parent constructor and initialize any class variables
  • form() – display a form for the widget in the admin view to customize the widget’s properties
  • update() – update the widget’s properties specified in the form in the admin view
  • widget() – display the widget on the blog

The Constructor:

The constructor is like any other constructor you’ve probably written. The important thing to remember here is to call the parent constructor which can take three arguments: an identifier for the widget, the friendly name of the widget and an array detailing the properties of the widget.


class TextWidget extends WP_Widget


public function __construct() {

parent::__construct(“text_widget”, “Simple Text Widget”,

array(“description” => “A simple widget to show how WP Plugins work”));



With the fundamental gadget structure set up, you’ll need to enroll the gadget and ensure this is done during an era when the various gadgets are being instated. Enlisting a gadget is done through the register_widget() capacity which takes a solitary contention, the name of the class which amplifies WP_Widget. This call to enlist the gadget must be called at a fitting time, so the specific WordPress snare you’ll need to utilize is called “widgets_init”. To relate enlisting the gadget with the share, you utilize add_action() which takes the name of the snare as the principal contention and a capacity to execute as the second. This code ought to go straightforwardly under the descriptor of the module that was made in widget_init.php.



function () { register_widget(“TextWidget”); });


Now that it has been registered and initialized, you’ll be able to see your widget available for use.

The form() method: 

The sample gadget here ought to give you a chance to enter a title and some content to be shown when seen on the online journal, so keeping in mind the end goal to have the capacity to change these two parts of the gadget you have to make a structure to provoke for these qualities. The structure() strategy is utilized as a part of the gadget organization screen to show fields which you can later use to adjust the usefulness of the gadget on the site itself. The technique takes one contention, a $instance exhibit of variables connected with the gadget. At the point when the structure is presented, the gadget will call the upgrade() technique which permits you to redesign the fields in $instance with new values. Later, gadget() will be called and will make utilization of $instance to show the qualities.


public function form($instance) {

$title = “”;

$text = “”;

// if instance is defined, populate the fields

if (!empty($instance)) {

$title = $instance[“title”];

$text = $instance[“text”];


$tableId = $this->get_field_id(“title”);

$tableName = $this->get_field_name(“title”);

echo ‘<label for=”‘ . $tableId . ‘”>Title</label><br>’;

echo ‘<input id=”‘ . $tableId . ‘” type=”text” name=”‘ .

$tableName . ‘” value=”‘ . $title . ‘”><br>’;

$textId = $this->get_field_id(“text”);

$textName = $this->get_field_name(“text”);

echo ‘<label for=”‘ . $textId . ‘”>Text</label><br>’;

echo ‘<textarea id=”‘ . $textId . ‘” name=”‘ . $textName .'”>’ . $text . ‘</textarea>’;


You use WP_Widget‘s get_field_id() method and get_field_name() method to create IDs and names for the form fields respectively. WordPress will generate unique identifiers for you so as not to clash with other widgets in use, and when the form is submitted the values will update the relevant $instance array items. You can use the passed $instance argument to populate the form fields with values should they already be set.

The parent <form> element itself, the Save button, and the Delete and Close links are generated for you automatically by WordPress so there is no need to explicitly code them. The form will post the variables and call the update() method so the new values can be inserted into $instance.

The update() Method:

update() gives you a chance to accept and disinfect the case variables before they are utilized by the gadget. Here you can settle on choices taking into account the old values and overhaul the new values as needs be. update() must give back an exhibit which contains the things you hope to utilize while showing the gadget. WordPress passes two contentions to it, a cluster with the new occasion values from the structure, and an exhibit with the first example values.


public function update($newInstance, $oldInstance) {

$values = array();

$values[“title”] = htmlentities($newInstance[“title”]);

$values[“text”] = htmlentities($newInstance[“text”]);

return $values;


WordPress will persist these values for you so there is no need to implement that functionality.

Leave a Reply