WordPress Widget Development from scratch

Today I am about to describe every one of the process, capabilities, hooks to construct a widget inside WordPress. We are able to create widget in WordPress primarily in two ways.

1. create like a plugin inside wp-content/plugins/
2. create inside theme. It could declare inside functions. php connected with theme folder or perhaps anywhere inside theme folder and call that properly throughout functions. php

Well, best way to generate a widget is by using as the plugin, So using tutorial considered developing a widget inside plugin folder. Step 1 Create a new folder inside 'wp-content/plugin/'. As well as a file inside that with regard to plugin. Through my event folder and files tend to be wp-content/plugins/products/products.php appears like below. Step 2 Now ,we are creating our widgetas a plugin, So now first of all we have to define here some plugin information as below

Above information are for plugin information and are self explanatory .These information will show on plugins page in admin panel.

Step 3
We have to use a WordPress hook i.e 'widgets_init' . This hook call whenever admin widgets page loads. Check below //hook widgets_init will call a function i.e register_products_widgets add_action('widgets_init','register_products_widgets'); // Below register a widget 'products' using a WordPress function register_widget()

Step 4 Now we have to create a new class extending WP_Widget class . It will have 4 functions/methods in it . Class should be exact name as register in above function inside register_widget(); So, it looks like below

Step 5 So after declaring class and function inside this. Time to get our hand dirty . Starting with 1st function i.e function products()

Above , mainly 2 things to consider .First is that widget's title and other is widget descrion Step 6 Proceeding to 2nd function i.e function form().

Above we have created 2 form fields , Title and Max no. of products to display. At same time we have used $default and $instance to extract previous updated values for next time when we open this widgets setting form. Step 7 For 3rd function update(). This function do not have too much logics. This is just for updating new values on old values.

Step 8 Final function widget() for diplaing data to front end site where it has enabled. We have used there wp_loop to fetch data from our custom post type i.e 'products'. If you are not familiar with this , check our wp_loop tutorial section for details.

That's it, We did. Now access plugins site in WordPress administrator panel in addition to activate this plugin. After head over to widgets page in order to find newly designed widget there, Enable this widget in any widgets location. Provide a few setting within title along with other fields. Now check up on front conclude site be it showing effectively.