How to create custom widget in WordPress?

According to WordPress , widgets add content and features to your sidebars or widgetized areas of your theme, namely header, footer or even in templates. Widgets are basically created and used to provide a simple and easy-to-use design and structural control of the WordPress theme to the user without requiring them to have any knowledge or expertise of code.

We can find a large number of widgets when we check the WordPress plugin directory which is accessible from the WordPress Administration Plugins > Add New Plugin screen.
Wordpress widgets are very easy to use and can be installed or removed easily from the wordpress admin panel. A basic knowledge of wordpress and hooks is enough to bulid a new widget according to our requirement.

WordPress create a custom widget

Creating a widgets basically includes the following steps:

Step 1: Define your widget by adding information in your plugin file.


/*
Plugin Name: Greeting Plugin
Version: 1.0
Plugin URI: Author Name
Description: The descripion of your plugin.
Author: Author Name
Author URI:
*/

Step 3:Build the back-end form
Step 4:Save values to the database(optional)
Step 5:Define the front-end Display
Step 3:Register our widget with WordPress

You will get a better understanding when you will check the following example where we are actually building a small widgets which shows aa welcome message for the visitors on your site.

The first step is to define the class for the widget. This class will include all the code which is to be excuted by your widget.

);
}

// Creating widget front-end
// This is where the action happens
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 __( ‘Welcome To My WordPress Site!’, ‘greet_widget_domain’ );
echo $args[‘after_widget’];
}

// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) ) {
$title = $instance[ ‘title’ ];
}
else {
$title = __( ‘Your new title’, ‘greet_widget_domain’ );
}
// Widget admin form
?>

}

// 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 wpb_widget ends here

After defining the class you have to register your widget to use it. For registering you have to add the following code:

// Register and load the widget
function greet_load_widget() {
register_widget( ‘greet_widget’ );
}
add_action( ‘widgets_init’, ‘greet_load_widget’ );

Once you are done with registering and loading your widget you have to activate your widget.
For this go to Appearance ยป Widgets, drag and drop Greeting Widget in your sidebar to see this custom widget working.

As you can see, creating and a widget as per our requirement is very easy and fast without requiring any type pre-knowledge or expertise. It will not only help you in faster development but easy management of your code. To know more about WordPress child themes, kindly go through our blog- WordPress Child Theme- The powerful customization tool.

Do you need to develop a best website for your business? Just relax, Solace is there to help you. Develop the best website with our exert’s team which will be the face of your business. They believe in effectiveness of using WordPress for web development. Contact us for web development that enhance your company’s profitability.