CREATING SIMPLE WIDGETS IN WORDPRESS

Creating simple widgets in wordpress widgets is very easy it is a kind of small plugin,It provide user to add features in their site with some simple effort drag and drop option which makes widgets more special plugin,using the widgets themes can be customized and allow user to update their layouts.we are creating simple wordpress widgets follow these steps.

Some basic function which is required by a wordpress standard widgets.

widget()                display widgets on front end
update()                update data of widget
form()                    it provide form for widgets fields

Basic header of widgets

<?php  
 /* Plugin Name: Hello world   
 Plugin URI: https://timesole.com  
 Description: Building a simple WordPress Widget.  
 Author: Timesole   
 Version: 1  
 Author URI: https://timesole.com */   ?>

Defining Widgets Name
now we need to create a class which extend WP_Widget calss, your class must contain constructor with same name as class.Inside the constructor we will define our widget name something like this

<?php 
 class tms_plugin extends WP_Widget  {   
 // constructor    
function tms_plugin()    {    
 // Give widget name here      
 parent::WP_Widget(false, $name = __('Hello world', 'wp_widget_plugin') );     
}   
?>

Add Fields to Widget in Backend
now it’s time to add some option fields in widgets backend in order to add option or fields in back end we nee to use form function of wp_widget class.

<?php // widget setting fields function form($instance) { // Check values if( $instance) { $title = esc_attr($instance['title']); $textarea = $instance['textarea']; }  else { $title = ''; $textarea = ''; } ?>
 
 
 
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
 
 
 
 
<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Description:', 'wp_widget_plugin'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>" rows="7" cols="20" ><?php echo $textarea; ?></textarea>
 
 
<?php } ?>

Updating widgets settings

In order to update settings of widgets we need to use Update ().this function will update setting according to user. when ever user click on save button of widgets this update function will be called.Every time when save button is clicked update function will update widgets setting with new value.

<?php
 
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['title'] = strip_tags($new_instance['title']);
$instance['textarea'] = strip_tags($new_instance['textarea']);
return $instance;
}
 
?>

Note* here we used strip_tags so we can remove xhtml tags from setting text.

Display Widget on Front End

for display widgets in front end we need to use wp_widget class built in function widget() this function accepts two parameter $args and $instance.

$args –> associative array that will be passed as a first argument to every active widget callback

$instance –> instance variable

$before_widget –> HTML to place before widget

<?php
 
function widget($args, $instance) {
extract( $args );
 
$title = apply_filters('widget_title', $instance['title']);
$textarea = $instance['textarea'];
echo $before_widget;
 
// Display the widget
echo '<div class="widget-text wp_widget_plugin_box" style="width:269px; padding:5px 9px 20px 5px; border: 1px solid rgb(231, 15, 52); background: gray; border-radius: 5px; margin: 10px 0 25px 0;">';
echo '<div class="widget-title" style="width: 90%; height:30px; margin-left:3%; ">';
 
// Check if title is set
if ( $title ) {
echo $before_title . $title . $after_title ;
}
echo '</div>';
 
// Check if textarea is set
echo '<div class="widget-textarea" style="width: 90%; margin-left:3%; padding:8px; background-color: white; border-radius: 3px; min-height: 70px;">';
if( $textarea ) {
echo '<p class="wp_widget_plugin_textarea" style="font-size:15px;">'.$textarea.'</p>';
}
echo '</div>';
echo '</div>';
echo $after_widget;
}
}
 
?>

finally we need to register widgets to wordpress api to work widgets in proper way for this we use add_action() method for wordpress

<?php
 
// register widget
add_action('widgets_init', create_function('', 'return register_widget("tms_plugin");'));
 
?>

now at the last put all above code in a single file name helloworld.php file and install it in wordpress.

Enjoy coding!!!