How to create WordPress Widgets

Create WordPress Widgets

Widgets are designed to provide a simple and easy-to-use way of giving design and structural control of the WordPress theme to the user without requiring them to know how to code.

The easiest way to create a WordPress widget is to inherit the WP_Widget class. This way you can use the built-in functions to update the widget, display the widget, and create an admin interface for the widget.

class TutsPlusText_Widget extends WP_Widget {

// widget constructor
public function __construct(){

}
public function widget( $args, $instance ) {
// outputs the content of the widget
}
public function form( $instance ) {
// creates the back-end form
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
// processes widget options on save
}
}

The Functions in Detail

Let’s look at each function in more detail:

__construct()
This function registers the widget with WordPress

widget()
This function is responsible for the front-end display of the widget. It outputs the content of the widget

update()
Processes the widget options on save. Use this function to update your widget (option). This function takes two parameters:

form()
The form() method/function is used to define the back-end widget form – which you see in the widgets panel in the dashboard This form enables a user to set up the title and other options for the widget.

This function takes the following parameter(s):
$instance – Previously saved values from the database

Widget Constructor
The constructor enables us to initialize our widget by overwriting the parent class (standard WP_Widget class).

class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct('wpb_widget', __('WPBeginner Widget', 'wpb_widget_domain'), 
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
// Base ID of your widget - wpb_widget
// Widget name will appear in UI - WPBeginner Widget
}

In the code above, we call the parent WP_Widget class’s construct function and pass it the foolowing arguments:
Base ID – A unique identifier for the widget. Must be in lower case. If left empty a portion of the widget’s class name will be used.
Name – This is the name for the widget displayed on the configuration page (in the dashborad).
And an (optional) array containing a classname and a description. The description is shown on the configuration page (in the WordPress dashboard).

Building the Back-end Form
To generate the above form, we would start with pure HTML and then replace some attribute values with some PHP variables and expressions. The following is the HTML code to create the two fields:

// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
$message    = esc_attr( $instance['message'] );
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}

The code above accesses and assigns previously saved values from the database to two variables – $title and $message. We then use the esc_attr() to encode the returned values and to avoid breaking our code.

get_field_id() – Takes field name as an argument and constructs id attributes for use in form() fields. It ensures that the returned field id is unique
get_field_name() – Takes field name as an argument and constructs name attributes for use in form() fields. It ensures that the returned field name is unique.

The label tags’ for attribute is coded to echo out the id value of the elements they label.

Updating Our Widget
Processes the widget options on save. Use this function to update your widget (option). This function takes two parameters:

The above function takes two parameters – $new_instance and $old_instance

$new_instance is an array containing the new settings (of this instance of the widget) that have just been entered by the user via the backend form which we define in the form() function.
$old_settings is an array containing old settings. These are the values that are currently stored in the database.
The strip_tags() function removes HTML and PHP tags from a string that’s passed to it.

Defining The Front-End
The widget() function is responsible for the fron-end display of the widget. It takes two parameters – $args and $instance.

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}

Leave a Reply

Your email address will not be published. Required fields are marked *