How to create a custom widget in WordPress

How to solve or non-WordPress administrator login problem
Complete Guide to Reseller Hosting

Did you know you can create your own custom widget in WordPress? While there are tons of additional widgets that come with some themes and plugins, WordPress also offers the option to manually encode, custom widgets for all users. In this tutorial WordPress , you will learn how to implement a widget on WordPress. If this seems difficult, let us reassure you – the only ingredients you need are: basic knowledge of WordPress and PHP. So let’s start.

What you’ll need

Before starting this tutorial, you need the following:

  • Access to WordPress Admin panel
  • Any text editor

Widget on WordPress in one step

Widgets in WordPress are designed to make it easy for you to add items to your website through a simple form of command: drag and drop. Practically, WordPress already offers several widgets. These standard widgets provide basic utilities and are compatible with every WordPress theme. But sometimes, these widgets simply do not make it easy. In such cases, your best option is to find plugins that provide the functionality you want. And while you search plugins for most typical tasks, there are some scenarios in which even the additional add – ons do not meet your requirements. This is where custom widgets are useful. Custom widgets must be created from scratch. This gives users complete control.

Setting the stage

To begin with the creation of widget on WordPress, you need to decide a few things. First, you can choose to encrypt the widget in a custom plugin. This will allow it to work with any website using this plugin. Or, you can simply add the widget to file  functions.php  of a specific topic, which will only work with this theme. Second, you have the option to add the widget on a live site or in a local environment. According development practices, we recommend that you first deploy the widget in a local environment ( see the tutorial on how to run WordPress on Docker environment ). Once you make sure it’s working well, you can easily upload to your site.

How custom widgets WordPress: Widgets API

WordPress allows you to use your code of custom widgets via the  Widget API . To create any custom widget, you should use the class  WP_Widget  API standard. This base class provides about 20 functions with which you can create. Outside of that, there are four minimum required functions for any widget work. These four functions are:

  • __construct ()  – constructor function
  • Widget ()  content contains the widget
  • Form ()  – determines the widget settings in the WordPress panel
  • Update ()  – updates updates

Of course, there are many other methods that offer additional features. For more information about the class  WP_Widget  , take a look at  this page .

Creating the custom widget in WordPress

IMPORTANT: It is highly recommended that you create a full backup of your WordPress site (click the tutorial) before proceeding. In addition, you should also use the basic theme of WordPress.

Now we present the conceptual basis for our task, we will start working on its implementation. For this tutorial, we’ll create a custom widget for the simple HelloWorld , just so you can learn the tracks of creating widgets in WordPress. Sure, you can move on to creating more complex widgets on their own.

One more thing: we are writing this code in the file  functions.php  theme currently loaded, but you can do any custom plugin.

Now open any text editor on your computer and create a new class that extends the base class  WP_Widget , like this:

class {hstngr_widget extends WP_Widget

// Insert functions here

}

Now let’s implement the four functions mentioned one by one. The first item on the list is the construction method that we use to determine an ID, then the widget’s name appears on the UI and the description:

function __construct () {
parent :: __ construct (
// widget ID
'Hstngr_widget'
// widget name
__ ( 'Sample Hostinger widget', 'hstngr_widget_domain'),
// widget description
array ( 'description' => __ ( 'Hostinger Widget Tutorial', 'hstngr_widget_domain'))
);
}

Then we set the shape of the widget ie ie, as will be the appearance of the widget. This will be done through the function widget ():

public function widget (args, $ instance) {
$ Title = apply_filters ( 'widget_title' $ instance [ 'title']);
echo $ args [ 'before_widget'];
// if present title is
if (! empty ($ title))
echo $ args [ 'before_title']. $ Title. $ Args [ 'after_title'];
// output
echo __ ( 'Hello, World from Hostinger.com', 'hstngr_widget_domain');
echo $ args [ 'after_widget'];
}

Here we set the output of our widget so that it displays the word ‘Hello World!’, And display the widget title as specified by the user.

Now we have to program the widget back-end using the method  form () :

public function form ($ instance) {
if (isset ($ instance [ 'title']))
$ Title = $ instance [ 'title'];
else
$ Title = __ ( 'Default Title', 'hstngr_widget_domain');
?>
<P>
<Label for = "<? Php echo $ this-> get_field_id ( 'title');?>"> <? Php _e ( 'Title'); ?> </ Label>
<Input class = "widefat" id = "<php ​​echo $ this-> get_field_id ( 'title');?>" Name = "get_field_name ( 'title') <php echo $ this->?>" Type = "text" value = "<? php echo esc_attr ($ title);?>" />
</ P>
<? Php
}

Here you can see how the custom widget has been set. If the user provides a title, this title will be inserted into the HTML form we create. Otherwise, we will set the title name as  Title Standard . This is how the widget appears on the WordPress admin area.

Last but not least, we have to implement the update function to update the widget, where the settings are changed.

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

With all this done, you use the updated title, newly created, and all HTML / PHP tags, passing the default title and returning.

There is one more thing to do: you need to use an additional function to register the widget in WordPress:

hstngr_register_widget function () {
register_widget ( 'hstngr_widget');
}
add_action ( 'widgets_init' 'hstngr_register_widget');

Note that the above lines should be placed outside the function  hstngr_widget .

We define a new function called  hstngr_register_widget () , which registers the widget using the widget ID, specified in  função__construct () . So we designate this function using  widgets_init , which carries this widget on WordPress using the method incorporated  add_action () . Your end – user custom WordPress code should look like this:

hstngr_register_widget function () {
register_widget ( 'hstngr_widget');
}

add_action ( 'widgets_init' 'hstngr_register_widget');

class {hstngr_widget extends WP_Widget

function __construct () {
parent :: __ construct (
// widget ID
'Hstngr_widget'
// widget name
__ ( 'Sample Hostinger widget', 'hstngr_widget_domain'),
// widget description
array ( 'description' => __ ( 'Hostinger Widget Tutorial', 'hstngr_widget_domain'))
);
}
public function widget (args, $ instance) {
$ Title = apply_filters ( 'widget_title' $ instance [ 'title']);
echo $ args [ 'before_widget'];
// if present title is
if (! empty ($ title))
echo $ args [ 'before_title']. $ Title. $ Args [ 'after_title'];
// output
echo __ ( 'Hello, World from Hostinger.com', 'hstngr_widget_domain');
echo $ args [ 'after_widget'];
}
public function form ($ instance) {
if (isset ($ instance [ 'title']))
$ Title = $ instance [ 'title'];
else
$ Title = __ ( 'Default Title', 'hstngr_widget_domain');
?>
<P>
<Label for = "<? Php echo $ this-> get_field_id ( 'title');?>"> <? Php _e ( 'Title'); ?> </ Label>
<Input class = "widefat" id = "<php ​​echo $ this-> get_field_id ( 'title');?>" Name = "get_field_name ( 'title') <php echo $ this->?>" Type = "text" value = "<? php echo esc_attr ($ title);?>" />
</ P>
<? Php
}
public function update (new_instance $, $ old_instance) {
$ Instance = array ();
$ Instance [ 'title'] = (! Empty ($ new_instance [ 'title']))? strip_tags (new_instance $ [ 'title']): ';
return $ instance;
}

}

You can even use the File Manager, Client FTP or WordPress editor to add this code to your file .php . and press the Update File to save the changes.

php hostinger widget

Now, simply go to your WordPress admin area , and on and browse the section  Appearance -> Widgets . You should see the widget, called Hostinger Sample Widget,  is on the list of updated widgets. 

create customized widget hostinger

From now on, drag the widget and place the widget on the sidebar  menu, on the right side of the page. You will be able from now on to give a title to your widget. Save it and then visit your site. You will be directed to the default widget with a title to your choice and fill with the words ‘Hello World!’.

Congratulations, you have successfully created your first custom widget in WordPress. Now you can see a preview of your widget.

frontend-the-wordpress

Conclusion

When creating a widget in custom WordPress from a draft, it may at first be like a mountain to climb. In fact, almost always, it is extremely affordable for everyone wishing to move to a next level of creation in HTML and PHP. In this tutorial, we pass you how to create widgets in WordPress with a minimum number of steps. From now on, you can create more functional widget on WordPress. If you found this tutorial helped you, check on our other WordPress Guide.

learn more on-wordpress (1)