In WordPress? Widgets allow you to drag and drop elements into any sidebar or widget ready area of your website. In this, we will show you how to easily create a custom WordPress widget.
What is a WordPress Widget?
WordPress widgets contain pieces of code that you can add to your website’s sidebars or widget areas.
By default, WordPress comes with a standard set of widgets that you can use with any WordPress theme.

WordPress also allows developers to create their own custom widgets. Many WordPress themes and plugins come with their own custom widgets that you can add to your sidebars.
Creating a Custom Widget in WordPress
Take a look at this code and then paste it in your site function.php to see it in action.
// Register and load the widget
function
wp_load_widget() {
register_widget( 'wp_widget'
);
}
add_action( 'widgets_init', 'wp_load_widget'
);
// Creating the widget
class
wp_widget extends
WP_Widget {
function
__construct() {
parent::__construct(
// Base ID of your widget
'wp_widget',
// Widget name will appear in UI
__('WP Widget', 'wp_widget_domain'),
// Widget description
array( 'description'
=> __( 'Sample widget based on wp Tutorial', 'wp_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!', 'wp_widget_domain'
);
echo
$args['after_widget'];
}
// Widget Backend
public
function
form( $instance
) {
if
( isset( $instance[ 'title'
] ) ) {
$title
= $instance[ 'title'
];
}
else
{
$title
= __( 'New title', 'wp_widget_domain'
);
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:'
); ?></label>
<input class="wptrinity"
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 wp_widget ends here
After adding the code you need to head over to Appearance » Widgets page. You will notice the new WP Widget in the list of available widgets. You need to drag and drop this widget to a sidebar.

Now you can visit your website to see it in action.
