A widget is a tool or content that can be added to a blog or website’s sidebar(s). Widgets can be rearranged and removed easily. Widgets were designed to make it easy for website administrators to customize their sidebars, even if they do not know how to write code.
On WordPress.com, they can be accessed from the Dashboard through the Appearance menu, then by clicking on Widgets. On self-hosted sites, meanwhile, a variety of widgets can be created and installed. However, some themes are not widget-ready, so you have to first find out if your website’s theme is able to support widgets.
By default, there are widgets that are available in WordPress. These include categories, tag cloud, navigation, calendar, search, recent posts, and text boxes. Plugins can also come with widgets which can provide a number of functions such as images, banners, and forms.
Once a widget is available on a WordPress site, it can be customized, and dragged and dropped into a sidebar.
Creating a plugin
In order to use a custom WordPress widget, it would be best to contain it within a plugin for easy installation into your WordPress site. To make a plugin, you have to create a folder in the plugins directory of your website. For example, you can create the folder “hello-plugin”: /wp-content/plugins/hello-plugin/.
Next, you have to create a blank file on your computer, then save it with the name you plan for your plugin, for example: “hello-plugin.php”, then put this code in your file:
This file should be uploaded to the folder you created in the plugins directory. You can edit this file as you create your widget.
You have to note that some others prefer to finish widget creation with the creation of a plugin, or after writing their widget code. Other people, however, prefer to paste their widget code into their site theme’s functions.php file. It is all a matter of preference.
Writing the widget code
We will use the “Hello, World” text widget as an example.
In writing the code, you have to begin with a parameter that will define the widget template. Afterwards, you will have to write code that will register the widget with WordPress, build the back-end and say how it submits data, then define how it will look and allow the widget to be initialized.
This is how basic code for a text box will look like:
// Creating the widget
class wpll_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpll_widget',
// Widget name will appear in UI
__('Wplearninglab Widget', 'wpll_widget_domain'),
// Widget description
array( 'description' => __( 'Sample widget based on WP Learning Lab Tutorial', 'wpll_widget_domain' ), )
);
}
// 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!', 'wpll_widget_domain' );
echo $args['after_widget'];
}
// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpll_widget_domain' );
}
// Widget admin form
?>
After writing the code, you have to copy and paste it into your plugin file. After saving, you can go to the Appearance menu, then Widgets, then drag and drop your widget into your sidebar.
More complicated widgets with more functionality can be created by simply adding more functions. If you have any problems don't hesitate to leave a comment below!