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.
Wordpress widget
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

<!--?php 
  /**
  * @package Products
  * @version 1.6
  */
 
  Plugin Name:  Products
  Plugin URI:  http://w3-learn.com
  Description:  To show Latest 10 products on sidebar
  Author: UIT
  Version: 1.6
  Author URI:  http://pawan.w3-learn.com&lt;/p&gt;
&lt;p&gt;
  &lt;/pre&gt;
&lt;div&gt;
   &lt;/div&gt;
&lt;p&gt;Above information are for plugin information and are self  explanatory .These information will show on plugins page in admin panel.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Step 3&lt;/strong&gt;&lt;br ?-->
  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()

  function register_products_widgets(){
   	register_widget('products');
   }

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

  
  class products extends WP_Widget{
   
   //below function name should be class name ,this  function just register widget information to show on widgets page in admin panel
   function  products(){
  } 
 
 //below function create widget  setting form if required. This form will show when enabling it to any widgets area in admin panel
  function form($instance){
  } 
 
 // Below function handle update or  insert query for above form settings.
  function update($new_instance,  $old_instance){
  } 
 
 // Below function handle display  parts of this widget to front end site. 
  function widget($args, $instance){
    
   } 

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

  
  //process the widget
   function products(){ 
	   $widget_ops =  array('classname' =&gt; 'products','description' =&gt; __('To Show Latest  Products','products') );
	   $this-&gt;WP_Widget('products',  __('Latest Products','products'), $widget_ops);
   }

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().

  //build widget  settings form

  function form($instance){
  $defaults =  array( 'title' =&gt; __('Latest Products','gmp-plugin'),'max_latest_products'  =&gt; '' );
  $instance =  wp_parse_args( (array) $instance, $defaults );
  $title =  strip_tags($instance['title']); 
  $max_latest_products  = strip_tags($instance['max_latest_products']); 
  $new_field =  strip_tags($instance['new_field']);
  ?&gt;<!--?php _e('Title','products') ?-->: 
  
  <input class="widefat" name="&lt;?php echo $this-&gt;get_field_name('title'); ?&gt;" type="text" value="&lt;?php echo esc_attr($title); ?&gt;" /> 
 
 <!--?php _e('Max No. of products to display','gmp-plugin') ?-->: 
  <input class="widefat" name="&lt;?php echo $this-&gt;get_field_name('max_latest_products'); ?&gt;" type="text" value="&lt;?php echo esc_attr($max_latest_products); ?&gt;" /> 
   
  <!--?php } ?-->

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.

//save our  widget settings 
   
  function  update($new_instance, $old_instance) { 
	  $instance =  $old_instance;  
	  $instance['title']  = strip_tags($new_instance['title']); 
	  $instance['max_latest_products']  = strip_tags($new_instance['max_latest_products']); 
	  return  $instance; 
  } 

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.

  // to show  widgets on frontend 
  function widget($args, $instance) {
  extract($args);
  echo  $before_widget;
  $title =  apply_filters('widget_title', $instance['title'] ); 
  $max_latest_products  = apply_filters('widget_title', $instance['max_latest_products'] ); 
  if ( !empty( $title ) ) { echo $before_title .  $title . $after_title; };
  global $post;
  $products=new WP_Query();
  $args=array(
  'post_type'=&gt;'products',
  'posts_per_page'=&gt;$max_latest_products,
  'orderby'=&gt;'title',
  'order'=&gt;'ASC'
  );
  $products-&gt;query($args);
  while($products-&gt;have_posts()){
   $products-&gt;the_post();
   ?&gt;
“; echo “Model “.get_post_meta($post->ID,’wpcf-model-no’,true).”
“; echo “Cost “.get_post_meta($post->ID,’wpcf-cost’,true).”
“; ?>

 

<?php } echo $after_widget; }

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.

.

Online Web Development Training,Video Tutorials