WordPress widget: Step by step to build it for your website

WordPress widget is an easy-to-use way to add content and specific features to your website. That is to say, widgets are extremely helpful to sort out your page and use the sidebars proficiently. Besides, if you want to give your website an attractive and professional look, widgets could help you. All you have to do is to subsequently drag and drop the widget into any widgetized area like sidebar, footer, or header of your website and start using its functionality.

As a WordPress user, you have the privilege of using hundreds of widget plugin collection of WordPress. Also, it’s not a complicated process as you only need basic knowledge of WordPress. So now, we – ArrowHiTech would like to introduce to you guys the basic guide on how to build your WordPress widget for your eCommerce website. After reading this article, you should be able to create this kind of widget quickly.

But first, let’s go through some definitions.

What is a WordPress widget?

WordPress widgets make it easy for you to add additional functions to your website through a simple drag-and-drop interface. By default, WordPress ships with several widgets. To clarify, they provide you with basic utility features and are compatible with every WordPress theme. Thankfully, you have the power to create a WordPress widget. Just keep in mind that it has to be built from the ground-up so you can personally fine-tune your custom widget based on your needs.

How to create a WordPress widget – Step by step

Creating a widget is a simple task. However, the complexity occurs when you want to put several functions in a widget. In the text below, we will discuss five basic steps of building a widget with minimum functions. Let’s get into it!

Step 1: Creating a plugin

You have two options while creating a WordPress widget; first, you can create a specific plugin to paste the widget codes. Second, paste the widget codes directly on the functions.php.file of your theme. Hence, our first step will be creating a specific plugin for the widget. If you want to create a plugin, log in to your hosting site and navigate to /wp-content/plugins/. Besides, you can also create a hard drive and create it locally.

Create a new folder for creating a plugin and give a unique name so that it remains distinct among other plugins. For instance, we have selected “example-widget.php” as our plugin name. Now open your plugin with the WordPress plugin editor or open it in the web host’s file manager. The first part of the plugin should have simple information about the plugin. As a result, WordPress can read this information and use it for different uses.

Step 2: Define your WordPress widget base

So now, you have to set up the base of your widget. As a second step, you also have to create the widget box. For this, you should create your widget class with the unique name you have selected for the plugin. After that, replace the hyphens with underscores and add _widget at the end. Following is the code you can copy-paste but don’t forget to replace the class name with yours.

Step 3: Adding standard functions

Next, we start implementing the four standard functions one by one. The first one is the constructor method, which will, in short, determine the custom widget’s ID, name, and description.

 function __construct() {
parent::__construct(
// widget ID
‘aht_widget’,
// widget name
__(‘ArrowHiTech Sample Widget’, ‘aht_widget_domain’),
// widget description
array ( ‘description’ => __( ‘ArrowHiTech Widget Tutorial’, ‘aht_widget_domain’ ), )
);
}

The second one is focusing on the widget() function. It defines the look of your WordPress custom widget on the front-end. With this, we have configured the output of our WordPress widget so that it displays the phrase “ArrowHiTech – Widen your reach” and widget’s title as specified by the user.

 public function widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, $instance[‘title’] );
echo $args[‘before widget’];
//if title is present
If ( ! empty ( $title ) ) Echo $args[‘before_title’] . $title . $args[‘after_title’];
//output
echo __( ‘ArrowHiTech - Widen your reach’, ‘aht_widget_domain’ );
echo $args[‘after_widget’];

Thirdly, what we have to program is the back-end of the WordPress widget using the form() method. You can see the result when you want to add the widget from the WordPress Dashboard. Here you can see how a custom widget has been set up. If a user applies a title, then that title will be inserted in the HTML form we created. In this example, we will set the name of the title to Default Title.

Once that’s done, we have to implement update(), which will refresh the WordPress widget every time you change the settings. 

 public function update( $new_instance, $old_instance ) {
 $instance = array();
 $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
 return $instance;
 }

Step 4: Incorporate theme support

WordPress also offers the privilege to the theme authors to style widgets as they wish. Hence, we will certainly take advantage of this opportunity. The block code will be like:

Please note that we again left a place under the widget output called “WIDGET CODE GOES HERE.” At this place, you also have to put the main code that will determine the WordPress widget display and its function.

Step 5: WordPress widget installation and testing

After coding your plugin, you should save the file and open the plugin section of the WordPress site. As a result, you will find your plugin waiting for activation. Gather your courage and click the “Activate” button. If you have done everything perfectly, you will certainly receive a message showing that your plugin is activated. But, if you have made any mistakes, you have to go through the codes again, or contact the outer developer teams like ArrowHiTech team and solve the issue.

Final words

That may conclude the finest steps on how to build your WordPress widget for your website. Widgets are necessary for increasing the user experience. So, if you can learn how to create and build a custom widget, you will be able to improve the look of your site. We do hope that with this guide, people with limited or no coding knowledge will be able to create a widget.

We – ArrowHiTech is proud to be one of the best IT companies in Vietnam. That is to say, with over 12 years of experience, we can deliver the perfect WordPress development services for your business. Also, if you want to go through our showcase, you should visit our product page here: MageSolution or our portfolio: ArrowHiTech portfolio.


Tags

Share