Category:Wordpress Tutorial

How to Create Widget in WordPress with Easy Steps

create-widget-in-wordpressIn  this wordpress tutorial we are going to create widget in WordPress. In this basic widget tutorial we are going to create a simple widget in wordpress which will display the title of the widget and a welcome message “Welcome to WordPress Widgets”. So lets Start.

Step-1- Extend WP_Widget class to Create Widget in WordPress

This is the first step to create a basic widget in WordPress. This code for extending class can be written in a plugin or function.php file of your active WordPress theme. The purpose is that we are making a new instance of the class by extending it. so code is here.

Method-1- Construct function of WordPress Widget Class

This function is one of the four  methods inside of the extended class. This function will assign name to class of widget, name to widget and a short description which will be shown in admin widget area.

Method-2- Widget Method to Create Display Output

This second method is for displaying output of the custom wordpress widget.

Note: that every widget should include the 'before_widget''after_widget''before_title', and 'after_title' as shown above code.

Method-3- Form Method to Create WordPress Admin Widget Form

This is the third function method inside of the extended class. Where we create a form input in WordPress Admin widget screen. It is displayed in admin widget screen and accepts the input from users. Here is the widget code of this section.

Method-4- Update Method to Save New Values in WordPress Database

This fourth and final method in extended class is to save new values in database given by user in Wordpess Widget Admin area. The code for this method is given below:

Step-2-Register the Newly Created Widget in WordPress

We have create our extended class above and now we have to register our new class with wordpress press:

Final Words

In this WordPress Tutorial We have learnt that how can we create our own custom widget in WordPress. By adding all above parts of code, the complete code is given below:

Now this widget will be available in your WordPress Admin widget area and ready to use it in your sidebars.

Leave a Reply

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