Create wordpress widgets in a minute198

Wordpress Widgets
Author: InfoBeep - September 7, 2017 | subject to copyright

What is a WordPress widget?

WordPress widget is a combination of piece of code which makes your website look attractive when you add them in your sidebars or widget ready areas. Widget can be added in different form, there are several built-in widgets in WordPress and you can create your own custom widget as well.

You may see the picture below to see different built-in WordPress available:

 

Creating a custom widget in WordPress

In order to create a custom widget in WordPress, you can create a site-specific plugin and enter you code there or you can also add your code in your theme’s functions.php file.

Here, we have created a simple widget that greets visitors. You may try it.


<?php

// Register and load the widget
function ib_load_widget() {
register_widget('ib_widget');
}

add_action('widgets_init', 'ib_load_widget');

// Creating the widget
class ib_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
'ib_widget',
// Widget name will appear in UI
__('InfoBeep Widget', 'ib_widget_domain'),
// Widget description
array('description' => __('Sample widget based on InfoBeep Tutorial', 'ib_widget_domain'),)
);
}

// Creating widget front-end
public function widget($args, $instance) {
$title = apply_filters('widget_title', $instance['title']);
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if (!empty($title))
echo $args['before_title'] . $title . $args['after_title'];
// This is where you run the code and display the output
echo __('Hello, World!', 'ib_widget_domain');
echo $args['after_widget'];
}

// Widget Backend
public function form($instance) {
if (isset($instance['title'])) {
$title = $instance['title'];
} else {
$title = __('New title', 'ib_widget_domain');
}
// Widget admin form
?>
<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="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
</p>
<?php
}

// Updating widget replacing old instances with new
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
return $instance;
}

}

// Class ib_widget ends here
?>

Save your file where you have paste this code. Now you can visit your website, you should be able to see the widget as shown in the picture below:

(note: you may make few changes to the code above or try your own custom widget)